@os-design/core 1.0.156 → 1.0.157

package/dist/cjs/Checkbox/index.js

@@ -1,68 +1,41 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _react2 = require("@emotion/react");
-
 var _icons = require("@os-design/icons");
-
 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", "onKeyDown", "onMouseDown", "children"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
-
 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 _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."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 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 uncheckedIconStyles = function uncheckedIconStyles(p) {
   return !p.checked && (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-color: ", ";\n    border-color: ", ";\n  "])), (0, _theming.clr)(p.theme.checkboxUncheckedColorBg), (0, _theming.clr)(p.theme.checkboxUncheckedColorBorder));
 };
-
 var checkedIconStyles = function checkedIconStyles(p) {
   return p.checked && (0, _react2.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    border-color: ", ";\n  "])), (0, _theming.clr)(p.theme.checkboxCheckedColorBg), (0, _theming.clr)(p.theme.checkboxCheckedColorBg));
 };
-
 var disabledIconStyles = function disabledIconStyles(p) {
   return p.disabled && (0, _react2.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n  "])), (0, _theming.clr)(p.theme.checkboxDisabledColorBg), (0, _theming.clr)(p.theme.checkboxDisabledColorIcon), (0, _theming.clr)(p.theme.checkboxDisabledColorBorder));
 };
-
 var IconContainer = (0, _styled["default"])('span', (0, _utils.omitEmotionProps)('disabled', 'checked'))(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: ", "em;\n  height: ", "em;\n  min-width: ", "em;\n  min-height: ", "em;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  box-sizing: border-box;\n  line-height: 1;\n\n  border: 1px solid transparent;\n  border-radius: ", "em;\n  color: ", ";\n  margin-top: ", "em;\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), function (p) {
   return p.theme.checkboxSize;
 }, function (p) {
@@ -78,62 +51,53 @@ var IconContainer = (0, _styled["default"])('span', (0, _utils.omitEmotionProps)
 }, function (p) {
   return (p.theme.lineHeight - p.theme.checkboxSize) / 2;
 }, uncheckedIconStyles, checkedIconStyles, disabledIconStyles, (0, _styles.transitionStyles)('background-color', 'color', 'border-color'));
-
 var hoverUncheckedIconStyles = function hoverUncheckedIconStyles(p) {
   return !p.checked && (0, _react2.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    background-color: ", ";\n  "])), (0, _theming.clr)(p.theme.checkboxUncheckedColorBgHover));
 };
-
 var hoverCheckedIconStyles = function hoverCheckedIconStyles(p) {
   return p.checked && (0, _react2.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    border-color: ", ";\n  "])), (0, _theming.clr)(p.theme.checkboxCheckedColorBgHover), (0, _theming.clr)(p.theme.checkboxCheckedColorBgHover));
 };
-
 var hoverStyles = function hoverStyles(p) {
   return !p.disabled && (0, _react2.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    @media (hover: hover) {\n      &:hover,\n      &:focus {\n        & > span {\n          ", ";\n          ", ";\n        }\n      }\n    }\n  "])), hoverUncheckedIconStyles(p), hoverCheckedIconStyles(p));
 };
-
 var disabledContainerStyles = function disabledContainerStyles(p) {
   return p.disabled && (0, _react2.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    cursor: not-allowed;\n  "])));
 };
-
 var Container = (0, _styled["default"])('label', (0, _utils.omitEmotionProps)('disabled', 'size', 'checked'))(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", ";\n  cursor: pointer;\n  user-select: none;\n\n  display: flex;\n  margin: ", "em 0;\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), _styles.resetFocusStyles, function (p) {
   return p.theme.checkboxVerticalIndent;
 }, hoverStyles, disabledContainerStyles, _styles.sizeStyles, (0, _styles.transitionStyles)('color'));
-
 var disabledTextStyles = function disabledTextStyles(p) {
   return p.disabled && (0, _react2.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), (0, _theming.clr)(p.theme.checkboxDisabledColorText));
 };
-
 var Text = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('disabled'))(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  margin-left: 0.4em;\n  color: ", ";\n  ", ";\n"])), function (p) {
   return (0, _theming.clr)(p.theme.colorText);
 }, disabledTextStyles);
+
 /**
  * The checkbox that can be enabled or disabled.
  */
-
 var Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      value = _ref.value,
-      defaultValue = _ref.defaultValue,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-      size = _ref.size,
-      _ref$onKeyDown = _ref.onKeyDown,
-      _onKeyDown = _ref$onKeyDown === void 0 ? function () {} : _ref$onKeyDown,
-      _ref$onMouseDown = _ref.onMouseDown,
-      _onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
-      children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+    size = _ref.size,
+    _ref$onKeyDown = _ref.onKeyDown,
+    _onKeyDown = _ref$onKeyDown === void 0 ? function () {} : _ref$onKeyDown,
+    _ref$onMouseDown = _ref.onMouseDown,
+    _onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useForwardedState = (0, _utils.useForwardedState)({
-    value: value,
-    defaultValue: defaultValue,
-    onChange: onChange
-  }),
-      _useForwardedState2 = _slicedToArray(_useForwardedState, 2),
-      forwardedValue = _useForwardedState2[0],
-      setForwardedValue = _useForwardedState2[1];
-
+      value: value,
+      defaultValue: defaultValue,
+      onChange: onChange
+    }),
+    _useForwardedState2 = _slicedToArray(_useForwardedState, 2),
+    forwardedValue = _useForwardedState2[0],
+    setForwardedValue = _useForwardedState2[1];
   return /*#__PURE__*/_react["default"].createElement(Container, _extends({
     disabled: disabled,
     checked: forwardedValue,
@@ -145,17 +109,14 @@ var Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     },
     onKeyDown: function onKeyDown(e) {
       if (disabled) return;
-
       if (['Enter', ' '].includes(e.key)) {
         setForwardedValue(!forwardedValue);
         e.preventDefault();
       }
-
       _onKeyDown(e);
     },
     onMouseDown: function onMouseDown(e) {
       _onMouseDown(e);
-
       e.preventDefault();
     },
     role: "checkbox",

package/dist/cjs/Checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["uncheckedIconStyles","p","checked","css","clr","theme","checkboxUncheckedColorBg","checkboxUncheckedColorBorder","checkedIconStyles","checkboxCheckedColorBg","disabledIconStyles","disabled","checkboxDisabledColorBg","checkboxDisabledColorIcon","checkboxDisabledColorBorder","IconContainer","styled","omitEmotionProps","checkboxSize","borderRadius","checkboxCheckedColorIcon","lineHeight","transitionStyles","hoverUncheckedIconStyles","checkboxUncheckedColorBgHover","hoverCheckedIconStyles","checkboxCheckedColorBgHover","hoverStyles","disabledContainerStyles","Container","resetFocusStyles","checkboxVerticalIndent","sizeStyles","disabledTextStyles","checkboxDisabledColorText","Text","colorText","Checkbox","forwardRef","ref","value","defaultValue","onChange","size","onKeyDown","onMouseDown","children","rest","useForwardedState","forwardedValue","setForwardedValue","e","includes","key","preventDefault","displayName"],"sources":["../../../src/Checkbox/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\nimport { Check } from '@os-design/icons';\nimport {\n  resetFocusStyles,\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 JsxLabelProps = Omit<\n  JSX.IntrinsicElements['label'],\n  'defaultValue' | 'onChange' | 'onClick' | 'ref'\n>;\nexport interface CheckboxProps extends JsxLabelProps, WithSize {\n  /**\n   * Whether the checkbox is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Whether the checkbox is checked.\n   * @default false\n   */\n  value?: boolean;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: boolean;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: boolean) => void;\n}\n\nconst uncheckedIconStyles = (p) =>\n  !p.checked &&\n  css`\n    background-color: ${clr(p.theme.checkboxUncheckedColorBg)};\n    border-color: ${clr(p.theme.checkboxUncheckedColorBorder)};\n  `;\n\nconst checkedIconStyles = (p) =>\n  p.checked &&\n  css`\n    background-color: ${clr(p.theme.checkboxCheckedColorBg)};\n    border-color: ${clr(p.theme.checkboxCheckedColorBg)};\n  `;\n\nconst disabledIconStyles = (p) =>\n  p.disabled &&\n  css`\n    background-color: ${clr(p.theme.checkboxDisabledColorBg)};\n    color: ${clr(p.theme.checkboxDisabledColorIcon)};\n    border-color: ${clr(p.theme.checkboxDisabledColorBorder)};\n  `;\n\ninterface IconContainerProps extends Required<Pick<CheckboxProps, 'disabled'>> {\n  checked: Required<CheckboxProps['value']>;\n}\nconst IconContainer = styled(\n  'span',\n  omitEmotionProps('disabled', 'checked')\n)<IconContainerProps>`\n  width: ${(p) => p.theme.checkboxSize}em;\n  height: ${(p) => p.theme.checkboxSize}em;\n  min-width: ${(p) => p.theme.checkboxSize}em;\n  min-height: ${(p) => p.theme.checkboxSize}em;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  box-sizing: border-box;\n  line-height: 1;\n\n  border: 1px solid transparent;\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  color: ${(p) => clr(p.theme.checkboxCheckedColorIcon)};\n  margin-top: ${(p) => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;\n\n  ${uncheckedIconStyles};\n  ${checkedIconStyles};\n  ${disabledIconStyles};\n  ${transitionStyles('background-color', 'color', 'border-color')};\n`;\n\nconst hoverUncheckedIconStyles = (p) =>\n  !p.checked &&\n  css`\n    background-color: ${clr(p.theme.checkboxUncheckedColorBgHover)};\n  `;\n\nconst hoverCheckedIconStyles = (p) =>\n  p.checked &&\n  css`\n    background-color: ${clr(p.theme.checkboxCheckedColorBgHover)};\n    border-color: ${clr(p.theme.checkboxCheckedColorBgHover)};\n  `;\n\nconst hoverStyles = (p) =>\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover,\n      &:focus {\n        & > span {\n          ${hoverUncheckedIconStyles(p)};\n          ${hoverCheckedIconStyles(p)};\n        }\n      }\n    }\n  `;\n\nconst disabledContainerStyles = (p) =>\n  p.disabled &&\n  css`\n    cursor: not-allowed;\n  `;\n\ninterface ContainerProps\n  extends Required<Pick<CheckboxProps, 'disabled'>>,\n    Pick<CheckboxProps, 'size'> {\n  checked: Required<CheckboxProps['value']>;\n}\nconst Container = styled(\n  'label',\n  omitEmotionProps('disabled', 'size', 'checked')\n)<ContainerProps>`\n  ${resetFocusStyles};\n  cursor: pointer;\n  user-select: none;\n\n  display: flex;\n  margin: ${(p) => p.theme.checkboxVerticalIndent}em 0;\n\n  ${hoverStyles};\n  ${disabledContainerStyles};\n  ${sizeStyles};\n  ${transitionStyles('color')};\n`;\n\nconst disabledTextStyles = (p) =>\n  p.disabled &&\n  css`\n    color: ${clr(p.theme.checkboxDisabledColorText)};\n  `;\n\ntype TextProps = Required<Pick<CheckboxProps, 'disabled'>>;\nconst Text = styled('div', omitEmotionProps('disabled'))<TextProps>`\n  margin-left: 0.4em;\n  color: ${(p) => clr(p.theme.colorText)};\n  ${disabledTextStyles};\n`;\n\n/**\n * The checkbox that can be enabled or disabled.\n */\nconst Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n  (\n    {\n      disabled = false,\n      value,\n      defaultValue,\n      onChange = () => {},\n      size,\n      onKeyDown = () => {},\n      onMouseDown = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    return (\n      <Container\n        disabled={disabled}\n        checked={forwardedValue}\n        size={size}\n        tabIndex={!disabled ? 0 : -1}\n        onClick={() => {\n          if (disabled) return;\n          setForwardedValue(!forwardedValue);\n        }}\n        onKeyDown={(e) => {\n          if (disabled) return;\n          if (['Enter', ' '].includes(e.key)) {\n            setForwardedValue(!forwardedValue);\n            e.preventDefault();\n          }\n          onKeyDown(e);\n        }}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        role='checkbox'\n        aria-checked={forwardedValue}\n        aria-disabled={disabled}\n        {...rest}\n        ref={ref}\n      >\n        <IconContainer disabled={disabled} checked={forwardedValue}>\n          {forwardedValue && <Check />}\n        </IconContainer>\n\n        {children && <Text disabled={disabled}>{children}</Text>}\n      </Container>\n    );\n  }\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["uncheckedIconStyles","p","checked","css","clr","theme","checkboxUncheckedColorBg","checkboxUncheckedColorBorder","checkedIconStyles","checkboxCheckedColorBg","disabledIconStyles","disabled","checkboxDisabledColorBg","checkboxDisabledColorIcon","checkboxDisabledColorBorder","IconContainer","styled","omitEmotionProps","checkboxSize","borderRadius","checkboxCheckedColorIcon","lineHeight","transitionStyles","hoverUncheckedIconStyles","checkboxUncheckedColorBgHover","hoverCheckedIconStyles","checkboxCheckedColorBgHover","hoverStyles","disabledContainerStyles","Container","resetFocusStyles","checkboxVerticalIndent","sizeStyles","disabledTextStyles","checkboxDisabledColorText","Text","colorText","Checkbox","forwardRef","ref","value","defaultValue","onChange","size","onKeyDown","onMouseDown","children","rest","useForwardedState","forwardedValue","setForwardedValue","e","includes","key","preventDefault","displayName"],"sources":["../../../src/Checkbox/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\nimport { Check } from '@os-design/icons';\nimport {\n  resetFocusStyles,\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 JsxLabelProps = Omit<\n  JSX.IntrinsicElements['label'],\n  'defaultValue' | 'onChange' | 'onClick' | 'ref'\n>;\nexport interface CheckboxProps extends JsxLabelProps, WithSize {\n  /**\n   * Whether the checkbox is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Whether the checkbox is checked.\n   * @default false\n   */\n  value?: boolean;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: boolean;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: boolean) => void;\n}\n\nconst uncheckedIconStyles = (p) =>\n  !p.checked &&\n  css`\n    background-color: ${clr(p.theme.checkboxUncheckedColorBg)};\n    border-color: ${clr(p.theme.checkboxUncheckedColorBorder)};\n  `;\n\nconst checkedIconStyles = (p) =>\n  p.checked &&\n  css`\n    background-color: ${clr(p.theme.checkboxCheckedColorBg)};\n    border-color: ${clr(p.theme.checkboxCheckedColorBg)};\n  `;\n\nconst disabledIconStyles = (p) =>\n  p.disabled &&\n  css`\n    background-color: ${clr(p.theme.checkboxDisabledColorBg)};\n    color: ${clr(p.theme.checkboxDisabledColorIcon)};\n    border-color: ${clr(p.theme.checkboxDisabledColorBorder)};\n  `;\n\ninterface IconContainerProps extends Required<Pick<CheckboxProps, 'disabled'>> {\n  checked: Required<CheckboxProps['value']>;\n}\nconst IconContainer = styled(\n  'span',\n  omitEmotionProps('disabled', 'checked')\n)<IconContainerProps>`\n  width: ${(p) => p.theme.checkboxSize}em;\n  height: ${(p) => p.theme.checkboxSize}em;\n  min-width: ${(p) => p.theme.checkboxSize}em;\n  min-height: ${(p) => p.theme.checkboxSize}em;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  box-sizing: border-box;\n  line-height: 1;\n\n  border: 1px solid transparent;\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  color: ${(p) => clr(p.theme.checkboxCheckedColorIcon)};\n  margin-top: ${(p) => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;\n\n  ${uncheckedIconStyles};\n  ${checkedIconStyles};\n  ${disabledIconStyles};\n  ${transitionStyles('background-color', 'color', 'border-color')};\n`;\n\nconst hoverUncheckedIconStyles = (p) =>\n  !p.checked &&\n  css`\n    background-color: ${clr(p.theme.checkboxUncheckedColorBgHover)};\n  `;\n\nconst hoverCheckedIconStyles = (p) =>\n  p.checked &&\n  css`\n    background-color: ${clr(p.theme.checkboxCheckedColorBgHover)};\n    border-color: ${clr(p.theme.checkboxCheckedColorBgHover)};\n  `;\n\nconst hoverStyles = (p) =>\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover,\n      &:focus {\n        & > span {\n          ${hoverUncheckedIconStyles(p)};\n          ${hoverCheckedIconStyles(p)};\n        }\n      }\n    }\n  `;\n\nconst disabledContainerStyles = (p) =>\n  p.disabled &&\n  css`\n    cursor: not-allowed;\n  `;\n\ninterface ContainerProps\n  extends Required<Pick<CheckboxProps, 'disabled'>>,\n    Pick<CheckboxProps, 'size'> {\n  checked: Required<CheckboxProps['value']>;\n}\nconst Container = styled(\n  'label',\n  omitEmotionProps('disabled', 'size', 'checked')\n)<ContainerProps>`\n  ${resetFocusStyles};\n  cursor: pointer;\n  user-select: none;\n\n  display: flex;\n  margin: ${(p) => p.theme.checkboxVerticalIndent}em 0;\n\n  ${hoverStyles};\n  ${disabledContainerStyles};\n  ${sizeStyles};\n  ${transitionStyles('color')};\n`;\n\nconst disabledTextStyles = (p) =>\n  p.disabled &&\n  css`\n    color: ${clr(p.theme.checkboxDisabledColorText)};\n  `;\n\ntype TextProps = Required<Pick<CheckboxProps, 'disabled'>>;\nconst Text = styled('div', omitEmotionProps('disabled'))<TextProps>`\n  margin-left: 0.4em;\n  color: ${(p) => clr(p.theme.colorText)};\n  ${disabledTextStyles};\n`;\n\n/**\n * The checkbox that can be enabled or disabled.\n */\nconst Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n  (\n    {\n      disabled = false,\n      value,\n      defaultValue,\n      onChange = () => {},\n      size,\n      onKeyDown = () => {},\n      onMouseDown = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    return (\n      <Container\n        disabled={disabled}\n        checked={forwardedValue}\n        size={size}\n        tabIndex={!disabled ? 0 : -1}\n        onClick={() => {\n          if (disabled) return;\n          setForwardedValue(!forwardedValue);\n        }}\n        onKeyDown={(e) => {\n          if (disabled) return;\n          if (['Enter', ' '].includes(e.key)) {\n            setForwardedValue(!forwardedValue);\n            e.preventDefault();\n          }\n          onKeyDown(e);\n        }}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        role='checkbox'\n        aria-checked={forwardedValue}\n        aria-disabled={disabled}\n        {...rest}\n        ref={ref}\n      >\n        <IconContainer disabled={disabled} checked={forwardedValue}>\n          {forwardedValue && <Check />}\n        </IconContainer>\n\n        {children && <Text disabled={disabled}>{children}</Text>}\n      </Container>\n    );\n  }\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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"}

package/dist/cjs/CheckboxSkeleton/index.js

@@ -1,42 +1,25 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styles = require("@os-design/styles");
-
 var _utils = require("@os-design/utils");
-
 var _theming = require("@os-design/theming");
-
 var _Skeleton = _interopRequireDefault(require("../Skeleton"));
-
 var _excluded = ["children"];
-
 var _templateObject, _templateObject2, _templateObject3;
-
 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 Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('size'))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  user-select: none;\n  display: flex;\n  margin: ", "em 0;\n  ", ";\n"])), function (p) {
   return p.theme.checkboxVerticalIndent;
 }, _styles.sizeStyles);
@@ -53,19 +36,16 @@ var ImageSkeleton = (0, _styled["default"])(_Skeleton["default"])(_templateObjec
 }, function (p) {
   return (p.theme.lineHeight - p.theme.checkboxSize) / 2;
 });
-
 var Text = _styled["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: 0.4em;\n  color: ", ";\n"])), function (p) {
   return (0, _theming.clr)(p.theme.colorText);
 });
+
 /**
  * Provides a checkbox placeholder while a user waits for the content to load.
  */
-
-
 var CheckboxSkeleton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(Container, _extends({
     role: "checkbox",
     "aria-busy": true

package/dist/cjs/CheckboxSkeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Container","styled","omitEmotionProps","p","theme","checkboxVerticalIndent","sizeStyles","ImageSkeleton","Skeleton","checkboxSize","borderRadius","lineHeight","Text","div","clr","colorText","CheckboxSkeleton","forwardRef","ref","children","rest","displayName"],"sources":["../../../src/CheckboxSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport Skeleton from '../Skeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport type CheckboxSkeletonProps = JsxDivProps & WithSize;\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  user-select: none;\n  display: flex;\n  margin: ${(p) => p.theme.checkboxVerticalIndent}em 0;\n  ${sizeStyles};\n`;\n\nconst ImageSkeleton = styled(Skeleton)`\n  width: ${(p) => p.theme.checkboxSize}em;\n  height: ${(p) => p.theme.checkboxSize}em;\n  min-width: ${(p) => p.theme.checkboxSize}em;\n  min-height: ${(p) => p.theme.checkboxSize}em;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  margin-top: ${(p) => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;\n`;\n\nconst Text = styled.div`\n  margin-left: 0.4em;\n  color: ${(p) => clr(p.theme.colorText)};\n`;\n\n/**\n * Provides a checkbox placeholder while a user waits for the content to load.\n */\nconst CheckboxSkeleton = forwardRef<HTMLDivElement, CheckboxSkeletonProps>(\n  ({ children, ...rest }, ref) => (\n    <Container role='checkbox' aria-busy {...rest} ref={ref}>\n      <ImageSkeleton />\n      {children && <Text>{children}</Text>}\n    </Container>\n  )\n);\n\nCheckboxSkeleton.displayName = 'CheckboxSkeleton';\n\nexport default CheckboxSkeleton;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAKA,IAAMA,SAAS,GAAG,IAAAC,kBAAA,EAAO,KAAP,EAAc,IAAAC,uBAAA,EAAiB,MAAjB,CAAd,CAAH,8IAGH,UAACC,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQC,sBAAf;AAAA,CAHG,EAIXC,kBAJW,CAAf;AAOA,IAAMC,aAAa,GAAG,IAAAN,kBAAA,EAAOO,oBAAP,CAAH,+MACR,UAACL,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQK,YAAf;AAAA,CADQ,EAEP,UAACN,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQK,YAAf;AAAA,CAFO,EAGJ,UAACN,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQK,YAAf;AAAA,CAHI,EAIH,UAACN,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQK,YAAf;AAAA,CAJG,EAMA,UAACN,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQM,YAAf;AAAA,CANA,EAOH,UAACP,CAAD;EAAA,OAAO,CAACA,CAAC,CAACC,KAAF,CAAQO,UAAR,GAAqBR,CAAC,CAACC,KAAF,CAAQK,YAA9B,IAA8C,CAArD;AAAA,CAPG,CAAnB;;AAUA,IAAMG,IAAI,GAAGX,kBAAA,CAAOY,GAAV,iHAEC,UAACV,CAAD;EAAA,OAAO,IAAAW,YAAA,EAAIX,CAAC,CAACC,KAAF,CAAQW,SAAZ,CAAP;AAAA,CAFD,CAAV;AAKA;AACA;AACA;;;AACA,IAAMC,gBAAgB,gBAAG,IAAAC,iBAAA,EACvB,gBAAwBC,GAAxB;EAAA,IAAGC,QAAH,QAAGA,QAAH;EAAA,IAAgBC,IAAhB;;EAAA,oBACE,gCAAC,SAAD;IAAW,IAAI,EAAC,UAAhB;IAA2B;EAA3B,GAAyCA,IAAzC;IAA+C,GAAG,EAAEF;EAApD,iBACE,gCAAC,aAAD,OADF,EAEGC,QAAQ,iBAAI,gCAAC,IAAD,QAAOA,QAAP,CAFf,CADF;AAAA,CADuB,CAAzB;AASAH,gBAAgB,CAACK,WAAjB,GAA+B,kBAA/B;eAEeL,gB"}
+{"version":3,"file":"index.js","names":["Container","styled","omitEmotionProps","p","theme","checkboxVerticalIndent","sizeStyles","ImageSkeleton","Skeleton","checkboxSize","borderRadius","lineHeight","Text","div","clr","colorText","CheckboxSkeleton","forwardRef","ref","children","rest","displayName"],"sources":["../../../src/CheckboxSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport Skeleton from '../Skeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport type CheckboxSkeletonProps = JsxDivProps & WithSize;\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  user-select: none;\n  display: flex;\n  margin: ${(p) => p.theme.checkboxVerticalIndent}em 0;\n  ${sizeStyles};\n`;\n\nconst ImageSkeleton = styled(Skeleton)`\n  width: ${(p) => p.theme.checkboxSize}em;\n  height: ${(p) => p.theme.checkboxSize}em;\n  min-width: ${(p) => p.theme.checkboxSize}em;\n  min-height: ${(p) => p.theme.checkboxSize}em;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  margin-top: ${(p) => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;\n`;\n\nconst Text = styled.div`\n  margin-left: 0.4em;\n  color: ${(p) => clr(p.theme.colorText)};\n`;\n\n/**\n * Provides a checkbox placeholder while a user waits for the content to load.\n */\nconst CheckboxSkeleton = forwardRef<HTMLDivElement, CheckboxSkeletonProps>(\n  ({ children, ...rest }, ref) => (\n    <Container role='checkbox' aria-busy {...rest} ref={ref}>\n      <ImageSkeleton />\n      {children && <Text>{children}</Text>}\n    </Container>\n  )\n);\n\nCheckboxSkeleton.displayName = 'CheckboxSkeleton';\n\nexport default CheckboxSkeleton;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKnC,IAAMA,SAAS,GAAG,IAAAC,kBAAM,EAAC,KAAK,EAAE,IAAAC,uBAAgB,EAAC,MAAM,CAAC,CAAC,8IAG7C,UAACC,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACC,sBAAsB;AAAA,GAC7CC,kBAAU,CACb;AAED,IAAMC,aAAa,GAAG,IAAAN,kBAAM,EAACO,oBAAQ,CAAC,+MAC3B,UAACL,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACK,YAAY;AAAA,GAC1B,UAACN,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACK,YAAY;AAAA,GACxB,UAACN,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACK,YAAY;AAAA,GAC1B,UAACN,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACK,YAAY;AAAA,GAExB,UAACN,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACM,YAAY;AAAA,GAC9B,UAACP,CAAC;EAAA,OAAK,CAACA,CAAC,CAACC,KAAK,CAACO,UAAU,GAAGR,CAAC,CAACC,KAAK,CAACK,YAAY,IAAI,CAAC;AAAA,EACrE;AAED,IAAMG,IAAI,GAAGX,kBAAM,CAACY,GAAG,iHAEZ,UAACV,CAAC;EAAA,OAAK,IAAAW,YAAG,EAACX,CAAC,CAACC,KAAK,CAACW,SAAS,CAAC;AAAA,EACvC;;AAED;AACA;AACA;AACA,IAAMC,gBAAgB,gBAAG,IAAAC,iBAAU,EACjC,gBAAwBC,GAAG;EAAA,IAAxBC,QAAQ,QAARA,QAAQ;IAAKC,IAAI;EAAA,oBAClB,gCAAC,SAAS;IAAC,IAAI,EAAC,UAAU;IAAC;EAAS,GAAKA,IAAI;IAAE,GAAG,EAAEF;EAAI,iBACtD,gCAAC,aAAa,OAAG,EAChBC,QAAQ,iBAAI,gCAAC,IAAI,QAAEA,QAAQ,CAAQ,CAC1B;AAAA,CACb,CACF;AAEDH,gBAAgB,CAACK,WAAW,GAAG,kBAAkB;AAAC,eAEnCL,gBAAgB;AAAA"}

package/dist/cjs/DatePicker/DatePickerCalendar.js

@@ -1,72 +1,45 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _styles = require("@os-design/styles");
-
 var _icons = require("@os-design/icons");
-
 var _theming = require("@os-design/theming");
-
 var _media = require("@os-design/media");
-
 var _datePickerUtils = require("@os-design/date-picker-utils");
-
 var _Button = _interopRequireDefault(require("../Button"));
-
 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 _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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var Container = _styled["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  // For popover\n  ", " {\n    padding: ", "em;\n  }\n"])), _media.m.min.xs, function (p) {
   return p.theme.datePickerPadding;
 });
-
 var MonthContainer = _styled["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-bottom: 0.5em;\n"])));
-
 var Month = _styled["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  font-weight: 500;\n  text-align: center;\n  padding: 0 0.4em;\n  ", ";\n"])), _styles.ellipsisStyles);
-
 var Calendar = _styled["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: repeat(7, ", "em);\n  grid-auto-rows: ", "em;\n  justify-content: space-between;\n  overflow-x: auto;\n"])), function (p) {
   return p.theme.datePickerCellSize;
 }, function (p) {
   return p.theme.datePickerCellSize;
 });
-
 var DayOfWeek = _styled["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  justify-self: center;\n  align-self: center;\n  color: ", ";\n  font-size: ", "em;\n"])), function (p) {
   return (0, _theming.clr)(p.theme.datePickerDayOfWeekColorText);
 }, function (p) {
   return p.theme.sizes.small;
 });
-
 var Day = _styled["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", ";\n  justify-self: center;\n  align-self: center;\n\n  width: ", "em;\n  height: ", "em;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  border-radius: ", "em;\n  cursor: pointer;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  ", ";\n"])), _styles.resetFocusStyles, function (p) {
   return p.theme.datePickerDaySize;
 }, function (p) {
@@ -78,7 +51,6 @@ var Day = _styled["default"].div(_templateObject6 || (_templateObject6 = _tagged
 }, function (p) {
   return (0, _theming.clr)(p.theme.datePickerDayColorTextHover);
 }, (0, _styles.transitionStyles)('background-color', 'color'));
-
 var DayAnotherMonth = (0, _styled["default"])(Day)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (p) {
   return (0, _theming.clr)(p.theme.datePickerDayAnotherMonthColorText);
 });
@@ -94,26 +66,23 @@ var SelectedDay = (0, _styled["default"])(Day)(_templateObject9 || (_templateObj
 }, function (p) {
   return (0, _theming.clr)(p.theme.datePickerSelectedDayColorText);
 });
-
 var DatePickerCalendar = function DatePickerCalendar(_ref) {
   var firstDayOfWeek = _ref.firstDayOfWeek,
-      locale = _ref.locale,
-      value = _ref.value,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
+    locale = _ref.locale,
+    value = _ref.value,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
   var onChangeRef = (0, _react.useRef)(onChange);
   (0, _react.useCallback)(function () {
     onChangeRef.current = onChange;
   }, [onChange]);
-
   var _useDatePickerCalenda = (0, _datePickerUtils.useDatePickerCalendar)({
-    value: value,
-    firstDayOfWeek: firstDayOfWeek
-  }),
-      selectedMonth = _useDatePickerCalenda.selectedMonth,
-      updateMonth = _useDatePickerCalenda.updateMonth,
-      days = _useDatePickerCalenda.days;
-
+      value: value,
+      firstDayOfWeek: firstDayOfWeek
+    }),
+    selectedMonth = _useDatePickerCalenda.selectedMonth,
+    updateMonth = _useDatePickerCalenda.updateMonth,
+    days = _useDatePickerCalenda.days;
   var getDayProps = (0, _react.useCallback)(function (date) {
     return {
       tabIndex: 0,
@@ -125,7 +94,6 @@ var DatePickerCalendar = function DatePickerCalendar(_ref) {
       },
       onKeyDown: function onKeyDown(e) {
         if (!onChangeRef.current) return;
-
         if (['Enter', ' '].includes(e.key)) {
           onChangeRef.current(date.getTime() / 1000);
           e.preventDefault();
@@ -158,32 +126,27 @@ var DatePickerCalendar = function DatePickerCalendar(_ref) {
     }, item);
   }), days.map(function (_ref2) {
     var type = _ref2.type,
-        date = _ref2.date;
-
+      date = _ref2.date;
     if (type === 'dayAnotherMonth') {
       return /*#__PURE__*/_react["default"].createElement(DayAnotherMonth, _extends({
         key: date.toISOString()
       }, getDayProps(date)), date.getDate());
     }
-
     if (type === 'selectedDay') {
       return /*#__PURE__*/_react["default"].createElement(SelectedDay, _extends({
         key: date.toISOString()
       }, getDayProps(date)), date.getDate());
     }
-
     if (type === 'today') {
       return /*#__PURE__*/_react["default"].createElement(Today, _extends({
         key: date.toISOString()
       }, getDayProps(date)), date.getDate());
     }
-
     return /*#__PURE__*/_react["default"].createElement(Day, _extends({
       key: date.toISOString()
     }, getDayProps(date)), date.getDate());
   })));
 };
-
 var _default = DatePickerCalendar;
 exports["default"] = _default;
 //# sourceMappingURL=DatePickerCalendar.js.map

package/dist/cjs/DatePicker/DatePickerCalendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerCalendar.js","names":["Container","styled","div","m","min","xs","p","theme","datePickerPadding","MonthContainer","Month","ellipsisStyles","Calendar","datePickerCellSize","DayOfWeek","clr","datePickerDayOfWeekColorText","sizes","small","Day","resetFocusStyles","datePickerDaySize","borderRadius","datePickerDayColorBgHover","datePickerDayColorTextHover","transitionStyles","DayAnotherMonth","datePickerDayAnotherMonthColorText","Today","datePickerTodayColorBg","datePickerTodayColorText","datePickerTodayColorBorder","SelectedDay","datePickerSelectedDayColorBg","datePickerSelectedDayColorText","DatePickerCalendar","firstDayOfWeek","locale","value","onChange","onChangeRef","useRef","useCallback","current","useDatePickerCalendar","selectedMonth","updateMonth","days","getDayProps","date","tabIndex","role","getAccessibilityDateLabel","onClick","getTime","onKeyDown","e","includes","key","preventDefault","onMouseDown","prevMonthLabel","months","month","year","nextMonthLabel","shortDaysOfWeek","slice","map","item","type","toISOString","getDate"],"sources":["../../../src/DatePicker/DatePickerCalendar.tsx"],"sourcesContent":["import React, { HTMLAttributes, useCallback, useRef } from 'react';\nimport styled from '@emotion/styled';\nimport {\n  ellipsisStyles,\n  resetFocusStyles,\n  transitionStyles,\n} from '@os-design/styles';\nimport { Left, Right } from '@os-design/icons';\nimport { clr } from '@os-design/theming';\nimport { m } from '@os-design/media';\nimport {\n  DatePickerLocale,\n  getAccessibilityDateLabel,\n  useDatePickerCalendar,\n} from '@os-design/date-picker-utils';\nimport Button from '../Button';\n\ninterface DatePickerCalendarProps {\n  firstDayOfWeek: 'sunday' | 'monday';\n  locale: DatePickerLocale;\n  value?: number | null;\n  onChange?: (value: number) => void;\n}\n\nconst Container = styled.div`\n  // For popover\n  ${m.min.xs} {\n    padding: ${(p) => p.theme.datePickerPadding}em;\n  }\n`;\n\nconst MonthContainer = styled.div`\n  display: flex;\n  align-items: center;\n  margin-bottom: 0.5em;\n`;\n\nconst Month = styled.div`\n  flex-grow: 1;\n  font-weight: 500;\n  text-align: center;\n  padding: 0 0.4em;\n  ${ellipsisStyles};\n`;\n\nconst Calendar = styled.div`\n  display: grid;\n  grid-template-columns: repeat(7, ${(p) => p.theme.datePickerCellSize}em);\n  grid-auto-rows: ${(p) => p.theme.datePickerCellSize}em;\n  justify-content: space-between;\n  overflow-x: auto;\n`;\n\nconst DayOfWeek = styled.div`\n  justify-self: center;\n  align-self: center;\n  color: ${(p) => clr(p.theme.datePickerDayOfWeekColorText)};\n  font-size: ${(p) => p.theme.sizes.small}em;\n`;\n\nconst Day = styled.div`\n  ${resetFocusStyles};\n  justify-self: center;\n  align-self: center;\n\n  width: ${(p) => p.theme.datePickerDaySize}em;\n  height: ${(p) => p.theme.datePickerDaySize}em;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  cursor: pointer;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      background-color: ${(p) => clr(p.theme.datePickerDayColorBgHover)};\n      color: ${(p) => clr(p.theme.datePickerDayColorTextHover)};\n    }\n  }\n\n  ${transitionStyles('background-color', 'color')};\n`;\n\nconst DayAnotherMonth = styled(Day)`\n  color: ${(p) => clr(p.theme.datePickerDayAnotherMonthColorText)};\n`;\n\nconst Today = styled(Day)`\n  background-color: ${(p) => clr(p.theme.datePickerTodayColorBg)};\n  color: ${(p) => clr(p.theme.datePickerTodayColorText)};\n  border: 1px solid ${(p) => clr(p.theme.datePickerTodayColorBorder)};\n  box-sizing: border-box;\n`;\n\nconst SelectedDay = styled(Day)`\n  background-color: ${(p) => clr(p.theme.datePickerSelectedDayColorBg)};\n  color: ${(p) => clr(p.theme.datePickerSelectedDayColorText)};\n`;\n\nconst DatePickerCalendar: React.FC<DatePickerCalendarProps> = ({\n  firstDayOfWeek,\n  locale,\n  value,\n  onChange = () => {},\n}) => {\n  const onChangeRef = useRef(onChange);\n\n  useCallback(() => {\n    onChangeRef.current = onChange;\n  }, [onChange]);\n\n  const { selectedMonth, updateMonth, days } = useDatePickerCalendar({\n    value,\n    firstDayOfWeek,\n  });\n\n  const getDayProps = useCallback<\n    (date: Date) => HTMLAttributes<HTMLDivElement>\n  >(\n    (date: Date) => ({\n      tabIndex: 0,\n      role: 'button',\n      'aria-label': getAccessibilityDateLabel(date, locale),\n      onClick: () => {\n        if (!onChangeRef.current) return;\n        onChangeRef.current(date.getTime() / 1000);\n      },\n      onKeyDown: (e) => {\n        if (!onChangeRef.current) return;\n        if (['Enter', ' '].includes(e.key)) {\n          onChangeRef.current(date.getTime() / 1000);\n          e.preventDefault();\n        }\n      },\n      onMouseDown: (e) => e.preventDefault(),\n    }),\n    [locale]\n  );\n\n  return (\n    <Container>\n      <MonthContainer>\n        <Button\n          type='ghost'\n          wide='never'\n          size='small'\n          onClick={() => updateMonth(-1)}\n          aria-label={locale.prevMonthLabel}\n        >\n          <Left />\n        </Button>\n        <Month>\n          {locale.months[selectedMonth.month]} {selectedMonth.year}\n        </Month>\n        <Button\n          type='ghost'\n          wide='never'\n          size='small'\n          onClick={() => updateMonth(1)}\n          aria-label={locale.nextMonthLabel}\n        >\n          <Right />\n        </Button>\n      </MonthContainer>\n\n      <Calendar>\n        {(firstDayOfWeek === 'sunday'\n          ? locale.shortDaysOfWeek\n          : [...locale.shortDaysOfWeek.slice(1), locale.shortDaysOfWeek[0]]\n        ).map((item) => (\n          <DayOfWeek key={item}>{item}</DayOfWeek>\n        ))}\n\n        {days.map(({ type, date }) => {\n          if (type === 'dayAnotherMonth') {\n            return (\n              <DayAnotherMonth key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </DayAnotherMonth>\n            );\n          }\n          if (type === 'selectedDay') {\n            return (\n              <SelectedDay key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </SelectedDay>\n            );\n          }\n          if (type === 'today') {\n            return (\n              <Today key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </Today>\n            );\n          }\n          return (\n            <Day key={date.toISOString()} {...getDayProps(date)}>\n              {date.getDate()}\n            </Day>\n          );\n        })}\n      </Calendar>\n    </Container>\n  );\n};\n\nexport default DatePickerCalendar;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AAKA;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,IAAMA,SAAS,GAAGC,kBAAA,CAAOC,GAAV,+HAEXC,QAAA,CAAEC,GAAF,CAAMC,EAFK,EAGA,UAACC,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQC,iBAAf;AAAA,CAHA,CAAf;;AAOA,IAAMC,cAAc,GAAGR,kBAAA,CAAOC,GAAV,4IAApB;;AAMA,IAAMQ,KAAK,GAAGT,kBAAA,CAAOC,GAAV,qKAKPS,sBALO,CAAX;;AAQA,IAAMC,QAAQ,GAAGX,kBAAA,CAAOC,GAAV,4NAEuB,UAACI,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQM,kBAAf;AAAA,CAFvB,EAGM,UAACP,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQM,kBAAf;AAAA,CAHN,CAAd;;AAQA,IAAMC,SAAS,GAAGb,kBAAA,CAAOC,GAAV,gKAGJ,UAACI,CAAD;EAAA,OAAO,IAAAS,YAAA,EAAIT,CAAC,CAACC,KAAF,CAAQS,4BAAZ,CAAP;AAAA,CAHI,EAIA,UAACV,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQU,KAAR,CAAcC,KAArB;AAAA,CAJA,CAAf;;AAOA,IAAMC,GAAG,GAAGlB,kBAAA,CAAOC,GAAV,saACLkB,wBADK,EAKE,UAACd,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQc,iBAAf;AAAA,CALF,EAMG,UAACf,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQc,iBAAf;AAAA,CANH,EAYU,UAACf,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQe,YAAf;AAAA,CAZV,EAkBiB,UAAChB,CAAD;EAAA,OAAO,IAAAS,YAAA,EAAIT,CAAC,CAACC,KAAF,CAAQgB,yBAAZ,CAAP;AAAA,CAlBjB,EAmBM,UAACjB,CAAD;EAAA,OAAO,IAAAS,YAAA,EAAIT,CAAC,CAACC,KAAF,CAAQiB,2BAAZ,CAAP;AAAA,CAnBN,EAuBL,IAAAC,wBAAA,EAAiB,kBAAjB,EAAqC,OAArC,CAvBK,CAAT;;AA0BA,IAAMC,eAAe,GAAG,IAAAzB,kBAAA,EAAOkB,GAAP,CAAH,0FACV,UAACb,CAAD;EAAA,OAAO,IAAAS,YAAA,EAAIT,CAAC,CAACC,KAAF,CAAQoB,kCAAZ,CAAP;AAAA,CADU,CAArB;AAIA,IAAMC,KAAK,GAAG,IAAA3B,kBAAA,EAAOkB,GAAP,CAAH,2KACW,UAACb,CAAD;EAAA,OAAO,IAAAS,YAAA,EAAIT,CAAC,CAACC,KAAF,CAAQsB,sBAAZ,CAAP;AAAA,CADX,EAEA,UAACvB,CAAD;EAAA,OAAO,IAAAS,YAAA,EAAIT,CAAC,CAACC,KAAF,CAAQuB,wBAAZ,CAAP;AAAA,CAFA,EAGW,UAACxB,CAAD;EAAA,OAAO,IAAAS,YAAA,EAAIT,CAAC,CAACC,KAAF,CAAQwB,0BAAZ,CAAP;AAAA,CAHX,CAAX;AAOA,IAAMC,WAAW,GAAG,IAAA/B,kBAAA,EAAOkB,GAAP,CAAH,qHACK,UAACb,CAAD;EAAA,OAAO,IAAAS,YAAA,EAAIT,CAAC,CAACC,KAAF,CAAQ0B,4BAAZ,CAAP;AAAA,CADL,EAEN,UAAC3B,CAAD;EAAA,OAAO,IAAAS,YAAA,EAAIT,CAAC,CAACC,KAAF,CAAQ2B,8BAAZ,CAAP;AAAA,CAFM,CAAjB;;AAKA,IAAMC,kBAAqD,GAAG,SAAxDA,kBAAwD,OAKxD;EAAA,IAJJC,cAII,QAJJA,cAII;EAAA,IAHJC,MAGI,QAHJA,MAGI;EAAA,IAFJC,KAEI,QAFJA,KAEI;EAAA,yBADJC,QACI;EAAA,IADJA,QACI,8BADO,YAAM,CAAE,CACf;EACJ,IAAMC,WAAW,GAAG,IAAAC,aAAA,EAAOF,QAAP,CAApB;EAEA,IAAAG,kBAAA,EAAY,YAAM;IAChBF,WAAW,CAACG,OAAZ,GAAsBJ,QAAtB;EACD,CAFD,EAEG,CAACA,QAAD,CAFH;;EAIA,4BAA6C,IAAAK,sCAAA,EAAsB;IACjEN,KAAK,EAALA,KADiE;IAEjEF,cAAc,EAAdA;EAFiE,CAAtB,CAA7C;EAAA,IAAQS,aAAR,yBAAQA,aAAR;EAAA,IAAuBC,WAAvB,yBAAuBA,WAAvB;EAAA,IAAoCC,IAApC,yBAAoCA,IAApC;;EAKA,IAAMC,WAAW,GAAG,IAAAN,kBAAA,EAGlB,UAACO,IAAD;IAAA,OAAiB;MACfC,QAAQ,EAAE,CADK;MAEfC,IAAI,EAAE,QAFS;MAGf,cAAc,IAAAC,0CAAA,EAA0BH,IAA1B,EAAgCZ,MAAhC,CAHC;MAIfgB,OAAO,EAAE,mBAAM;QACb,IAAI,CAACb,WAAW,CAACG,OAAjB,EAA0B;QAC1BH,WAAW,CAACG,OAAZ,CAAoBM,IAAI,CAACK,OAAL,KAAiB,IAArC;MACD,CAPc;MAQfC,SAAS,EAAE,mBAACC,CAAD,EAAO;QAChB,IAAI,CAAChB,WAAW,CAACG,OAAjB,EAA0B;;QAC1B,IAAI,CAAC,OAAD,EAAU,GAAV,EAAec,QAAf,CAAwBD,CAAC,CAACE,GAA1B,CAAJ,EAAoC;UAClClB,WAAW,CAACG,OAAZ,CAAoBM,IAAI,CAACK,OAAL,KAAiB,IAArC;UACAE,CAAC,CAACG,cAAF;QACD;MACF,CAdc;MAefC,WAAW,EAAE,qBAACJ,CAAD;QAAA,OAAOA,CAAC,CAACG,cAAF,EAAP;MAAA;IAfE,CAAjB;EAAA,CAHkB,EAoBlB,CAACtB,MAAD,CApBkB,CAApB;EAuBA,oBACE,gCAAC,SAAD,qBACE,gCAAC,cAAD,qBACE,gCAAC,kBAAD;IACE,IAAI,EAAC,OADP;IAEE,IAAI,EAAC,OAFP;IAGE,IAAI,EAAC,OAHP;IAIE,OAAO,EAAE;MAAA,OAAMS,WAAW,CAAC,CAAC,CAAF,CAAjB;IAAA,CAJX;IAKE,cAAYT,MAAM,CAACwB;EALrB,gBAOE,gCAAC,WAAD,OAPF,CADF,eAUE,gCAAC,KAAD,QACGxB,MAAM,CAACyB,MAAP,CAAcjB,aAAa,CAACkB,KAA5B,CADH,OACwClB,aAAa,CAACmB,IADtD,CAVF,eAaE,gCAAC,kBAAD;IACE,IAAI,EAAC,OADP;IAEE,IAAI,EAAC,OAFP;IAGE,IAAI,EAAC,OAHP;IAIE,OAAO,EAAE;MAAA,OAAMlB,WAAW,CAAC,CAAD,CAAjB;IAAA,CAJX;IAKE,cAAYT,MAAM,CAAC4B;EALrB,gBAOE,gCAAC,YAAD,OAPF,CAbF,CADF,eAyBE,gCAAC,QAAD,QACG,CAAC7B,cAAc,KAAK,QAAnB,GACEC,MAAM,CAAC6B,eADT,gCAEM7B,MAAM,CAAC6B,eAAP,CAAuBC,KAAvB,CAA6B,CAA7B,CAFN,IAEuC9B,MAAM,CAAC6B,eAAP,CAAuB,CAAvB,CAFvC,EAAD,EAGCE,GAHD,CAGK,UAACC,IAAD;IAAA,oBACJ,gCAAC,SAAD;MAAW,GAAG,EAAEA;IAAhB,GAAuBA,IAAvB,CADI;EAAA,CAHL,CADH,EAQGtB,IAAI,CAACqB,GAAL,CAAS,iBAAoB;IAAA,IAAjBE,IAAiB,SAAjBA,IAAiB;IAAA,IAAXrB,IAAW,SAAXA,IAAW;;IAC5B,IAAIqB,IAAI,KAAK,iBAAb,EAAgC;MAC9B,oBACE,gCAAC,eAAD;QAAiB,GAAG,EAAErB,IAAI,CAACsB,WAAL;MAAtB,GAA8CvB,WAAW,CAACC,IAAD,CAAzD,GACGA,IAAI,CAACuB,OAAL,EADH,CADF;IAKD;;IACD,IAAIF,IAAI,KAAK,aAAb,EAA4B;MAC1B,oBACE,gCAAC,WAAD;QAAa,GAAG,EAAErB,IAAI,CAACsB,WAAL;MAAlB,GAA0CvB,WAAW,CAACC,IAAD,CAArD,GACGA,IAAI,CAACuB,OAAL,EADH,CADF;IAKD;;IACD,IAAIF,IAAI,KAAK,OAAb,EAAsB;MACpB,oBACE,gCAAC,KAAD;QAAO,GAAG,EAAErB,IAAI,CAACsB,WAAL;MAAZ,GAAoCvB,WAAW,CAACC,IAAD,CAA/C,GACGA,IAAI,CAACuB,OAAL,EADH,CADF;IAKD;;IACD,oBACE,gCAAC,GAAD;MAAK,GAAG,EAAEvB,IAAI,CAACsB,WAAL;IAAV,GAAkCvB,WAAW,CAACC,IAAD,CAA7C,GACGA,IAAI,CAACuB,OAAL,EADH,CADF;EAKD,CA3BA,CARH,CAzBF,CADF;AAiED,CAzGD;;eA2GerC,kB"}
+{"version":3,"file":"DatePickerCalendar.js","names":["Container","styled","div","m","min","xs","p","theme","datePickerPadding","MonthContainer","Month","ellipsisStyles","Calendar","datePickerCellSize","DayOfWeek","clr","datePickerDayOfWeekColorText","sizes","small","Day","resetFocusStyles","datePickerDaySize","borderRadius","datePickerDayColorBgHover","datePickerDayColorTextHover","transitionStyles","DayAnotherMonth","datePickerDayAnotherMonthColorText","Today","datePickerTodayColorBg","datePickerTodayColorText","datePickerTodayColorBorder","SelectedDay","datePickerSelectedDayColorBg","datePickerSelectedDayColorText","DatePickerCalendar","firstDayOfWeek","locale","value","onChange","onChangeRef","useRef","useCallback","current","useDatePickerCalendar","selectedMonth","updateMonth","days","getDayProps","date","tabIndex","role","getAccessibilityDateLabel","onClick","getTime","onKeyDown","e","includes","key","preventDefault","onMouseDown","prevMonthLabel","months","month","year","nextMonthLabel","shortDaysOfWeek","slice","map","item","type","toISOString","getDate"],"sources":["../../../src/DatePicker/DatePickerCalendar.tsx"],"sourcesContent":["import React, { HTMLAttributes, useCallback, useRef } from 'react';\nimport styled from '@emotion/styled';\nimport {\n  ellipsisStyles,\n  resetFocusStyles,\n  transitionStyles,\n} from '@os-design/styles';\nimport { Left, Right } from '@os-design/icons';\nimport { clr } from '@os-design/theming';\nimport { m } from '@os-design/media';\nimport {\n  DatePickerLocale,\n  getAccessibilityDateLabel,\n  useDatePickerCalendar,\n} from '@os-design/date-picker-utils';\nimport Button from '../Button';\n\ninterface DatePickerCalendarProps {\n  firstDayOfWeek: 'sunday' | 'monday';\n  locale: DatePickerLocale;\n  value?: number | null;\n  onChange?: (value: number) => void;\n}\n\nconst Container = styled.div`\n  // For popover\n  ${m.min.xs} {\n    padding: ${(p) => p.theme.datePickerPadding}em;\n  }\n`;\n\nconst MonthContainer = styled.div`\n  display: flex;\n  align-items: center;\n  margin-bottom: 0.5em;\n`;\n\nconst Month = styled.div`\n  flex-grow: 1;\n  font-weight: 500;\n  text-align: center;\n  padding: 0 0.4em;\n  ${ellipsisStyles};\n`;\n\nconst Calendar = styled.div`\n  display: grid;\n  grid-template-columns: repeat(7, ${(p) => p.theme.datePickerCellSize}em);\n  grid-auto-rows: ${(p) => p.theme.datePickerCellSize}em;\n  justify-content: space-between;\n  overflow-x: auto;\n`;\n\nconst DayOfWeek = styled.div`\n  justify-self: center;\n  align-self: center;\n  color: ${(p) => clr(p.theme.datePickerDayOfWeekColorText)};\n  font-size: ${(p) => p.theme.sizes.small}em;\n`;\n\nconst Day = styled.div`\n  ${resetFocusStyles};\n  justify-self: center;\n  align-self: center;\n\n  width: ${(p) => p.theme.datePickerDaySize}em;\n  height: ${(p) => p.theme.datePickerDaySize}em;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  cursor: pointer;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      background-color: ${(p) => clr(p.theme.datePickerDayColorBgHover)};\n      color: ${(p) => clr(p.theme.datePickerDayColorTextHover)};\n    }\n  }\n\n  ${transitionStyles('background-color', 'color')};\n`;\n\nconst DayAnotherMonth = styled(Day)`\n  color: ${(p) => clr(p.theme.datePickerDayAnotherMonthColorText)};\n`;\n\nconst Today = styled(Day)`\n  background-color: ${(p) => clr(p.theme.datePickerTodayColorBg)};\n  color: ${(p) => clr(p.theme.datePickerTodayColorText)};\n  border: 1px solid ${(p) => clr(p.theme.datePickerTodayColorBorder)};\n  box-sizing: border-box;\n`;\n\nconst SelectedDay = styled(Day)`\n  background-color: ${(p) => clr(p.theme.datePickerSelectedDayColorBg)};\n  color: ${(p) => clr(p.theme.datePickerSelectedDayColorText)};\n`;\n\nconst DatePickerCalendar: React.FC<DatePickerCalendarProps> = ({\n  firstDayOfWeek,\n  locale,\n  value,\n  onChange = () => {},\n}) => {\n  const onChangeRef = useRef(onChange);\n\n  useCallback(() => {\n    onChangeRef.current = onChange;\n  }, [onChange]);\n\n  const { selectedMonth, updateMonth, days } = useDatePickerCalendar({\n    value,\n    firstDayOfWeek,\n  });\n\n  const getDayProps = useCallback<\n    (date: Date) => HTMLAttributes<HTMLDivElement>\n  >(\n    (date: Date) => ({\n      tabIndex: 0,\n      role: 'button',\n      'aria-label': getAccessibilityDateLabel(date, locale),\n      onClick: () => {\n        if (!onChangeRef.current) return;\n        onChangeRef.current(date.getTime() / 1000);\n      },\n      onKeyDown: (e) => {\n        if (!onChangeRef.current) return;\n        if (['Enter', ' '].includes(e.key)) {\n          onChangeRef.current(date.getTime() / 1000);\n          e.preventDefault();\n        }\n      },\n      onMouseDown: (e) => e.preventDefault(),\n    }),\n    [locale]\n  );\n\n  return (\n    <Container>\n      <MonthContainer>\n        <Button\n          type='ghost'\n          wide='never'\n          size='small'\n          onClick={() => updateMonth(-1)}\n          aria-label={locale.prevMonthLabel}\n        >\n          <Left />\n        </Button>\n        <Month>\n          {locale.months[selectedMonth.month]} {selectedMonth.year}\n        </Month>\n        <Button\n          type='ghost'\n          wide='never'\n          size='small'\n          onClick={() => updateMonth(1)}\n          aria-label={locale.nextMonthLabel}\n        >\n          <Right />\n        </Button>\n      </MonthContainer>\n\n      <Calendar>\n        {(firstDayOfWeek === 'sunday'\n          ? locale.shortDaysOfWeek\n          : [...locale.shortDaysOfWeek.slice(1), locale.shortDaysOfWeek[0]]\n        ).map((item) => (\n          <DayOfWeek key={item}>{item}</DayOfWeek>\n        ))}\n\n        {days.map(({ type, date }) => {\n          if (type === 'dayAnotherMonth') {\n            return (\n              <DayAnotherMonth key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </DayAnotherMonth>\n            );\n          }\n          if (type === 'selectedDay') {\n            return (\n              <SelectedDay key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </SelectedDay>\n            );\n          }\n          if (type === 'today') {\n            return (\n              <Today key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </Today>\n            );\n          }\n          return (\n            <Day key={date.toISOString()} {...getDayProps(date)}>\n              {date.getDate()}\n            </Day>\n          );\n        })}\n      </Calendar>\n    </Container>\n  );\n};\n\nexport default DatePickerCalendar;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAKA;AACA;AACA;AACA;AAKA;AAA+B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS/B,IAAMA,SAAS,GAAGC,kBAAM,CAACC,GAAG,+HAExBC,QAAC,CAACC,GAAG,CAACC,EAAE,EACG,UAACC,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACC,iBAAiB;AAAA,EAE9C;AAED,IAAMC,cAAc,GAAGR,kBAAM,CAACC,GAAG,4IAIhC;AAED,IAAMQ,KAAK,GAAGT,kBAAM,CAACC,GAAG,qKAKpBS,sBAAc,CACjB;AAED,IAAMC,QAAQ,GAAGX,kBAAM,CAACC,GAAG,4NAEU,UAACI,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACM,kBAAkB;AAAA,GAClD,UAACP,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACM,kBAAkB;AAAA,EAGpD;AAED,IAAMC,SAAS,GAAGb,kBAAM,CAACC,GAAG,gKAGjB,UAACI,CAAC;EAAA,OAAK,IAAAS,YAAG,EAACT,CAAC,CAACC,KAAK,CAACS,4BAA4B,CAAC;AAAA,GAC5C,UAACV,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACU,KAAK,CAACC,KAAK;AAAA,EACxC;AAED,IAAMC,GAAG,GAAGlB,kBAAM,CAACC,GAAG,saAClBkB,wBAAgB,EAIT,UAACd,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACc,iBAAiB;AAAA,GAC/B,UAACf,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACc,iBAAiB;AAAA,GAMzB,UAACf,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACe,YAAY;AAAA,GAMpB,UAAChB,CAAC;EAAA,OAAK,IAAAS,YAAG,EAACT,CAAC,CAACC,KAAK,CAACgB,yBAAyB,CAAC;AAAA,GACxD,UAACjB,CAAC;EAAA,OAAK,IAAAS,YAAG,EAACT,CAAC,CAACC,KAAK,CAACiB,2BAA2B,CAAC;AAAA,GAI1D,IAAAC,wBAAgB,EAAC,kBAAkB,EAAE,OAAO,CAAC,CAChD;AAED,IAAMC,eAAe,GAAG,IAAAzB,kBAAM,EAACkB,GAAG,CAAC,0FACxB,UAACb,CAAC;EAAA,OAAK,IAAAS,YAAG,EAACT,CAAC,CAACC,KAAK,CAACoB,kCAAkC,CAAC;AAAA,EAChE;AAED,IAAMC,KAAK,GAAG,IAAA3B,kBAAM,EAACkB,GAAG,CAAC,2KACH,UAACb,CAAC;EAAA,OAAK,IAAAS,YAAG,EAACT,CAAC,CAACC,KAAK,CAACsB,sBAAsB,CAAC;AAAA,GACrD,UAACvB,CAAC;EAAA,OAAK,IAAAS,YAAG,EAACT,CAAC,CAACC,KAAK,CAACuB,wBAAwB,CAAC;AAAA,GACjC,UAACxB,CAAC;EAAA,OAAK,IAAAS,YAAG,EAACT,CAAC,CAACC,KAAK,CAACwB,0BAA0B,CAAC;AAAA,EAEnE;AAED,IAAMC,WAAW,GAAG,IAAA/B,kBAAM,EAACkB,GAAG,CAAC,qHACT,UAACb,CAAC;EAAA,OAAK,IAAAS,YAAG,EAACT,CAAC,CAACC,KAAK,CAAC0B,4BAA4B,CAAC;AAAA,GAC3D,UAAC3B,CAAC;EAAA,OAAK,IAAAS,YAAG,EAACT,CAAC,CAACC,KAAK,CAAC2B,8BAA8B,CAAC;AAAA,EAC5D;AAED,IAAMC,kBAAqD,GAAG,SAAxDA,kBAAqD,OAKrD;EAAA,IAJJC,cAAc,QAAdA,cAAc;IACdC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IAAA,qBACLC,QAAQ;IAARA,QAAQ,8BAAG,YAAM,CAAC,CAAC;EAEnB,IAAMC,WAAW,GAAG,IAAAC,aAAM,EAACF,QAAQ,CAAC;EAEpC,IAAAG,kBAAW,EAAC,YAAM;IAChBF,WAAW,CAACG,OAAO,GAAGJ,QAAQ;EAChC,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,4BAA6C,IAAAK,sCAAqB,EAAC;MACjEN,KAAK,EAALA,KAAK;MACLF,cAAc,EAAdA;IACF,CAAC,CAAC;IAHMS,aAAa,yBAAbA,aAAa;IAAEC,WAAW,yBAAXA,WAAW;IAAEC,IAAI,yBAAJA,IAAI;EAKxC,IAAMC,WAAW,GAAG,IAAAN,kBAAW,EAG7B,UAACO,IAAU;IAAA,OAAM;MACfC,QAAQ,EAAE,CAAC;MACXC,IAAI,EAAE,QAAQ;MACd,YAAY,EAAE,IAAAC,0CAAyB,EAACH,IAAI,EAAEZ,MAAM,CAAC;MACrDgB,OAAO,EAAE,mBAAM;QACb,IAAI,CAACb,WAAW,CAACG,OAAO,EAAE;QAC1BH,WAAW,CAACG,OAAO,CAACM,IAAI,CAACK,OAAO,EAAE,GAAG,IAAI,CAAC;MAC5C,CAAC;MACDC,SAAS,EAAE,mBAACC,CAAC,EAAK;QAChB,IAAI,CAAChB,WAAW,CAACG,OAAO,EAAE;QAC1B,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAACc,QAAQ,CAACD,CAAC,CAACE,GAAG,CAAC,EAAE;UAClClB,WAAW,CAACG,OAAO,CAACM,IAAI,CAACK,OAAO,EAAE,GAAG,IAAI,CAAC;UAC1CE,CAAC,CAACG,cAAc,EAAE;QACpB;MACF,CAAC;MACDC,WAAW,EAAE,qBAACJ,CAAC;QAAA,OAAKA,CAAC,CAACG,cAAc,EAAE;MAAA;IACxC,CAAC;EAAA,CAAC,EACF,CAACtB,MAAM,CAAC,CACT;EAED,oBACE,gCAAC,SAAS,qBACR,gCAAC,cAAc,qBACb,gCAAC,kBAAM;IACL,IAAI,EAAC,OAAO;IACZ,IAAI,EAAC,OAAO;IACZ,IAAI,EAAC,OAAO;IACZ,OAAO,EAAE;MAAA,OAAMS,WAAW,CAAC,CAAC,CAAC,CAAC;IAAA,CAAC;IAC/B,cAAYT,MAAM,CAACwB;EAAe,gBAElC,gCAAC,WAAI,OAAG,CACD,eACT,gCAAC,KAAK,QACHxB,MAAM,CAACyB,MAAM,CAACjB,aAAa,CAACkB,KAAK,CAAC,OAAGlB,aAAa,CAACmB,IAAI,CAClD,eACR,gCAAC,kBAAM;IACL,IAAI,EAAC,OAAO;IACZ,IAAI,EAAC,OAAO;IACZ,IAAI,EAAC,OAAO;IACZ,OAAO,EAAE;MAAA,OAAMlB,WAAW,CAAC,CAAC,CAAC;IAAA,CAAC;IAC9B,cAAYT,MAAM,CAAC4B;EAAe,gBAElC,gCAAC,YAAK,OAAG,CACF,CACM,eAEjB,gCAAC,QAAQ,QACN,CAAC7B,cAAc,KAAK,QAAQ,GACzBC,MAAM,CAAC6B,eAAe,gCAClB7B,MAAM,CAAC6B,eAAe,CAACC,KAAK,CAAC,CAAC,CAAC,IAAE9B,MAAM,CAAC6B,eAAe,CAAC,CAAC,CAAC,EAAC,EACjEE,GAAG,CAAC,UAACC,IAAI;IAAA,oBACT,gCAAC,SAAS;MAAC,GAAG,EAAEA;IAAK,GAAEA,IAAI,CAAa;EAAA,CACzC,CAAC,EAEDtB,IAAI,CAACqB,GAAG,CAAC,iBAAoB;IAAA,IAAjBE,IAAI,SAAJA,IAAI;MAAErB,IAAI,SAAJA,IAAI;IACrB,IAAIqB,IAAI,KAAK,iBAAiB,EAAE;MAC9B,oBACE,gCAAC,eAAe;QAAC,GAAG,EAAErB,IAAI,CAACsB,WAAW;MAAG,GAAKvB,WAAW,CAACC,IAAI,CAAC,GAC5DA,IAAI,CAACuB,OAAO,EAAE,CACC;IAEtB;IACA,IAAIF,IAAI,KAAK,aAAa,EAAE;MAC1B,oBACE,gCAAC,WAAW;QAAC,GAAG,EAAErB,IAAI,CAACsB,WAAW;MAAG,GAAKvB,WAAW,CAACC,IAAI,CAAC,GACxDA,IAAI,CAACuB,OAAO,EAAE,CACH;IAElB;IACA,IAAIF,IAAI,KAAK,OAAO,EAAE;MACpB,oBACE,gCAAC,KAAK;QAAC,GAAG,EAAErB,IAAI,CAACsB,WAAW;MAAG,GAAKvB,WAAW,CAACC,IAAI,CAAC,GAClDA,IAAI,CAACuB,OAAO,EAAE,CACT;IAEZ;IACA,oBACE,gCAAC,GAAG;MAAC,GAAG,EAAEvB,IAAI,CAACsB,WAAW;IAAG,GAAKvB,WAAW,CAACC,IAAI,CAAC,GAChDA,IAAI,CAACuB,OAAO,EAAE,CACX;EAEV,CAAC,CAAC,CACO,CACD;AAEhB,CAAC;AAAC,eAEarC,kBAAkB;AAAA"}