@os-design/core 1.0.254 → 1.0.256

package/dist/esm/MenuGroup/index.js

@@ -1,105 +0,0 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import styled from '@emotion/styled';
-import { m } from '@os-design/media';
-import { MenuContext } from '@os-design/menu-utils';
-import { ellipsisStyles } from '@os-design/styles';
-import { clr } from '@os-design/theming';
-import { useForwardedState } from '@os-design/utils';
-import React, { forwardRef, useCallback, useContext, useMemo } from 'react';
-import MenuItem from '../MenuItem';
-const Title = styled.div`
-  font-weight: 500;
-  font-size: ${p => p.theme.sizes.small}em;
-  color: ${p => clr(p.theme.menuGroupColorTitle)};
-  margin-bottom: 0.4em;
-
-  padding: 0 ${p => p.theme.modalBodyPaddingHorizontal[0]}em;
-  ${m.min.xs} {
-    padding: 0 0.8em;
-  }
-
-  ${ellipsisStyles};
-`;
-const Container = styled.div`
-  &:not(:last-of-type) {
-    padding-bottom: 0.4em;
-    border-bottom: 1px solid ${p => clr(p.theme.menuGroupColorDivider)};
-  }
-  &:not(:first-of-type) {
-    margin-top: ${p => p.theme.modalBodyPaddingVertical[0]}em;
-    ${m.min.xs} {
-      margin-top: 0.4em;
-    }
-  }
-`;
-
-/**
- * The group of menu items.
- */
-const MenuGroup = /*#__PURE__*/forwardRef(({
-  title,
-  multiple = false,
-  maxSelectedItems = 0,
-  value,
-  defaultValue,
-  onChange = () => {},
-  children,
-  ...rest
-}, ref) => {
-  const {
-    closeOnSelect
-  } = useContext(MenuContext);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const [forwardedValue, setForwardedValue] = useForwardedState({
-    value,
-    defaultValue,
-    onChange
-  });
-  const onSelect = useCallback(v => {
-    if (multiple) {
-      // Delete the value because it was already selected
-      if ((forwardedValue || []).includes(v)) {
-        setForwardedValue((forwardedValue || []).filter(item => item !== v));
-        return;
-      }
-
-      // Add a new value if the number of selected items is less than max
-      if (maxSelectedItems === 0 || (forwardedValue || []).length < maxSelectedItems) {
-        setForwardedValue([...(forwardedValue || []), v]);
-        return;
-      }
-      return;
-    }
-    setForwardedValue(v);
-  }, [forwardedValue, maxSelectedItems, multiple, setForwardedValue]);
-  const menuItems = useMemo(() => React.Children.map(children, child => {
-    if (! /*#__PURE__*/React.isValidElement(child) || child.type !== MenuItem) return child;
-    const {
-      value: childValue,
-      onClick: childOnClick
-    } = child.props;
-    const selected = multiple && (forwardedValue || []).includes(childValue) || !multiple && forwardedValue === childValue;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return /*#__PURE__*/React.cloneElement(child, {
-      key: childValue,
-      selected,
-      onClick: e => {
-        if (!childValue) return;
-        onSelect(childValue);
-        if (childOnClick) childOnClick(e);
-      },
-      ...(!closeOnSelect ? {
-        role: maxSelectedItems === 1 ? 'menuitemradio' : 'menuitemcheckbox',
-        'aria-checked': selected
-      } : {})
-    });
-  }), [children, closeOnSelect, forwardedValue, maxSelectedItems, multiple, onSelect]);
-  return /*#__PURE__*/React.createElement(Container, _extends({
-    role: maxSelectedItems === 1 ? 'radiogroup' : 'group'
-  }, rest, {
-    ref: ref
-  }), title && /*#__PURE__*/React.createElement(Title, null, title), menuItems);
-});
-MenuGroup.displayName = 'MenuGroup';
-export default MenuGroup;
-//# sourceMappingURL=index.js.map

package/dist/esm/MenuGroup/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["styled","m","MenuContext","ellipsisStyles","clr","useForwardedState","React","forwardRef","useCallback","useContext","useMemo","MenuItem","Title","div","p","theme","sizes","small","menuGroupColorTitle","modalBodyPaddingHorizontal","min","xs","Container","menuGroupColorDivider","modalBodyPaddingVertical","MenuGroup","title","multiple","maxSelectedItems","value","defaultValue","onChange","children","rest","ref","closeOnSelect","forwardedValue","setForwardedValue","onSelect","v","includes","filter","item","length","menuItems","Children","map","child","isValidElement","type","childValue","onClick","childOnClick","props","selected","cloneElement","key","e","role","createElement","_extends","displayName"],"sources":["../../../src/MenuGroup/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { MenuContext } from '@os-design/menu-utils';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { useForwardedState } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useContext, useMemo } from 'react';\nimport MenuItem from '../MenuItem';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'defaultValue' | 'value' | 'onChange' | 'ref'\n>;\ninterface BaseMenuGroupProps<T> extends JsxDivProps {\n  /**\n   * The title of the menu group.\n   * @default undefined\n   */\n  title?: string;\n  /**\n   * The max number of options that the user can select. Zero means unlimited.\n   * Works only when multiple is true.\n   * @default 0\n   */\n  maxSelectedItems?: number;\n  /**\n   * Selected menu items.\n   * @default undefined\n   */\n  value?: T;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: T;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: T) => void;\n}\ninterface MenuGroupNotMultipleProps extends BaseMenuGroupProps<string | null> {\n  /**\n   * Is it possible to select multiple values.\n   * @default false\n   */\n  multiple?: false;\n}\ninterface MenuGroupMultipleProps extends BaseMenuGroupProps<string[]> {\n  /**\n   * Is it possible to select multiple values.\n   * @default false\n   */\n  multiple: true;\n}\nexport type MenuGroupProps = MenuGroupNotMultipleProps | MenuGroupMultipleProps;\n\nconst Title = styled.div`\n  font-weight: 500;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.menuGroupColorTitle)};\n  margin-bottom: 0.4em;\n\n  padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n  ${m.min.xs} {\n    padding: 0 0.8em;\n  }\n\n  ${ellipsisStyles};\n`;\n\nconst Container = styled.div`\n  &:not(:last-of-type) {\n    padding-bottom: 0.4em;\n    border-bottom: 1px solid ${(p) => clr(p.theme.menuGroupColorDivider)};\n  }\n  &:not(:first-of-type) {\n    margin-top: ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n    ${m.min.xs} {\n      margin-top: 0.4em;\n    }\n  }\n`;\n\n/**\n * The group of menu items.\n */\nconst MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(\n  (\n    {\n      title,\n      multiple = false,\n      maxSelectedItems = 0,\n      value,\n      defaultValue,\n      onChange = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { closeOnSelect } = useContext(MenuContext);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const [forwardedValue, setForwardedValue] = useForwardedState<any>({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const onSelect = useCallback(\n      (v: string) => {\n        if (multiple) {\n          // Delete the value because it was already selected\n          if ((forwardedValue || []).includes(v)) {\n            setForwardedValue(\n              (forwardedValue || []).filter((item) => item !== v)\n            );\n            return;\n          }\n\n          // Add a new value if the number of selected items is less than max\n          if (\n            maxSelectedItems === 0 ||\n            (forwardedValue || []).length < maxSelectedItems\n          ) {\n            setForwardedValue([...(forwardedValue || []), v]);\n            return;\n          }\n          return;\n        }\n        setForwardedValue(v);\n      },\n      [forwardedValue, maxSelectedItems, multiple, setForwardedValue]\n    );\n\n    const menuItems = useMemo(\n      () =>\n        React.Children.map(children, (child) => {\n          if (!React.isValidElement(child) || child.type !== MenuItem)\n            return child;\n          const { value: childValue, onClick: childOnClick } = child.props;\n          const selected =\n            (multiple && (forwardedValue || []).includes(childValue)) ||\n            (!multiple && forwardedValue === childValue);\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          return React.cloneElement<any>(child, {\n            key: childValue,\n            selected,\n            onClick: (e) => {\n              if (!childValue) return;\n              onSelect(childValue);\n              if (childOnClick) childOnClick(e);\n            },\n            ...(!closeOnSelect\n              ? {\n                  role:\n                    maxSelectedItems === 1\n                      ? 'menuitemradio'\n                      : 'menuitemcheckbox',\n                  'aria-checked': selected,\n                }\n              : {}),\n          });\n        }),\n      [\n        children,\n        closeOnSelect,\n        forwardedValue,\n        maxSelectedItems,\n        multiple,\n        onSelect,\n      ]\n    );\n\n    return (\n      <Container\n        role={maxSelectedItems === 1 ? 'radiogroup' : 'group'}\n        {...rest}\n        ref={ref}\n      >\n        {title && <Title>{title}</Title>}\n        {menuItems}\n      </Container>\n    );\n  }\n);\n\nMenuGroup.displayName = 'MenuGroup';\n\nexport default MenuGroup;\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/MenuItem/index.js

@@ -1,77 +0,0 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { Check } from '@os-design/icons';
-import { m } from '@os-design/media';
-import { MenuContext } from '@os-design/menu-utils';
-import { ThemeOverrider, clr } from '@os-design/theming';
-import { omitEmotionProps } from '@os-design/utils';
-import React, { forwardRef, useCallback, useContext, useEffect, useRef } from 'react';
-import Button from '../Button';
-const selectedStyles = p => p.selected && css`
-    background-color: ${clr(p.theme.menuItemSelectedColorBg)};
-  `;
-const StyledButton = styled(Button, omitEmotionProps('selected'))`
-  display: flex;
-  font-weight: normal;
-  border-radius: 0;
-  height: ${p => p.theme.menuItemHeight}em;
-
-  & > span {
-    flex: 1;
-    text-align: left;
-    overflow: hidden;
-    line-height: 1.5;
-  }
-
-  padding: 0 ${p => p.theme.menuItemPaddingHorizontal[0]}em;
-  ${m.min.xs} {
-    padding: 0 ${p => p.theme.menuItemPaddingHorizontal[1]}em;
-  }
-
-  ${selectedStyles};
-`;
-const SelectedIcon = styled(Check)`
-  color: ${p => clr(p.theme.menuItemSelectedColorIcon)};
-`;
-
-/**
- * The base menu item.
- */
-const MenuItem = /*#__PURE__*/forwardRef(({
-  selected = false,
-  value,
-  right,
-  onClick = () => {},
-  ...rest
-}, ref) => {
-  const {
-    closeOnSelect,
-    onClose
-  } = useContext(MenuContext);
-  const onClickRef = useRef();
-  useEffect(() => {
-    onClickRef.current = onClick;
-  }, [onClick]);
-  const clickHandler = useCallback(e => {
-    if (onClickRef.current) onClickRef.current(e);
-    if (closeOnSelect) onClose();
-  }, [closeOnSelect, onClose]);
-  return /*#__PURE__*/React.createElement(ThemeOverrider, {
-    overrides: theme => ({
-      buttonGhostColorText: theme.colorText
-    })
-  }, /*#__PURE__*/React.createElement(StyledButton, _extends({
-    selected: selected,
-    right: selected ? /*#__PURE__*/React.createElement(SelectedIcon, null) : right,
-    type: "ghost",
-    wide: "always",
-    onClick: clickHandler,
-    role: "menuitem"
-  }, rest, {
-    ref: ref
-  })));
-});
-MenuItem.displayName = 'MenuItem';
-export default MenuItem;
-//# sourceMappingURL=index.js.map

package/dist/esm/MenuItem/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["css","styled","Check","m","MenuContext","ThemeOverrider","clr","omitEmotionProps","React","forwardRef","useCallback","useContext","useEffect","useRef","Button","selectedStyles","p","selected","theme","menuItemSelectedColorBg","StyledButton","menuItemHeight","menuItemPaddingHorizontal","min","xs","SelectedIcon","menuItemSelectedColorIcon","MenuItem","value","right","onClick","rest","ref","closeOnSelect","onClose","onClickRef","current","clickHandler","e","createElement","overrides","buttonGhostColorText","colorText","_extends","type","wide","role","displayName"],"sources":["../../../src/MenuItem/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Check } from '@os-design/icons';\nimport { m } from '@os-design/media';\nimport { MenuContext } from '@os-design/menu-utils';\nimport { ThemeOverrider, clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n} from 'react';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface MenuItemProps\n  extends Omit<ButtonProps, 'type' | 'wide' | 'size'> {\n  /**\n   * Whether the menu item is selected.\n   * @default false\n   */\n  selected?: boolean;\n  /**\n   * The value of the menu item.\n   * @default undefined\n   */\n  value?: string;\n}\n\nconst selectedStyles = (p) =>\n  p.selected &&\n  css`\n    background-color: ${clr(p.theme.menuItemSelectedColorBg)};\n  `;\n\ntype StyledButtonProps = Pick<MenuItemProps, 'selected'>;\nconst StyledButton = styled(\n  Button,\n  omitEmotionProps('selected')\n)<StyledButtonProps>`\n  display: flex;\n  font-weight: normal;\n  border-radius: 0;\n  height: ${(p) => p.theme.menuItemHeight}em;\n\n  & > span {\n    flex: 1;\n    text-align: left;\n    overflow: hidden;\n    line-height: 1.5;\n  }\n\n  padding: 0 ${(p) => p.theme.menuItemPaddingHorizontal[0]}em;\n  ${m.min.xs} {\n    padding: 0 ${(p) => p.theme.menuItemPaddingHorizontal[1]}em;\n  }\n\n  ${selectedStyles};\n`;\n\nconst SelectedIcon = styled(Check)`\n  color: ${(p) => clr(p.theme.menuItemSelectedColorIcon)};\n`;\n\n/**\n * The base menu item.\n */\nconst MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(\n  ({ selected = false, value, right, onClick = () => {}, ...rest }, ref) => {\n    const { closeOnSelect, onClose } = useContext(MenuContext);\n    const onClickRef = useRef<MenuItemProps['onClick']>();\n\n    useEffect(() => {\n      onClickRef.current = onClick;\n    }, [onClick]);\n\n    const clickHandler = useCallback(\n      (e) => {\n        if (onClickRef.current) onClickRef.current(e);\n        if (closeOnSelect) onClose();\n      },\n      [closeOnSelect, onClose]\n    );\n\n    return (\n      <ThemeOverrider\n        overrides={(theme) => ({ buttonGhostColorText: theme.colorText })}\n      >\n        <StyledButton\n          selected={selected}\n          right={selected ? <SelectedIcon /> : right}\n          type='ghost'\n          wide='always'\n          onClick={clickHandler}\n          role='menuitem'\n          {...rest}\n          ref={ref}\n        />\n      </ThemeOverrider>\n    );\n  }\n);\n\nMenuItem.displayName = 'MenuItem';\n\nexport default MenuItem;\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/Modal/index.js

@@ -1,250 +0,0 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import { css, keyframes } from '@emotion/react';
-import styled from '@emotion/styled';
-import { Close } from '@os-design/icons';
-import { m } from '@os-design/media';
-import Portal from '@os-design/portal';
-import { ellipsisStyles, enableScrollingStyles, sizeStyles } from '@os-design/styles';
-import { ThemeOverrider, clr, useTheme } from '@os-design/theming';
-import { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';
-import React, { forwardRef, useCallback, useContext, useMemo, useRef } from 'react';
-import FocusLock from 'react-focus-lock';
-import Button from '../Button';
-import defaultLocale from './utils/defaultLocale';
-const MODAL_CONTAINER_Z_INDEX = 1000;
-const MODAL_BOX_SHADOW_SIZE_EM = 1;
-const maskFadeIn = keyframes`
-  from { opacity: 0; }
-  to { opacity: 1; }
-`;
-const maskFadeOut = keyframes`
-  from { opacity: 1; }
-  to { opacity: 0; }
-`;
-const maskVisibleStyles = p => p.visible && css`
-    animation: ${maskFadeIn} ${p.theme.transitionDelay}ms forwards;
-  `;
-const maskInvisibleStyles = p => !p.visible && css`
-    animation: ${maskFadeOut} ${p.theme.transitionDelay}ms forwards;
-  `;
-export const ModalMask = styled('div', omitEmotionProps('visible'))`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 100%;
-  background-color: ${p => clr(p.theme.modalMaskColorBg)};
-  z-index: ${MODAL_CONTAINER_Z_INDEX};
-  ${maskVisibleStyles};
-  ${maskInvisibleStyles};
-`;
-const Container = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 100%;
-  z-index: ${MODAL_CONTAINER_Z_INDEX};
-
-  ${m.min.xs} {
-    ${enableScrollingStyles('y')};
-  }
-`;
-const contentFadeIn = keyframes`
-  from { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }
-  to { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }
-`;
-const contentFadeOut = keyframes`
-  from { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }
-  to { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }
-`;
-const contentFadeInXs = keyframes`
-  from { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }
-  to { transform: translateY(6em); }
-`;
-const contentFadeOutXs = keyframes`
-  from { transform: translateY(6em); }
-  to { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }
-`;
-const contentVisibleStyles = p => p.visible && css`
-    animation: ${contentFadeIn} ${p.theme.transitionDelay}ms forwards;
-    ${m.min.xs} {
-      animation: ${contentFadeInXs} ${p.theme.transitionDelay}ms forwards;
-    }
-  `;
-const contentInvisibleStyles = p => !p.visible && css`
-    animation: ${contentFadeOut} ${p.theme.transitionDelay}ms forwards;
-    ${m.min.xs} {
-      animation: ${contentFadeOutXs} ${p.theme.transitionDelay}ms forwards;
-    }
-  `;
-const Content = styled('div', omitEmotionProps('visible', 'size'))`
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  padding-bottom: env(safe-area-inset-bottom);
-
-  background-color: ${p => clr(p.theme.colorBg)};
-  color: ${p => clr(p.theme.colorText)};
-  box-shadow: 0 0 ${MODAL_BOX_SHADOW_SIZE_EM}em
-    ${p => clr(p.theme.modalColorBoxShadow)};
-
-  width: 100%;
-  max-height: 100%;
-  border-radius: ${p => p.theme.borderRadius}em
-    ${p => p.theme.borderRadius}em 0 0;
-
-  ${m.min.xs} {
-    width: ${p => p.theme.modalWidth}em;
-    max-height: unset;
-    border-radius: ${p => p.theme.borderRadius}em;
-
-    left: 50%;
-    margin-left: ${p => -p.theme.modalWidth / 2}em;
-  }
-
-  ${contentVisibleStyles};
-  ${contentInvisibleStyles}
-  ${sizeStyles};
-`;
-const Header = styled.div`
-  flex-shrink: 0;
-  height: ${p => p.theme.modalHeaderHeight}em;
-  border-bottom: 1px solid ${p => clr(p.theme.modalHeaderColorBorderBottom)};
-  box-sizing: border-box;
-
-  display: flex;
-  align-items: center;
-
-  padding-left: ${p => p.theme.modalBodyPaddingHorizontal[0]}em;
-  padding-right: ${p => Math.max(p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal, 0)}em;
-
-  ${m.min.xs} {
-    padding-left: ${p => p.theme.modalBodyPaddingHorizontal[1]}em;
-    padding-right: ${p => Math.max(p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal, 0)}em;
-  }
-`;
-const Title = styled.div`
-  flex: 1;
-  font-size: ${p => p.theme.sizes.large}em;
-  font-weight: 500;
-  ${ellipsisStyles};
-`;
-const Body = styled.div`
-  flex-grow: 1;
-
-  padding: ${p => p.theme.modalBodyPaddingVertical[0]}em
-    ${p => p.theme.modalBodyPaddingHorizontal[0]}em;
-
-  ${m.min.xs} {
-    padding: ${p => p.theme.modalBodyPaddingVertical[1]}em
-      ${p => p.theme.modalBodyPaddingHorizontal[1]}em;
-  }
-
-  ${enableScrollingStyles('y')};
-`;
-const Footer = styled.div`
-  padding: 0 ${p => p.theme.modalBodyPaddingHorizontal[0]}em
-    ${p => p.theme.modalBodyPaddingVertical[0]}em;
-
-  ${m.min.xs} {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-
-    padding: 0 ${p => p.theme.modalBodyPaddingHorizontal[1]}em
-      ${p => p.theme.modalBodyPaddingVertical[1]}em;
-  }
-`;
-const CloseModalContext = /*#__PURE__*/React.createContext(() => {});
-export const useCloseModal = () => useContext(CloseModalContext);
-
-/**
- * The base pop-up window.
- */
-const Modal = /*#__PURE__*/forwardRef(({
-  title,
-  okText = 'OK',
-  okDanger = false,
-  okLoading = false,
-  okDisabled = false,
-  header,
-  footer,
-  visible = false,
-  locale = defaultLocale,
-  onClose = () => {},
-  onOk,
-  size,
-  id,
-  onClick = () => {},
-  children,
-  ...rest
-}, ref) => {
-  const contentRef = useRef(null);
-  const {
-    theme
-  } = useTheme();
-  const mounted = useClosable(visible, theme.transitionDelay);
-  useBodyScroll(!visible);
-  const titleId = useMemo(() => `modal-title-${Math.random().toString(36).slice(2, 11)}`, []);
-  const bodyId = useMemo(() => id || `modal-body-${Math.random().toString(36).slice(2, 11)}`, [id]);
-  const containerClickHandler = useCallback(e => {
-    e.stopPropagation();
-    onClose();
-  }, [onClose]);
-  const contentClickHandler = useCallback(e => {
-    e.stopPropagation();
-    onClick(e);
-  }, [onClick]);
-  const contentKeyDownHandler = useCallback(e => {
-    if (e.key === 'Escape') {
-      e.stopPropagation();
-      onClose();
-    }
-  }, [onClose]);
-  const ariaLabelledBy = useMemo(() => header === undefined ? titleId : undefined, [header, titleId]);
-  if (!mounted) return null;
-  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(ModalMask, {
-    visible: visible
-  }), /*#__PURE__*/React.createElement(Container, {
-    onClick: containerClickHandler
-  }, /*#__PURE__*/React.createElement(FocusLock, {
-    autoFocus: false
-  }, /*#__PURE__*/React.createElement(CloseModalContext.Provider, {
-    value: onClose
-  }, /*#__PURE__*/React.createElement(Content, {
-    visible: visible,
-    size: size,
-    tabIndex: -1,
-    onKeyDown: contentKeyDownHandler,
-    onClick: contentClickHandler,
-    role: "dialog",
-    "aria-modal": true,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": bodyId,
-    ref: contentRef
-  }, header === undefined ? /*#__PURE__*/React.createElement(ThemeOverrider, {
-    overrides: t => ({
-      buttonPaddingHorizontal: t.modalCloseButtonPaddingHorizontal
-    })
-  }, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(Title, {
-    id: titleId
-  }, title), /*#__PURE__*/React.createElement(Button, {
-    type: "ghost",
-    wide: "never",
-    onClick: onClose,
-    "aria-label": locale.closeLabel
-  }, /*#__PURE__*/React.createElement(Close, null)))) : header, /*#__PURE__*/React.createElement(Body, _extends({
-    id: bodyId
-  }, rest, {
-    ref: ref
-  }), children), footer === undefined ? /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(Button, {
-    danger: okDanger,
-    loading: okLoading,
-    disabled: okDisabled,
-    onClick: onOk
-  }, okText)) : footer)))));
-});
-Modal.displayName = 'Modal';
-export default Modal;
-//# sourceMappingURL=index.js.map

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

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

package/dist/esm/Modal/utils/defaultLocale.js

@@ -1,5 +0,0 @@
-const defaultLocale = {
-  closeLabel: 'Close'
-};
-export default defaultLocale;
-//# sourceMappingURL=defaultLocale.js.map

package/dist/esm/Modal/utils/defaultLocale.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"defaultLocale.js","names":["defaultLocale","closeLabel"],"sources":["../../../../src/Modal/utils/defaultLocale.ts"],"sourcesContent":["export interface ModalLocale {\n  closeLabel: string;\n}\n\nconst defaultLocale: ModalLocale = {\n  closeLabel: 'Close',\n};\n\nexport default defaultLocale;\n"],"mappings":"AAIA,MAAMA,aAA0B,GAAG;EACjCC,UAAU,EAAE;AACd,CAAC;AAED,eAAeD,aAAa","ignoreList":[]}