@os-design/core 1.0.199 → 1.0.200

package/src/MenuItem/index.tsx

@@ -0,0 +1,108 @@
+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, { ButtonProps } from '../Button';
+
+export interface MenuItemProps
+  extends Omit<ButtonProps, 'type' | 'wide' | 'size'> {
+  /**
+   * Whether the menu item is selected.
+   * @default false
+   */
+  selected?: boolean;
+  /**
+   * The value of the menu item.
+   * @default undefined
+   */
+  value?: string;
+}
+
+const selectedStyles = (p) =>
+  p.selected &&
+  css`
+    background-color: ${clr(p.theme.menuItemSelectedColorBg)};
+  `;
+
+type StyledButtonProps = Pick<MenuItemProps, 'selected'>;
+const StyledButton = styled(
+  Button,
+  omitEmotionProps('selected')
+)<StyledButtonProps>`
+  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 = forwardRef<HTMLButtonElement, MenuItemProps>(
+  ({ selected = false, value, right, onClick = () => {}, ...rest }, ref) => {
+    const { closeOnSelect, onClose } = useContext(MenuContext);
+    const onClickRef = useRef<MenuItemProps['onClick']>();
+
+    useEffect(() => {
+      onClickRef.current = onClick;
+    }, [onClick]);
+
+    const clickHandler = useCallback(
+      (e) => {
+        if (onClickRef.current) onClickRef.current(e);
+        if (closeOnSelect) onClose();
+      },
+      [closeOnSelect, onClose]
+    );
+
+    return (
+      <ThemeOverrider
+        overrides={(theme) => ({ buttonGhostColorText: theme.colorText })}
+      >
+        <StyledButton
+          selected={selected}
+          right={selected ? <SelectedIcon /> : right}
+          type='ghost'
+          wide='always'
+          onClick={clickHandler}
+          role='menuitem'
+          {...rest}
+          ref={ref}
+        />
+      </ThemeOverrider>
+    );
+  }
+);
+
+MenuItem.displayName = 'MenuItem';
+
+export default MenuItem;

package/src/Modal/index.tsx

@@ -0,0 +1,411 @@
+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 {
+  WithSize,
+  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, { ModalLocale } from './utils/defaultLocale';
+
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface ModalProps extends JsxDivProps, WithSize {
+  /**
+   * The title of the modal.
+   * @default undefined
+   */
+  title?: string;
+  /**
+   * The text of the OK button.
+   * @default OK
+   */
+  okText?: string;
+  /**
+   * Sets the danger styles to the OK button.
+   * @default false
+   */
+  okDanger?: boolean;
+  /**
+   * Whether the OK button is loading.
+   * @default false
+   */
+  okLoading?: boolean;
+  /**
+   * Whether the OK button is disabled.
+   * @default false
+   */
+  okDisabled?: boolean;
+  /**
+   * The header component.
+   * Set as null if you don't need the default header.
+   * @default undefined
+   */
+  header?: React.ReactNode;
+  /**
+   * The footer component.
+   * Set as null if you don't need the default footer.
+   * @default undefined
+   */
+  footer?: React.ReactNode;
+  /**
+   * Whether the modal is visible.
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * The locale of the modal.
+   * @default undefined
+   */
+  locale?: ModalLocale;
+  /**
+   * Specifies a callback that will be called when a user clicks the mask or
+   * the close button. The callback should set the visible state to false.
+   * @default undefined
+   */
+  onClose?: () => void;
+  /**
+   * Specifies a callback that will be called when a user clicks the OK button.
+   * @default undefined
+   */
+  onOk?: () => void;
+}
+
+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;
+  `;
+
+type MaskProps = Pick<ModalProps, 'visible'>;
+export const ModalMask = styled('div', omitEmotionProps('visible'))<MaskProps>`
+  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;
+    }
+  `;
+
+type ContentProps = Pick<ModalProps, 'visible' | 'size'>;
+const Content = styled(
+  'div',
+  omitEmotionProps('visible', 'size')
+)<ContentProps>`
+  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 = React.createContext<() => void>(() => {});
+
+export const useCloseModal = () => useContext(CloseModalContext);
+
+/**
+ * The base pop-up window.
+ */
+const Modal = forwardRef<HTMLDivElement, ModalProps>(
+  (
+    {
+      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<HTMLDivElement>(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 clickHandler = useCallback(
+      (e) => {
+        e.stopPropagation();
+        onClick(e);
+      },
+      [onClick]
+    );
+
+    const keyDownHandler = useCallback(
+      (e) => {
+        if (e.key === 'Escape') {
+          e.stopPropagation();
+          onClose();
+        }
+      },
+      [onClose]
+    );
+
+    const ariaLabelledBy = useMemo(
+      () => (header === undefined ? titleId : undefined),
+      [header, titleId]
+    );
+
+    if (!mounted) return null;
+
+    return (
+      <Portal>
+        <ModalMask visible={visible} />
+        <Container onClick={onClose}>
+          <FocusLock autoFocus>
+            <CloseModalContext.Provider value={onClose}>
+              <Content
+                visible={visible}
+                size={size}
+                tabIndex={-1}
+                onKeyDown={keyDownHandler}
+                onClick={clickHandler}
+                role='dialog'
+                aria-modal
+                aria-labelledby={ariaLabelledBy}
+                aria-describedby={bodyId}
+                ref={contentRef}
+              >
+                {header === undefined ? (
+                  <ThemeOverrider
+                    overrides={(t) => ({
+                      buttonPaddingHorizontal:
+                        t.modalCloseButtonPaddingHorizontal,
+                    })}
+                  >
+                    <Header>
+                      <Title id={titleId}>{title}</Title>
+                      <Button
+                        type='ghost'
+                        wide='never'
+                        onClick={onClose}
+                        aria-label={locale.closeLabel}
+                      >
+                        <Close />
+                      </Button>
+                    </Header>
+                  </ThemeOverrider>
+                ) : (
+                  header
+                )}
+
+                <Body id={bodyId} {...rest} ref={ref}>
+                  {children}
+                </Body>
+
+                {footer === undefined ? (
+                  <Footer>
+                    <Button
+                      danger={okDanger}
+                      loading={okLoading}
+                      disabled={okDisabled}
+                      onClick={onOk}
+                    >
+                      {okText}
+                    </Button>
+                  </Footer>
+                ) : (
+                  footer
+                )}
+              </Content>
+            </CloseModalContext.Provider>
+          </FocusLock>
+        </Container>
+      </Portal>
+    );
+  }
+);
+
+Modal.displayName = 'Modal';
+
+export default Modal;

package/src/Modal/utils/defaultLocale.ts

@@ -0,0 +1,9 @@
+export interface ModalLocale {
+  closeLabel: string;
+}
+
+const defaultLocale: ModalLocale = {
+  closeLabel: 'Close',
+};
+
+export default defaultLocale;