@os-design/core 1.0.156 → 1.0.158

package/dist/cjs/DatePicker/index.js

@@ -1,106 +1,75 @@
 "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 _utils = require("@os-design/utils");
-
 var _icons = require("@os-design/icons");
-
 var _media = require("@os-design/media");
-
 var _datePickerUtils = require("@os-design/date-picker-utils");
-
 var _theming = require("@os-design/theming");
-
 var _Select = require("../Select");
-
 var _SelectToggle = require("../Select/SelectToggle");
-
 var _Popover = _interopRequireDefault(require("../Popover"));
-
 var _Modal = _interopRequireDefault(require("../Modal"));
-
 var _DatePickerCalendar = _interopRequireDefault(require("./DatePickerCalendar"));
-
 var _Button = _interopRequireDefault(require("../Button"));
-
 var _excluded = ["left", "leftHasPadding", "right", "rightHasPadding", "placeholder", "disabled", "format", "firstDayOfWeek", "locale", "value", "defaultValue", "onChange", "size"];
-
 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; }
-
 /**
  * The component to choose a date.
  */
 var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var left = _ref.left,
-      _ref$leftHasPadding = _ref.leftHasPadding,
-      leftHasPadding = _ref$leftHasPadding === void 0 ? false : _ref$leftHasPadding,
-      right = _ref.right,
-      _ref$rightHasPadding = _ref.rightHasPadding,
-      rightHasPadding = _ref$rightHasPadding === void 0 ? false : _ref$rightHasPadding,
-      placeholder = _ref.placeholder,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$format = _ref.format,
-      format = _ref$format === void 0 ? _datePickerUtils.defaultFormat : _ref$format,
-      _ref$firstDayOfWeek = _ref.firstDayOfWeek,
-      firstDayOfWeek = _ref$firstDayOfWeek === void 0 ? 'sunday' : _ref$firstDayOfWeek,
-      _ref$locale = _ref.locale,
-      locale = _ref$locale === void 0 ? _datePickerUtils.defaultLocale : _ref$locale,
-      value = _ref.value,
-      defaultValue = _ref.defaultValue,
-      onChange = _ref.onChange,
-      size = _ref.size,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    _ref$leftHasPadding = _ref.leftHasPadding,
+    leftHasPadding = _ref$leftHasPadding === void 0 ? false : _ref$leftHasPadding,
+    right = _ref.right,
+    _ref$rightHasPadding = _ref.rightHasPadding,
+    rightHasPadding = _ref$rightHasPadding === void 0 ? false : _ref$rightHasPadding,
+    placeholder = _ref.placeholder,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$format = _ref.format,
+    format = _ref$format === void 0 ? _datePickerUtils.defaultFormat : _ref$format,
+    _ref$firstDayOfWeek = _ref.firstDayOfWeek,
+    firstDayOfWeek = _ref$firstDayOfWeek === void 0 ? 'sunday' : _ref$firstDayOfWeek,
+    _ref$locale = _ref.locale,
+    locale = _ref$locale === void 0 ? _datePickerUtils.defaultLocale : _ref$locale,
+    value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange,
+    size = _ref.size,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useForwardedRef = (0, _utils.useForwardedRef)(ref),
-      _useForwardedRef2 = _slicedToArray(_useForwardedRef, 2),
-      containerRef = _useForwardedRef2[0],
-      mergedContainerRef = _useForwardedRef2[1];
-
+    _useForwardedRef2 = _slicedToArray(_useForwardedRef, 2),
+    containerRef = _useForwardedRef2[0],
+    mergedContainerRef = _useForwardedRef2[1];
   var _useState = (0, _react.useState)(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      opened = _useState2[0],
-      setOpened = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    opened = _useState2[0],
+    setOpened = _useState2[1];
   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];
   var formattedValue = (0, _react.useMemo)(function () {
     if (!forwardedValue) return forwardedValue;
     return format(new Date(forwardedValue * 1000), locale);
@@ -110,7 +79,6 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }, []);
   (0, _utils.useKeyPress)(typeof window !== 'undefined' ? window : undefined, 'Escape', closeHandler);
   var isMinXs = (0, _media.useIsMinWidth)('xs');
-
   var calendar = /*#__PURE__*/_react["default"].createElement(_DatePickerCalendar["default"], {
     firstDayOfWeek: firstDayOfWeek,
     locale: locale,
@@ -120,7 +88,6 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       closeHandler();
     }
   });
-
   var valueIsSpecified = (0, _react.useMemo)(function () {
     return formattedValue !== undefined && formattedValue !== null;
   }, [formattedValue]);
@@ -139,7 +106,6 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         },
         onKeyDown: function onKeyDown(e) {
           if (disabled) return;
-
           if (['Enter', ' '].includes(e.key)) {
             setForwardedValue(null);
             if (!containerRef.current) return;
@@ -151,7 +117,6 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         "aria-label": locale.clearLabel
       }, /*#__PURE__*/_react["default"].createElement(_SelectToggle.ClearIcon, null)));
     }
-
     return right || /*#__PURE__*/_react["default"].createElement(_SelectToggle.IconContainer, null, opened ? /*#__PURE__*/_react["default"].createElement(_icons.Up, null) : /*#__PURE__*/_react["default"].createElement(_icons.Down, null));
   }, [containerRef, disabled, locale.clearLabel, opened, right, setForwardedValue, valueIsSpecified]);
   var rightHasPaddingValue = (0, _react.useMemo)(function () {
@@ -169,7 +134,6 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     },
     onKeyDown: function onKeyDown(e) {
       if (disabled) return;
-
       if (['Enter', ' '].includes(e.key)) {
         setOpened(!opened);
         e.preventDefault();

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["DatePicker","forwardRef","ref","left","leftHasPadding","right","rightHasPadding","placeholder","disabled","format","defaultFormat","firstDayOfWeek","locale","defaultLocale","value","defaultValue","onChange","size","rest","useForwardedRef","containerRef","mergedContainerRef","useState","opened","setOpened","useForwardedState","forwardedValue","setForwardedValue","formattedValue","useMemo","Date","closeHandler","useCallback","useKeyPress","window","undefined","isMinXs","useIsMinWidth","calendar","v","valueIsSpecified","rightValue","e","stopPropagation","includes","key","current","focus","preventDefault","clearLabel","rightHasPaddingValue","getAccessibilityDateLabel","t","buttonPaddingHorizontal","baseHeight","selectToggleListItemHeight","sizes","small","displayName"],"sources":["../../../src/DatePicker/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState } from 'react';\nimport { WithSize } from '@os-design/styles';\nimport {\n  useForwardedRef,\n  useForwardedState,\n  useKeyPress,\n} from '@os-design/utils';\nimport { Down, Up } from '@os-design/icons';\nimport { useIsMinWidth } from '@os-design/media';\nimport {\n  defaultLocale,\n  DatePickerLocale,\n  defaultFormat,\n  getAccessibilityDateLabel,\n} from '@os-design/date-picker-utils';\nimport { ThemeOverrider } from '@os-design/theming';\nimport { SelectContainer } from '../Select';\nimport {\n  Content,\n  LeftAddon,\n  RightAddon,\n  ClearIcon,\n  IconContainer,\n  Placeholder,\n  Title,\n} from '../Select/SelectToggle';\nimport Popover from '../Popover';\nimport Modal from '../Modal';\nimport DatePickerCalendar from './DatePickerCalendar';\nimport Button from '../Button';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface DatePickerProps extends JsxDivProps, WithSize {\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * The placeholder of the date picker.\n   * @default undefined\n   */\n  placeholder?: string;\n  /**\n   * Whether the date picker is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * The format of the date.\n   * @default undefined\n   */\n  format?: (date: Date) => string;\n  /**\n   * The first day of the week.\n   * @default sunday\n   */\n  firstDayOfWeek?: 'sunday' | 'monday';\n  /**\n   * The locale of the date picker.\n   * @default undefined\n   */\n  locale?: DatePickerLocale;\n  /**\n   * Selected timestamp.\n   * @default undefined\n   */\n  value?: number | null;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: number | null;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: number | null) => void;\n}\n\n/**\n * The component to choose a date.\n */\nconst DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      placeholder,\n      disabled = false,\n      format = defaultFormat,\n      firstDayOfWeek = 'sunday',\n      locale = defaultLocale,\n      value,\n      defaultValue,\n      onChange,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const [opened, setOpened] = useState(false);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const formattedValue = useMemo(() => {\n      if (!forwardedValue) return forwardedValue;\n      return format(new Date(forwardedValue * 1000), locale);\n    }, [forwardedValue, format, locale]);\n\n    const closeHandler = useCallback(() => {\n      setOpened(false);\n    }, []);\n\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      closeHandler\n    );\n    const isMinXs = useIsMinWidth('xs');\n\n    const calendar = (\n      <DatePickerCalendar\n        firstDayOfWeek={firstDayOfWeek}\n        locale={locale}\n        value={forwardedValue}\n        onChange={(v) => {\n          setForwardedValue(v);\n          closeHandler();\n        }}\n      />\n    );\n\n    const valueIsSpecified = useMemo(\n      () => formattedValue !== undefined && formattedValue !== null,\n      [formattedValue]\n    );\n\n    const rightValue = useMemo(() => {\n      if (valueIsSpecified) {\n        return (\n          <div aria-hidden>\n            <Button\n              type='ghost'\n              wide='never'\n              size='small'\n              disabled={disabled}\n              onClick={(e) => {\n                setForwardedValue(null);\n                e.stopPropagation();\n              }}\n              onKeyDown={(e) => {\n                if (disabled) return;\n                if (['Enter', ' '].includes(e.key)) {\n                  setForwardedValue(null);\n                  if (!containerRef.current) return;\n                  containerRef.current.focus();\n                  e.preventDefault();\n                  e.stopPropagation();\n                }\n              }}\n              aria-label={locale.clearLabel}\n            >\n              <ClearIcon />\n            </Button>\n          </div>\n        );\n      }\n      return (\n        right || <IconContainer>{opened ? <Up /> : <Down />}</IconContainer>\n      );\n    }, [\n      containerRef,\n      disabled,\n      locale.clearLabel,\n      opened,\n      right,\n      setForwardedValue,\n      valueIsSpecified,\n    ]);\n\n    const rightHasPaddingValue = useMemo(() => {\n      if (valueIsSpecified) return false;\n      return right ? rightHasPadding : true;\n    }, [right, rightHasPadding, valueIsSpecified]);\n\n    return (\n      <>\n        <SelectContainer\n          opened={opened}\n          disabled={disabled}\n          size={size}\n          tabIndex={!disabled ? 0 : -1}\n          onClick={() => {\n            if (disabled) return;\n            setOpened(!opened);\n          }}\n          onKeyDown={(e) => {\n            if (disabled) return;\n            if (['Enter', ' '].includes(e.key)) {\n              setOpened(!opened);\n              e.preventDefault();\n            }\n          }}\n          onMouseDown={(e) => e.preventDefault()}\n          role='combobox'\n          aria-label={\n            forwardedValue !== undefined && forwardedValue !== null\n              ? getAccessibilityDateLabel(\n                  new Date(forwardedValue * 1000),\n                  locale\n                )\n              : undefined\n          }\n          aria-disabled={disabled}\n          {...rest}\n          ref={mergedContainerRef}\n        >\n          {left && (\n            <ThemeOverrider\n              overrides={(t) => ({\n                buttonPaddingHorizontal: 0.8,\n                baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n              })}\n            >\n              <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n            </ThemeOverrider>\n          )}\n\n          <Content hasLeft={!!left} hasRight={!!right}>\n            {valueIsSpecified ? (\n              <Title disabled={disabled} aria-hidden>\n                {formattedValue}\n              </Title>\n            ) : (\n              <Placeholder>{placeholder}</Placeholder>\n            )}\n          </Content>\n\n          {rightValue && (\n            <ThemeOverrider\n              overrides={(t) => ({\n                buttonPaddingHorizontal: 0.8,\n                baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n              })}\n            >\n              <RightAddon hasPadding={rightHasPaddingValue}>\n                {rightValue}\n              </RightAddon>\n            </ThemeOverrider>\n          )}\n        </SelectContainer>\n\n        {isMinXs ? (\n          <Popover\n            trigger={containerRef}\n            placement='bottom-start'\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendar}\n          </Popover>\n        ) : (\n          <Modal\n            title={placeholder}\n            footer={null}\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendar}\n          </Modal>\n        )}\n      </>\n    );\n  }\n);\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["DatePicker","forwardRef","ref","left","leftHasPadding","right","rightHasPadding","placeholder","disabled","format","defaultFormat","firstDayOfWeek","locale","defaultLocale","value","defaultValue","onChange","size","rest","useForwardedRef","containerRef","mergedContainerRef","useState","opened","setOpened","useForwardedState","forwardedValue","setForwardedValue","formattedValue","useMemo","Date","closeHandler","useCallback","useKeyPress","window","undefined","isMinXs","useIsMinWidth","calendar","v","valueIsSpecified","rightValue","e","stopPropagation","includes","key","current","focus","preventDefault","clearLabel","rightHasPaddingValue","getAccessibilityDateLabel","t","buttonPaddingHorizontal","baseHeight","selectToggleListItemHeight","sizes","small","displayName"],"sources":["../../../src/DatePicker/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState } from 'react';\nimport { WithSize } from '@os-design/styles';\nimport {\n  useForwardedRef,\n  useForwardedState,\n  useKeyPress,\n} from '@os-design/utils';\nimport { Down, Up } from '@os-design/icons';\nimport { useIsMinWidth } from '@os-design/media';\nimport {\n  defaultLocale,\n  DatePickerLocale,\n  defaultFormat,\n  getAccessibilityDateLabel,\n} from '@os-design/date-picker-utils';\nimport { ThemeOverrider } from '@os-design/theming';\nimport { SelectContainer } from '../Select';\nimport {\n  Content,\n  LeftAddon,\n  RightAddon,\n  ClearIcon,\n  IconContainer,\n  Placeholder,\n  Title,\n} from '../Select/SelectToggle';\nimport Popover from '../Popover';\nimport Modal from '../Modal';\nimport DatePickerCalendar from './DatePickerCalendar';\nimport Button from '../Button';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface DatePickerProps extends JsxDivProps, WithSize {\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * The placeholder of the date picker.\n   * @default undefined\n   */\n  placeholder?: string;\n  /**\n   * Whether the date picker is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * The format of the date.\n   * @default undefined\n   */\n  format?: (date: Date) => string;\n  /**\n   * The first day of the week.\n   * @default sunday\n   */\n  firstDayOfWeek?: 'sunday' | 'monday';\n  /**\n   * The locale of the date picker.\n   * @default undefined\n   */\n  locale?: DatePickerLocale;\n  /**\n   * Selected timestamp.\n   * @default undefined\n   */\n  value?: number | null;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: number | null;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: number | null) => void;\n}\n\n/**\n * The component to choose a date.\n */\nconst DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      placeholder,\n      disabled = false,\n      format = defaultFormat,\n      firstDayOfWeek = 'sunday',\n      locale = defaultLocale,\n      value,\n      defaultValue,\n      onChange,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const [opened, setOpened] = useState(false);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const formattedValue = useMemo(() => {\n      if (!forwardedValue) return forwardedValue;\n      return format(new Date(forwardedValue * 1000), locale);\n    }, [forwardedValue, format, locale]);\n\n    const closeHandler = useCallback(() => {\n      setOpened(false);\n    }, []);\n\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      closeHandler\n    );\n    const isMinXs = useIsMinWidth('xs');\n\n    const calendar = (\n      <DatePickerCalendar\n        firstDayOfWeek={firstDayOfWeek}\n        locale={locale}\n        value={forwardedValue}\n        onChange={(v) => {\n          setForwardedValue(v);\n          closeHandler();\n        }}\n      />\n    );\n\n    const valueIsSpecified = useMemo(\n      () => formattedValue !== undefined && formattedValue !== null,\n      [formattedValue]\n    );\n\n    const rightValue = useMemo(() => {\n      if (valueIsSpecified) {\n        return (\n          <div aria-hidden>\n            <Button\n              type='ghost'\n              wide='never'\n              size='small'\n              disabled={disabled}\n              onClick={(e) => {\n                setForwardedValue(null);\n                e.stopPropagation();\n              }}\n              onKeyDown={(e) => {\n                if (disabled) return;\n                if (['Enter', ' '].includes(e.key)) {\n                  setForwardedValue(null);\n                  if (!containerRef.current) return;\n                  containerRef.current.focus();\n                  e.preventDefault();\n                  e.stopPropagation();\n                }\n              }}\n              aria-label={locale.clearLabel}\n            >\n              <ClearIcon />\n            </Button>\n          </div>\n        );\n      }\n      return (\n        right || <IconContainer>{opened ? <Up /> : <Down />}</IconContainer>\n      );\n    }, [\n      containerRef,\n      disabled,\n      locale.clearLabel,\n      opened,\n      right,\n      setForwardedValue,\n      valueIsSpecified,\n    ]);\n\n    const rightHasPaddingValue = useMemo(() => {\n      if (valueIsSpecified) return false;\n      return right ? rightHasPadding : true;\n    }, [right, rightHasPadding, valueIsSpecified]);\n\n    return (\n      <>\n        <SelectContainer\n          opened={opened}\n          disabled={disabled}\n          size={size}\n          tabIndex={!disabled ? 0 : -1}\n          onClick={() => {\n            if (disabled) return;\n            setOpened(!opened);\n          }}\n          onKeyDown={(e) => {\n            if (disabled) return;\n            if (['Enter', ' '].includes(e.key)) {\n              setOpened(!opened);\n              e.preventDefault();\n            }\n          }}\n          onMouseDown={(e) => e.preventDefault()}\n          role='combobox'\n          aria-label={\n            forwardedValue !== undefined && forwardedValue !== null\n              ? getAccessibilityDateLabel(\n                  new Date(forwardedValue * 1000),\n                  locale\n                )\n              : undefined\n          }\n          aria-disabled={disabled}\n          {...rest}\n          ref={mergedContainerRef}\n        >\n          {left && (\n            <ThemeOverrider\n              overrides={(t) => ({\n                buttonPaddingHorizontal: 0.8,\n                baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n              })}\n            >\n              <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n            </ThemeOverrider>\n          )}\n\n          <Content hasLeft={!!left} hasRight={!!right}>\n            {valueIsSpecified ? (\n              <Title disabled={disabled} aria-hidden>\n                {formattedValue}\n              </Title>\n            ) : (\n              <Placeholder>{placeholder}</Placeholder>\n            )}\n          </Content>\n\n          {rightValue && (\n            <ThemeOverrider\n              overrides={(t) => ({\n                buttonPaddingHorizontal: 0.8,\n                baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n              })}\n            >\n              <RightAddon hasPadding={rightHasPaddingValue}>\n                {rightValue}\n              </RightAddon>\n            </ThemeOverrider>\n          )}\n        </SelectContainer>\n\n        {isMinXs ? (\n          <Popover\n            trigger={containerRef}\n            placement='bottom-start'\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendar}\n          </Popover>\n        ) : (\n          <Modal\n            title={placeholder}\n            footer={null}\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendar}\n          </Modal>\n        )}\n      </>\n    );\n  }\n);\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"mappings":";;;;;;;AAAA;AAEA;AAKA;AACA;AACA;AAMA;AACA;AACA;AASA;AACA;AACA;AACA;AAA+B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuE/B;AACA;AACA;AACA,IAAMA,UAAU,gBAAG,IAAAC,iBAAU,EAC3B,gBAiBEC,GAAG,EACA;EAAA,IAhBDC,IAAI,QAAJA,IAAI;IAAA,2BACJC,cAAc;IAAdA,cAAc,oCAAG,KAAK;IACtBC,KAAK,QAALA,KAAK;IAAA,4BACLC,eAAe;IAAfA,eAAe,qCAAG,KAAK;IACvBC,WAAW,QAAXA,WAAW;IAAA,qBACXC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,mBAChBC,MAAM;IAANA,MAAM,4BAAGC,8BAAa;IAAA,2BACtBC,cAAc;IAAdA,cAAc,oCAAG,QAAQ;IAAA,mBACzBC,MAAM;IAANA,MAAM,4BAAGC,8BAAa;IACtBC,KAAK,QAALA,KAAK;IACLC,YAAY,QAAZA,YAAY;IACZC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IACDC,IAAI;EAIT,uBAA2C,IAAAC,sBAAe,EAACjB,GAAG,CAAC;IAAA;IAAxDkB,YAAY;IAAEC,kBAAkB;EACvC,gBAA4B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAApCC,MAAM;IAAEC,SAAS;EACxB,yBAA4C,IAAAC,wBAAiB,EAAC;MAC5DX,KAAK,EAALA,KAAK;MACLC,YAAY,EAAZA,YAAY;MACZC,QAAQ,EAARA;IACF,CAAC,CAAC;IAAA;IAJKU,cAAc;IAAEC,iBAAiB;EAMxC,IAAMC,cAAc,GAAG,IAAAC,cAAO,EAAC,YAAM;IACnC,IAAI,CAACH,cAAc,EAAE,OAAOA,cAAc;IAC1C,OAAOjB,MAAM,CAAC,IAAIqB,IAAI,CAACJ,cAAc,GAAG,IAAI,CAAC,EAAEd,MAAM,CAAC;EACxD,CAAC,EAAE,CAACc,cAAc,EAAEjB,MAAM,EAAEG,MAAM,CAAC,CAAC;EAEpC,IAAMmB,YAAY,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACrCR,SAAS,CAAC,KAAK,CAAC;EAClB,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAS,kBAAW,EACR,OAAOC,MAAM,KAAK,WAAW,GAAGA,MAAM,GAAGC,SAAS,EACnD,QAAQ,EACRJ,YAAY,CACb;EACD,IAAMK,OAAO,GAAG,IAAAC,oBAAa,EAAC,IAAI,CAAC;EAEnC,IAAMC,QAAQ,gBACZ,gCAAC,8BAAkB;IACjB,cAAc,EAAE3B,cAAe;IAC/B,MAAM,EAAEC,MAAO;IACf,KAAK,EAAEc,cAAe;IACtB,QAAQ,EAAE,kBAACa,CAAC,EAAK;MACfZ,iBAAiB,CAACY,CAAC,CAAC;MACpBR,YAAY,EAAE;IAChB;EAAE,EAEL;EAED,IAAMS,gBAAgB,GAAG,IAAAX,cAAO,EAC9B;IAAA,OAAMD,cAAc,KAAKO,SAAS,IAAIP,cAAc,KAAK,IAAI;EAAA,GAC7D,CAACA,cAAc,CAAC,CACjB;EAED,IAAMa,UAAU,GAAG,IAAAZ,cAAO,EAAC,YAAM;IAC/B,IAAIW,gBAAgB,EAAE;MACpB,oBACE;QAAK;MAAW,gBACd,gCAAC,kBAAM;QACL,IAAI,EAAC,OAAO;QACZ,IAAI,EAAC,OAAO;QACZ,IAAI,EAAC,OAAO;QACZ,QAAQ,EAAEhC,QAAS;QACnB,OAAO,EAAE,iBAACkC,CAAC,EAAK;UACdf,iBAAiB,CAAC,IAAI,CAAC;UACvBe,CAAC,CAACC,eAAe,EAAE;QACrB,CAAE;QACF,SAAS,EAAE,mBAACD,CAAC,EAAK;UAChB,IAAIlC,QAAQ,EAAE;UACd,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAACoC,QAAQ,CAACF,CAAC,CAACG,GAAG,CAAC,EAAE;YAClClB,iBAAiB,CAAC,IAAI,CAAC;YACvB,IAAI,CAACP,YAAY,CAAC0B,OAAO,EAAE;YAC3B1B,YAAY,CAAC0B,OAAO,CAACC,KAAK,EAAE;YAC5BL,CAAC,CAACM,cAAc,EAAE;YAClBN,CAAC,CAACC,eAAe,EAAE;UACrB;QACF,CAAE;QACF,cAAY/B,MAAM,CAACqC;MAAW,gBAE9B,gCAAC,uBAAS,OAAG,CACN,CACL;IAEV;IACA,OACE5C,KAAK,iBAAI,gCAAC,2BAAa,QAAEkB,MAAM,gBAAG,gCAAC,SAAE,OAAG,gBAAG,gCAAC,WAAI,OAAG,CAAiB;EAExE,CAAC,EAAE,CACDH,YAAY,EACZZ,QAAQ,EACRI,MAAM,CAACqC,UAAU,EACjB1B,MAAM,EACNlB,KAAK,EACLsB,iBAAiB,EACjBa,gBAAgB,CACjB,CAAC;EAEF,IAAMU,oBAAoB,GAAG,IAAArB,cAAO,EAAC,YAAM;IACzC,IAAIW,gBAAgB,EAAE,OAAO,KAAK;IAClC,OAAOnC,KAAK,GAAGC,eAAe,GAAG,IAAI;EACvC,CAAC,EAAE,CAACD,KAAK,EAAEC,eAAe,EAAEkC,gBAAgB,CAAC,CAAC;EAE9C,oBACE,+EACE,gCAAC,uBAAe;IACd,MAAM,EAAEjB,MAAO;IACf,QAAQ,EAAEf,QAAS;IACnB,IAAI,EAAES,IAAK;IACX,QAAQ,EAAE,CAACT,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAE;IAC7B,OAAO,EAAE,mBAAM;MACb,IAAIA,QAAQ,EAAE;MACdgB,SAAS,CAAC,CAACD,MAAM,CAAC;IACpB,CAAE;IACF,SAAS,EAAE,mBAACmB,CAAC,EAAK;MAChB,IAAIlC,QAAQ,EAAE;MACd,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAACoC,QAAQ,CAACF,CAAC,CAACG,GAAG,CAAC,EAAE;QAClCrB,SAAS,CAAC,CAACD,MAAM,CAAC;QAClBmB,CAAC,CAACM,cAAc,EAAE;MACpB;IACF,CAAE;IACF,WAAW,EAAE,qBAACN,CAAC;MAAA,OAAKA,CAAC,CAACM,cAAc,EAAE;IAAA,CAAC;IACvC,IAAI,EAAC,UAAU;IACf,cACEtB,cAAc,KAAKS,SAAS,IAAIT,cAAc,KAAK,IAAI,GACnD,IAAAyB,0CAAyB,EACvB,IAAIrB,IAAI,CAACJ,cAAc,GAAG,IAAI,CAAC,EAC/Bd,MAAM,CACP,GACDuB,SACL;IACD,iBAAe3B;EAAS,GACpBU,IAAI;IACR,GAAG,EAAEG;EAAmB,IAEvBlB,IAAI,iBACH,gCAAC,uBAAc;IACb,SAAS,EAAE,mBAACiD,CAAC;MAAA,OAAM;QACjBC,uBAAuB,EAAE,GAAG;QAC5BC,UAAU,EAAEF,CAAC,CAACG,0BAA0B,GAAGH,CAAC,CAACI,KAAK,CAACC;MACrD,CAAC;IAAA;EAAE,gBAEH,gCAAC,uBAAS;IAAC,UAAU,EAAErD;EAAe,GAAED,IAAI,CAAa,CAE5D,eAED,gCAAC,qBAAO;IAAC,OAAO,EAAE,CAAC,CAACA,IAAK;IAAC,QAAQ,EAAE,CAAC,CAACE;EAAM,GACzCmC,gBAAgB,gBACf,gCAAC,mBAAK;IAAC,QAAQ,EAAEhC,QAAS;IAAC;EAAW,GACnCoB,cAAc,CACT,gBAER,gCAAC,yBAAW,QAAErB,WAAW,CAC1B,CACO,EAETkC,UAAU,iBACT,gCAAC,uBAAc;IACb,SAAS,EAAE,mBAACW,CAAC;MAAA,OAAM;QACjBC,uBAAuB,EAAE,GAAG;QAC5BC,UAAU,EAAEF,CAAC,CAACG,0BAA0B,GAAGH,CAAC,CAACI,KAAK,CAACC;MACrD,CAAC;IAAA;EAAE,gBAEH,gCAAC,wBAAU;IAAC,UAAU,EAAEP;EAAqB,GAC1CT,UAAU,CACA,CAEhB,CACe,EAEjBL,OAAO,gBACN,gCAAC,mBAAO;IACN,OAAO,EAAEhB,YAAa;IACtB,SAAS,EAAC,cAAc;IACxB,OAAO,EAAEG,MAAO;IAChB,OAAO,EAAEQ,YAAa;IACtB,IAAI,EAAEd;EAAK,GAEVqB,QAAQ,CACD,gBAEV,gCAAC,iBAAK;IACJ,KAAK,EAAE/B,WAAY;IACnB,MAAM,EAAE,IAAK;IACb,OAAO,EAAEgB,MAAO;IAChB,OAAO,EAAEQ,YAAa;IACtB,IAAI,EAAEd;EAAK,GAEVqB,QAAQ,CAEZ,CACA;AAEP,CAAC,CACF;AAEDtC,UAAU,CAAC0D,WAAW,GAAG,YAAY;AAAC,eAEvB1D,UAAU;AAAA"}

package/dist/cjs/Drawer/index.js

@@ -1,75 +1,48 @@
 "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 _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
-
 var _utils = require("@os-design/utils");
-
 var _styles = require("@os-design/styles");
-
 var _theming = require("@os-design/theming");
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _react2 = require("@emotion/react");
-
 var _portal = _interopRequireDefault(require("@os-design/portal"));
-
 var _Modal = require("../Modal");
-
 var _excluded = ["placement", "width", "visible", "onClose", "size", "children", "onClick"];
-
 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 _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 DRAWER_CONTAINER_Z_INDEX = 900;
 var DRAWER_BOX_SHADOW_SIZE_EM = 1;
 var DrawerMask = (0, _styled["default"])(_Modal.ModalMask)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n"])), DRAWER_CONTAINER_Z_INDEX);
-
 var Container = _styled["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: ", ";\n"])), DRAWER_CONTAINER_Z_INDEX);
-
 var placementLeftFadeIn = (0, _react2.keyframes)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  from { transform: translateX(calc(-100% - ", "em)); }\n  to { transform: translateX(0); }\n"])), DRAWER_BOX_SHADOW_SIZE_EM);
 var placementLeftFadeOut = (0, _react2.keyframes)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  from { transform: translateX(0); }\n  to { transform: translateX(calc(-100% - ", "em)); }\n"])), DRAWER_BOX_SHADOW_SIZE_EM);
 var placementRightFadeIn = (0, _react2.keyframes)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  from { transform: translateX(calc(100vw + ", "em)); }\n  to { transform: translateX(calc(100vw - 100%)); }\n"])), DRAWER_BOX_SHADOW_SIZE_EM);
 var placementRightFadeOut = (0, _react2.keyframes)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  from { transform: translateX(calc(100vw - 100%)); }\n  to { transform: translateX(calc(100vw + ", "em)); }\n"])), DRAWER_BOX_SHADOW_SIZE_EM);
-
 var placementLeftVisibleStyles = function placementLeftVisibleStyles(p) {
   return p.placement === 'left' && p.visible && (0, _react2.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n  "])), placementLeftFadeIn, p.theme.transitionDelay);
 };
-
 var placementLeftInvisibleStyles = function placementLeftInvisibleStyles(p) {
   return p.placement === 'left' && !p.visible && (0, _react2.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n  "])), placementLeftFadeOut, p.theme.transitionDelay);
 };
-
 var placementRightVisibleStyles = function placementRightVisibleStyles(p) {
   return p.placement === 'right' && p.visible && (0, _react2.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n  "])), placementRightFadeIn, p.theme.transitionDelay);
 };
-
 var placementRightInvisibleStyles = function placementRightInvisibleStyles(p) {
   return p.placement === 'right' && !p.visible && (0, _react2.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n  "])), placementRightFadeOut, p.theme.transitionDelay);
 };
-
 var Content = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('placement', 'width', 'visible', 'size'))(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: ", ";\n  padding-bottom: env(safe-area-inset-bottom);\n\n  background-color: ", ";\n  color: ", ";\n  box-shadow: 0 0 ", "em\n    ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", ";\n  ", ";\n"])), function (p) {
   return p.width;
 }, function (p) {
@@ -79,28 +52,26 @@ var Content = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('place
 }, DRAWER_BOX_SHADOW_SIZE_EM, function (p) {
   return (0, _theming.clr)(p.theme.drawerColorBoxShadow);
 }, placementLeftVisibleStyles, placementLeftInvisibleStyles, placementRightVisibleStyles, placementRightInvisibleStyles, (0, _styles.enableScrollingStyles)('y'), _styles.sizeStyles);
+
 /**
  * The side panel that appears from the edge of the screen.
  */
-
 var Drawer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$placement = _ref.placement,
-      placement = _ref$placement === void 0 ? 'right' : _ref$placement,
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? '15em' : _ref$width,
-      _ref$visible = _ref.visible,
-      visible = _ref$visible === void 0 ? false : _ref$visible,
-      _ref$onClose = _ref.onClose,
-      onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
-      size = _ref.size,
-      children = _ref.children,
-      _ref$onClick = _ref.onClick,
-      _onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    placement = _ref$placement === void 0 ? 'right' : _ref$placement,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '15em' : _ref$width,
+    _ref$visible = _ref.visible,
+    visible = _ref$visible === void 0 ? false : _ref$visible,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
+    size = _ref.size,
+    children = _ref.children,
+    _ref$onClick = _ref.onClick,
+    _onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useTheme = (0, _theming.useTheme)(),
-      theme = _useTheme.theme;
-
+    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);
@@ -118,7 +89,6 @@ var Drawer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     size: size,
     onClick: function onClick(e) {
       e.stopPropagation();
-
       _onClick(e);
     },
     role: "dialog",

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["DRAWER_CONTAINER_Z_INDEX","DRAWER_BOX_SHADOW_SIZE_EM","DrawerMask","styled","ModalMask","Container","div","placementLeftFadeIn","keyframes","placementLeftFadeOut","placementRightFadeIn","placementRightFadeOut","placementLeftVisibleStyles","p","placement","visible","css","theme","transitionDelay","placementLeftInvisibleStyles","placementRightVisibleStyles","placementRightInvisibleStyles","Content","omitEmotionProps","width","clr","colorBg","colorText","drawerColorBoxShadow","enableScrollingStyles","sizeStyles","Drawer","forwardRef","ref","onClose","size","children","onClick","rest","useTheme","mounted","useClosable","useBodyScroll","useKeyPress","window","undefined","e","stopPropagation","displayName"],"sources":["../../../src/Drawer/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport {\n  useBodyScroll,\n  useClosable,\n  useKeyPress,\n  omitEmotionProps,\n} from '@os-design/utils';\nimport { enableScrollingStyles, sizeStyles, WithSize } from '@os-design/styles';\nimport { clr, useTheme } from '@os-design/theming';\nimport styled from '@emotion/styled';\nimport { css, keyframes } from '@emotion/react';\nimport Portal from '@os-design/portal';\nimport { ModalMask } from '../Modal';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface DrawerProps extends JsxDivProps, WithSize {\n  /**\n   * The placement of the drawer.\n   * @default right\n   */\n  placement?: 'left' | 'right';\n  /**\n   * The width of the drawer.\n   * @default 15em\n   */\n  width?: string;\n  /**\n   * Whether the drawer is visible.\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * Specifies a callback that will be called when a user clicks the mask.\n   * The callback should set the visible state to false.\n   * @default undefined\n   */\n  onClose?: () => void;\n}\n\nconst DRAWER_CONTAINER_Z_INDEX = 900;\nconst DRAWER_BOX_SHADOW_SIZE_EM = 1;\n\nconst DrawerMask = styled(ModalMask)`\n  z-index: ${DRAWER_CONTAINER_Z_INDEX};\n`;\n\nconst Container = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: ${DRAWER_CONTAINER_Z_INDEX};\n`;\n\nconst placementLeftFadeIn = keyframes`\n  from { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateX(0); }\n`;\n\nconst placementLeftFadeOut = keyframes`\n  from { transform: translateX(0); }\n  to { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst placementRightFadeIn = keyframes`\n  from { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateX(calc(100vw - 100%)); }\n`;\n\nconst placementRightFadeOut = keyframes`\n  from { transform: translateX(calc(100vw - 100%)); }\n  to { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst placementLeftVisibleStyles = (p) =>\n  p.placement === 'left' &&\n  p.visible &&\n  css`\n    animation: ${placementLeftFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementLeftInvisibleStyles = (p) =>\n  p.placement === 'left' &&\n  !p.visible &&\n  css`\n    animation: ${placementLeftFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementRightVisibleStyles = (p) =>\n  p.placement === 'right' &&\n  p.visible &&\n  css`\n    animation: ${placementRightFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementRightInvisibleStyles = (p) =>\n  p.placement === 'right' &&\n  !p.visible &&\n  css`\n    animation: ${placementRightFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ntype ContentProps = Pick<\n  DrawerProps,\n  'placement' | 'width' | 'visible' | 'size'\n>;\nconst Content = styled(\n  'div',\n  omitEmotionProps('placement', 'width', 'visible', 'size')\n)<ContentProps>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: ${(p) => p.width};\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 ${DRAWER_BOX_SHADOW_SIZE_EM}em\n    ${(p) => clr(p.theme.drawerColorBoxShadow)};\n\n  ${placementLeftVisibleStyles};\n  ${placementLeftInvisibleStyles};\n  ${placementRightVisibleStyles};\n  ${placementRightInvisibleStyles};\n\n  ${enableScrollingStyles('y')};\n  ${sizeStyles};\n`;\n\n/**\n * The side panel that appears from the edge of the screen.\n */\nconst Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n  (\n    {\n      placement = 'right',\n      width = '15em',\n      visible = false,\n      onClose = () => {},\n      size,\n      children,\n      onClick = () => {},\n      ...rest\n    },\n    ref\n  ) => {\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    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <DrawerMask visible={visible} />\n        <Container onClick={onClose}>\n          <FocusLock autoFocus={false}>\n            <Content\n              placement={placement}\n              width={width}\n              visible={visible}\n              size={size}\n              onClick={(e) => {\n                e.stopPropagation();\n                onClick(e);\n              }}\n              role='dialog'\n              aria-modal\n              {...rest}\n              ref={ref}\n            >\n              {children}\n            </Content>\n          </FocusLock>\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nDrawer.displayName = 'Drawer';\n\nexport default Drawer;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["DRAWER_CONTAINER_Z_INDEX","DRAWER_BOX_SHADOW_SIZE_EM","DrawerMask","styled","ModalMask","Container","div","placementLeftFadeIn","keyframes","placementLeftFadeOut","placementRightFadeIn","placementRightFadeOut","placementLeftVisibleStyles","p","placement","visible","css","theme","transitionDelay","placementLeftInvisibleStyles","placementRightVisibleStyles","placementRightInvisibleStyles","Content","omitEmotionProps","width","clr","colorBg","colorText","drawerColorBoxShadow","enableScrollingStyles","sizeStyles","Drawer","forwardRef","ref","onClose","size","children","onClick","rest","useTheme","mounted","useClosable","useBodyScroll","useKeyPress","window","undefined","e","stopPropagation","displayName"],"sources":["../../../src/Drawer/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport {\n  useBodyScroll,\n  useClosable,\n  useKeyPress,\n  omitEmotionProps,\n} from '@os-design/utils';\nimport { enableScrollingStyles, sizeStyles, WithSize } from '@os-design/styles';\nimport { clr, useTheme } from '@os-design/theming';\nimport styled from '@emotion/styled';\nimport { css, keyframes } from '@emotion/react';\nimport Portal from '@os-design/portal';\nimport { ModalMask } from '../Modal';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface DrawerProps extends JsxDivProps, WithSize {\n  /**\n   * The placement of the drawer.\n   * @default right\n   */\n  placement?: 'left' | 'right';\n  /**\n   * The width of the drawer.\n   * @default 15em\n   */\n  width?: string;\n  /**\n   * Whether the drawer is visible.\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * Specifies a callback that will be called when a user clicks the mask.\n   * The callback should set the visible state to false.\n   * @default undefined\n   */\n  onClose?: () => void;\n}\n\nconst DRAWER_CONTAINER_Z_INDEX = 900;\nconst DRAWER_BOX_SHADOW_SIZE_EM = 1;\n\nconst DrawerMask = styled(ModalMask)`\n  z-index: ${DRAWER_CONTAINER_Z_INDEX};\n`;\n\nconst Container = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: ${DRAWER_CONTAINER_Z_INDEX};\n`;\n\nconst placementLeftFadeIn = keyframes`\n  from { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateX(0); }\n`;\n\nconst placementLeftFadeOut = keyframes`\n  from { transform: translateX(0); }\n  to { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst placementRightFadeIn = keyframes`\n  from { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateX(calc(100vw - 100%)); }\n`;\n\nconst placementRightFadeOut = keyframes`\n  from { transform: translateX(calc(100vw - 100%)); }\n  to { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst placementLeftVisibleStyles = (p) =>\n  p.placement === 'left' &&\n  p.visible &&\n  css`\n    animation: ${placementLeftFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementLeftInvisibleStyles = (p) =>\n  p.placement === 'left' &&\n  !p.visible &&\n  css`\n    animation: ${placementLeftFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementRightVisibleStyles = (p) =>\n  p.placement === 'right' &&\n  p.visible &&\n  css`\n    animation: ${placementRightFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementRightInvisibleStyles = (p) =>\n  p.placement === 'right' &&\n  !p.visible &&\n  css`\n    animation: ${placementRightFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ntype ContentProps = Pick<\n  DrawerProps,\n  'placement' | 'width' | 'visible' | 'size'\n>;\nconst Content = styled(\n  'div',\n  omitEmotionProps('placement', 'width', 'visible', 'size')\n)<ContentProps>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: ${(p) => p.width};\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 ${DRAWER_BOX_SHADOW_SIZE_EM}em\n    ${(p) => clr(p.theme.drawerColorBoxShadow)};\n\n  ${placementLeftVisibleStyles};\n  ${placementLeftInvisibleStyles};\n  ${placementRightVisibleStyles};\n  ${placementRightInvisibleStyles};\n\n  ${enableScrollingStyles('y')};\n  ${sizeStyles};\n`;\n\n/**\n * The side panel that appears from the edge of the screen.\n */\nconst Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n  (\n    {\n      placement = 'right',\n      width = '15em',\n      visible = false,\n      onClose = () => {},\n      size,\n      children,\n      onClick = () => {},\n      ...rest\n    },\n    ref\n  ) => {\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    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <DrawerMask visible={visible} />\n        <Container onClick={onClose}>\n          <FocusLock autoFocus={false}>\n            <Content\n              placement={placement}\n              width={width}\n              visible={visible}\n              size={size}\n              onClick={(e) => {\n                e.stopPropagation();\n                onClick(e);\n              }}\n              role='dialog'\n              aria-modal\n              {...rest}\n              ref={ref}\n            >\n              {children}\n            </Content>\n          </FocusLock>\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nDrawer.displayName = 'Drawer';\n\nexport default Drawer;\n"],"mappings":"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"}

package/dist/cjs/Form/FormConfigContext.js

@@ -4,15 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 var FormConfigContext = /*#__PURE__*/_react["default"].createContext({
   optionalText: 'optional'
 });
-
 FormConfigContext.displayName = 'FormConfigContext';
 var _default = FormConfigContext;
 exports["default"] = _default;

package/dist/cjs/Form/FormConfigContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormConfigContext.js","names":["FormConfigContext","React","createContext","optionalText","displayName"],"sources":["../../../src/Form/FormConfigContext.ts"],"sourcesContent":["import React from 'react';\n\nexport interface FormConfigContextProps {\n  /**\n   * The text that is displayed to the right of the label of the optional field.\n   */\n  optionalText: string;\n}\n\nconst FormConfigContext = React.createContext<FormConfigContextProps>({\n  optionalText: 'optional',\n});\n\nFormConfigContext.displayName = 'FormConfigContext';\n\nexport default FormConfigContext;\n"],"mappings":";;;;;;;AAAA;;;;AASA,IAAMA,iBAAiB,gBAAGC,iBAAA,CAAMC,aAAN,CAA4C;EACpEC,YAAY,EAAE;AADsD,CAA5C,CAA1B;;AAIAH,iBAAiB,CAACI,WAAlB,GAAgC,mBAAhC;eAEeJ,iB"}
+{"version":3,"file":"FormConfigContext.js","names":["FormConfigContext","React","createContext","optionalText","displayName"],"sources":["../../../src/Form/FormConfigContext.ts"],"sourcesContent":["import React from 'react';\n\nexport interface FormConfigContextProps {\n  /**\n   * The text that is displayed to the right of the label of the optional field.\n   */\n  optionalText: string;\n}\n\nconst FormConfigContext = React.createContext<FormConfigContextProps>({\n  optionalText: 'optional',\n});\n\nFormConfigContext.displayName = 'FormConfigContext';\n\nexport default FormConfigContext;\n"],"mappings":";;;;;;AAAA;AAA0B;AAS1B,IAAMA,iBAAiB,gBAAGC,iBAAK,CAACC,aAAa,CAAyB;EACpEC,YAAY,EAAE;AAChB,CAAC,CAAC;AAEFH,iBAAiB,CAACI,WAAW,GAAG,mBAAmB;AAAC,eAErCJ,iBAAiB;AAAA"}

package/dist/cjs/Form/index.js

@@ -1,50 +1,33 @@
 "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 _utils = require("@os-design/utils");
-
 var _FormConfigContext = _interopRequireDefault(require("./FormConfigContext"));
-
 var _excluded = ["optionalText"];
-
 var _templateObject;
-
 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 _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 StyledForm = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('size'))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  max-width: 50em;\n\n  & > * + * {\n    margin-top: 1em;\n  }\n  & > style + * {\n    margin-top: 0;\n  }\n\n  ", ";\n"])), _styles.sizeStyles);
+
 /**
  * The wrapper of the form.
  */
-
 var Form = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$optionalText = _ref.optionalText,
-      optionalText = _ref$optionalText === void 0 ? 'optional' : _ref$optionalText,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    optionalText = _ref$optionalText === void 0 ? 'optional' : _ref$optionalText,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var memoizedOptionalText = (0, _react.useMemo)(function () {
     return {
       optionalText: optionalText

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["StyledForm","styled","omitEmotionProps","sizeStyles","Form","forwardRef","ref","optionalText","rest","memoizedOptionalText","useMemo","displayName"],"sources":["../../../src/Form/index.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport FormConfigContext from './FormConfigContext';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormProps extends JsxDivProps, WithSize {\n  /**\n   * The text that is displayed to the right of the label of the optional field.\n   * @default optional\n   */\n  optionalText?: string;\n}\n\nconst StyledForm = styled('div', omitEmotionProps('size'))<WithSize>`\n  max-width: 50em;\n\n  & > * + * {\n    margin-top: 1em;\n  }\n  & > style + * {\n    margin-top: 0;\n  }\n\n  ${sizeStyles};\n`;\n\n/**\n * The wrapper of the form.\n */\nconst Form = forwardRef<HTMLDivElement, FormProps>(\n  ({ optionalText = 'optional', ...rest }, ref) => {\n    const memoizedOptionalText = useMemo(\n      () => ({ optionalText }),\n      [optionalText]\n    );\n\n    return (\n      <FormConfigContext.Provider value={memoizedOptionalText}>\n        <StyledForm {...rest} ref={ref} />\n      </FormConfigContext.Provider>\n    );\n  }\n);\n\nForm.displayName = 'Form';\n\nexport default Form;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAWA,IAAMA,UAAU,GAAG,IAAAC,kBAAA,EAAO,KAAP,EAAc,IAAAC,uBAAA,EAAiB,MAAjB,CAAd,CAAH,+LAUZC,kBAVY,CAAhB;AAaA;AACA;AACA;;AACA,IAAMC,IAAI,gBAAG,IAAAC,iBAAA,EACX,gBAAyCC,GAAzC,EAAiD;EAAA,6BAA9CC,YAA8C;EAAA,IAA9CA,YAA8C,kCAA/B,UAA+B;EAAA,IAAhBC,IAAgB;;EAC/C,IAAMC,oBAAoB,GAAG,IAAAC,cAAA,EAC3B;IAAA,OAAO;MAAEH,YAAY,EAAZA;IAAF,CAAP;EAAA,CAD2B,EAE3B,CAACA,YAAD,CAF2B,CAA7B;EAKA,oBACE,gCAAC,6BAAD,CAAmB,QAAnB;IAA4B,KAAK,EAAEE;EAAnC,gBACE,gCAAC,UAAD,eAAgBD,IAAhB;IAAsB,GAAG,EAAEF;EAA3B,GADF,CADF;AAKD,CAZU,CAAb;AAeAF,IAAI,CAACO,WAAL,GAAmB,MAAnB;eAEeP,I"}
+{"version":3,"file":"index.js","names":["StyledForm","styled","omitEmotionProps","sizeStyles","Form","forwardRef","ref","optionalText","rest","memoizedOptionalText","useMemo","displayName"],"sources":["../../../src/Form/index.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport FormConfigContext from './FormConfigContext';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormProps extends JsxDivProps, WithSize {\n  /**\n   * The text that is displayed to the right of the label of the optional field.\n   * @default optional\n   */\n  optionalText?: string;\n}\n\nconst StyledForm = styled('div', omitEmotionProps('size'))<WithSize>`\n  max-width: 50em;\n\n  & > * + * {\n    margin-top: 1em;\n  }\n  & > style + * {\n    margin-top: 0;\n  }\n\n  ${sizeStyles};\n`;\n\n/**\n * The wrapper of the form.\n */\nconst Form = forwardRef<HTMLDivElement, FormProps>(\n  ({ optionalText = 'optional', ...rest }, ref) => {\n    const memoizedOptionalText = useMemo(\n      () => ({ optionalText }),\n      [optionalText]\n    );\n\n    return (\n      <FormConfigContext.Provider value={memoizedOptionalText}>\n        <StyledForm {...rest} ref={ref} />\n      </FormConfigContext.Provider>\n    );\n  }\n);\n\nForm.displayName = 'Form';\n\nexport default Form;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAAoD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWpD,IAAMA,UAAU,GAAG,IAAAC,kBAAM,EAAC,KAAK,EAAE,IAAAC,uBAAgB,EAAC,MAAM,CAAC,CAAC,+LAUtDC,kBAAU,CACb;;AAED;AACA;AACA;AACA,IAAMC,IAAI,gBAAG,IAAAC,iBAAU,EACrB,gBAAyCC,GAAG,EAAK;EAAA,6BAA9CC,YAAY;IAAZA,YAAY,kCAAG,UAAU;IAAKC,IAAI;EACnC,IAAMC,oBAAoB,GAAG,IAAAC,cAAO,EAClC;IAAA,OAAO;MAAEH,YAAY,EAAZA;IAAa,CAAC;EAAA,CAAC,EACxB,CAACA,YAAY,CAAC,CACf;EAED,oBACE,gCAAC,6BAAiB,CAAC,QAAQ;IAAC,KAAK,EAAEE;EAAqB,gBACtD,gCAAC,UAAU,eAAKD,IAAI;IAAE,GAAG,EAAEF;EAAI,GAAG,CACP;AAEjC,CAAC,CACF;AAEDF,IAAI,CAACO,WAAW,GAAG,MAAM;AAAC,eAEXP,IAAI;AAAA"}

package/dist/cjs/FormDivider/index.js

@@ -1,67 +1,46 @@
 "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 _utils = require("@os-design/utils");
-
 var _theming = require("@os-design/theming");
-
 var _excluded = ["title", "description"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
 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 _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  display: flex;\n  align-items: center;\n  margin: 3em 0 1em;\n\n  &::before,\n  &::after {\n    content: '';\n    flex: 1;\n    min-width: 5%;\n    max-width: 50%;\n    border-top: 1px solid ", ";\n  }\n\n  ", ";\n"])), function (p) {
   return (0, _theming.clr)(p.theme.formDividerColor);
 }, _styles.sizeStyles);
-
 var Content = _styled["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 0 1.5em;\n  text-align: center;\n  overflow: hidden;\n"])));
-
 var Title = _styled["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", "em;\n  font-weight: 500;\n  ", ";\n"])), function (p) {
   return (0, _theming.clr)(p.theme.colorText);
 }, function (p) {
   return p.theme.sizes.large;
 }, _styles.ellipsisStyles);
-
 var Description = _styled["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", "em;\n  line-height: 1.2;\n  ", ";\n"])), function (p) {
   return (0, _theming.clr)(p.theme.inputColorPlaceholder);
 }, function (p) {
   return p.theme.sizes.small;
 }, _styles.ellipsisStyles);
+
 /**
  * The divider line for separating the various elements of the form.
  */
-
-
 var FormDivider = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var title = _ref.title,
-      description = _ref.description,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    description = _ref.description,
+    rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(Container, _extends({
     role: "separator"
   }, rest, {