@os-design/core 1.0.254 → 1.0.256

package/dist/ListSkeleton/index.js

@@ -0,0 +1,37 @@
+import { forwardRef, useCallback } from 'react';
+import List from '../List';
+import ListItemSkeleton from '../ListItemSkeleton';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Provides a list placeholder while a user waits for the content to load.
+ */
+const ListSkeleton = /*#__PURE__*/forwardRef(({
+  hasDescription,
+  titleWidth,
+  descriptionWidth,
+  left,
+  right,
+  children,
+  itemCount = 10,
+  ...rest
+}, ref) => {
+  const itemRenderer = useCallback(({
+    style
+  }) => /*#__PURE__*/_jsx(ListItemSkeleton, {
+    hasDescription: hasDescription,
+    titleWidth: titleWidth,
+    descriptionWidth: descriptionWidth,
+    left: left,
+    right: right,
+    style: style,
+    children: children
+  }), [children, descriptionWidth, hasDescription, left, right, titleWidth]);
+  return /*#__PURE__*/_jsx(List, {
+    itemCount: itemCount,
+    itemRenderer: itemRenderer,
+    ...rest,
+    ref: ref
+  });
+});
+ListSkeleton.displayName = 'ListSkeleton';
+export default ListSkeleton;

package/dist/LogoLink/index.d.ts

@@ -0,0 +1,15 @@
+import { type WithSize } from '@os-design/styles';
+import type { LinkProps, ReactRouterLinkProps } from '../Link';
+type JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;
+export interface LogoLinkProps extends JsxAProps, ReactRouterLinkProps, Pick<LinkProps, 'as'>, WithSize {
+    /**
+     * The source of the logo image.
+     */
+    src?: string;
+}
+/**
+ * Logo with a link.
+ */
+declare const LogoLink: import("react").ForwardRefExoticComponent<LogoLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export default LogoLink;
+//# sourceMappingURL=index.d.ts.map

package/dist/LogoLink/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/LogoLink/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,QAAQ,EACd,MAAM,mBAAmB,CAAC;AAI3B,OAAO,KAAK,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/D,KAAK,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;AACzD,MAAM,WAAW,aACf,SAAQ,SAAS,EACf,oBAAoB,EACpB,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,EACrB,QAAQ;IACV;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAyCD;;GAEG;AACH,QAAA,MAAM,QAAQ,6GAqBb,CAAC;AAIF,eAAe,QAAQ,CAAC"}

package/dist/LogoLink/index.js

@@ -0,0 +1,68 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { resetFocusStyles, sizeStyles, transitionStyles } from '@os-design/styles';
+import { useTheme } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const darkStyles = p => p.dark && css`
+    img {
+      filter: brightness(0) invert(1); // Make the logo white
+    }
+  `;
+const StyledLogoLink = styled('a', omitEmotionProps('dark', 'size', 'as'))`
+  ${resetFocusStyles};
+  cursor: pointer;
+  text-decoration: none;
+  display: block;
+  height: 1.5em;
+
+  img {
+    display: block;
+    height: 100%;
+    transform: rotate(0); // Fixes moves on hover
+  }
+
+  @media (hover: hover) {
+    &:hover,
+    &:focus {
+      opacity: 0.7;
+    }
+  }
+
+  ${darkStyles};
+  ${sizeStyles};
+  ${transitionStyles('opacity')};
+`;
+
+/**
+ * Logo with a link.
+ */
+const LogoLink = /*#__PURE__*/forwardRef(({
+  src,
+  as,
+  onMouseDown = () => {},
+  ...rest
+}, ref) => {
+  const {
+    activeTheme
+  } = useTheme();
+  const ariaLabel = rest['aria-label'] || 'Logo';
+  return /*#__PURE__*/_jsx(StyledLogoLink, {
+    dark: activeTheme === 'dark',
+    "aria-label": ariaLabel,
+    as: as,
+    onMouseDown: e => {
+      onMouseDown(e);
+      e.preventDefault();
+    },
+    ...rest,
+    ref: ref,
+    children: /*#__PURE__*/_jsx("img", {
+      src: src,
+      alt: ariaLabel
+    })
+  });
+});
+LogoLink.displayName = 'LogoLink';
+export default LogoLink;

package/dist/Menu/index.d.ts

@@ -0,0 +1,19 @@
+import { type PopoverProps } from '../Popover';
+export interface MenuProps extends PopoverProps {
+    /**
+     * Whether the menu closes when the user selects a menu item.
+     * @default true
+     */
+    closeOnSelect?: boolean;
+    /**
+     * The title of the modal.
+     * @default undefined
+     */
+    modalTitle?: string;
+}
+/**
+ * The dropdown menu.
+ */
+declare const Menu: import("react").ForwardRefExoticComponent<MenuProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Menu;
+//# sourceMappingURL=index.d.ts.map

package/dist/Menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Menu/index.tsx"],"names":[],"mappings":"AAWA,OAAgB,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAGxD,MAAM,WAAW,SAAU,SAAQ,YAAY;IAC7C;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAeD;;GAEG;AACH,QAAA,MAAM,IAAI,sGAgFT,CAAC;AAIF,eAAe,IAAI,CAAC"}

package/dist/Menu/index.js

@@ -0,0 +1,88 @@
+import styled from '@emotion/styled';
+import { useIsMinWidth } from '@os-design/media';
+import { MenuContext } from '@os-design/menu-utils';
+import { enableScrollingStyles } from '@os-design/styles';
+import { useBrowserLayoutEffect, useForwardedRef, useKeyPress } from '@os-design/utils';
+import { forwardRef, useMemo } from 'react';
+import Modal from '../Modal';
+import Popover from '../Popover';
+import useFocusWithArrows from './utils/useFocusWithArrows';
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledPopover = styled(Popover)`
+  padding: ${p => p.theme.menuPaddingVertical}em 0;
+  min-width: ${p => p.theme.menuMinWidth}em;
+  max-height: ${p => p.theme.menuMaxHeight}em;
+  overflow: hidden;
+  ${enableScrollingStyles('y')};
+`;
+const StyledModal = styled(Modal)`
+  padding-left: 0;
+  padding-right: 0;
+`;
+
+/**
+ * The dropdown menu.
+ */
+const Menu = /*#__PURE__*/forwardRef(({
+  closeOnSelect = true,
+  modalTitle,
+  trigger,
+  placement = 'bottom-start',
+  visible,
+  onClose = () => {},
+  size,
+  className,
+  id,
+  children,
+  ...rest
+}, ref) => {
+  const [containerRef, mergedContainerRef] = useForwardedRef(ref);
+  useFocusWithArrows(containerRef);
+  useKeyPress(typeof window !== 'undefined' ? window : undefined, 'Escape', onClose);
+  const isMinXs = useIsMinWidth('xs');
+  const menuId = useMemo(() => id || `menu-${Math.random().toString(36).slice(2, 11)}`, [id]);
+
+  // Replace the aria-haspopup attribute from true to menu
+  useBrowserLayoutEffect(() => {
+    if (!trigger) return;
+    const {
+      current
+    } = trigger;
+    if (!current) return;
+    current.setAttribute('aria-haspopup', 'menu');
+    current.setAttribute('aria-controls', menuId);
+  }, [menuId]);
+  const contextValue = useMemo(() => ({
+    closeOnSelect,
+    onClose
+  }), [closeOnSelect, onClose]);
+  return /*#__PURE__*/_jsx(MenuContext.Provider, {
+    value: contextValue,
+    children: isMinXs ? /*#__PURE__*/_jsx(StyledPopover, {
+      trigger: trigger,
+      placement: placement,
+      visible: visible,
+      onClose: onClose,
+      size: size,
+      className: className,
+      id: menuId,
+      role: "menu",
+      ...rest,
+      ref: mergedContainerRef,
+      children: children
+    }) : /*#__PURE__*/_jsx(StyledModal, {
+      title: modalTitle,
+      footer: null,
+      visible: visible,
+      onClose: onClose,
+      size: size,
+      className: className,
+      id: menuId,
+      role: "menu",
+      ref: mergedContainerRef,
+      children: children
+    })
+  });
+});
+Menu.displayName = 'Menu';
+export default Menu;

package/dist/Menu/utils/useFocusWithArrows.d.ts

@@ -0,0 +1,4 @@
+import { type RefObject } from 'react';
+declare const useFocusWithArrows: (ref: RefObject<Element>) => void;
+export default useFocusWithArrows;
+//# sourceMappingURL=useFocusWithArrows.d.ts.map

package/dist/Menu/utils/useFocusWithArrows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusWithArrows.d.ts","sourceRoot":"","sources":["../../../src/Menu/utils/useFocusWithArrows.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAe,MAAM,OAAO,CAAC;AAEpD,QAAA,MAAM,kBAAkB,QAAS,SAAS,CAAC,OAAO,CAAC,KAAG,IA4CrD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/Menu/utils/useFocusWithArrows.js

@@ -0,0 +1,29 @@
+import { useKeyPress } from '@os-design/utils';
+import { useCallback } from 'react';
+const useFocusWithArrows = ref => {
+  const arrowKeyPressListener = useCallback(e => {
+    if (!ref.current) return;
+    const focusableListItems = ref.current.querySelectorAll('button:not([disabled])');
+    const {
+      activeElement
+    } = document;
+    const curFocusedIndex = activeElement ? [...focusableListItems].indexOf(activeElement) : -1;
+    let nextFocusedIndex;
+    if (curFocusedIndex === -1 && e.key === 'ArrowUp') {
+      nextFocusedIndex = focusableListItems.length - 1;
+    } else if (curFocusedIndex === -1 && e.key === 'ArrowDown') {
+      nextFocusedIndex = 0;
+    } else if (curFocusedIndex > -1 && e.key === 'ArrowUp') {
+      nextFocusedIndex = curFocusedIndex > 0 ? curFocusedIndex - 1 : focusableListItems.length - 1;
+    } else if (curFocusedIndex > -1 && e.key === 'ArrowDown') {
+      nextFocusedIndex = curFocusedIndex < focusableListItems.length - 1 ? curFocusedIndex + 1 : 0;
+    }
+    if (nextFocusedIndex === undefined) return;
+    const nextFocusedListItem = focusableListItems.item(nextFocusedIndex);
+    if (!nextFocusedListItem) return;
+    nextFocusedListItem.focus();
+    e.preventDefault();
+  }, [ref]);
+  useKeyPress(typeof window !== 'undefined' ? window : undefined, ['ArrowUp', 'ArrowDown'], arrowKeyPressListener);
+};
+export default useFocusWithArrows;

package/dist/MenuDivider/index.d.ts

@@ -0,0 +1,7 @@
+export type MenuDividerProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+/**
+ * The divider of menu items.
+ */
+declare const MenuDivider: import("react").ForwardRefExoticComponent<MenuDividerProps & import("react").RefAttributes<HTMLDivElement>>;
+export default MenuDivider;
+//# sourceMappingURL=index.d.ts.map

package/dist/MenuDivider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MenuDivider/index.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAQzE;;GAEG;AACH,QAAA,MAAM,WAAW,6GAEhB,CAAC;AAIF,eAAe,WAAW,CAAC"}

package/dist/MenuDivider/index.js

@@ -0,0 +1,20 @@
+import styled from '@emotion/styled';
+import { clr } from '@os-design/theming';
+import { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Container = styled.div`
+  padding-top: 0.4em;
+  border-bottom: 1px solid ${p => clr(p.theme.menuDividerColor)};
+  margin-bottom: 0.4em;
+`;
+
+/**
+ * The divider of menu items.
+ */
+const MenuDivider = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(Container, {
+  role: "separator",
+  ...props,
+  ref: ref
+}));
+MenuDivider.displayName = 'MenuDivider';
+export default MenuDivider;

package/dist/MenuGroup/index.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'defaultValue' | 'value' | 'onChange' | 'ref'>;
+interface BaseMenuGroupProps<T> extends JsxDivProps {
+    /**
+     * The title of the menu group.
+     * @default undefined
+     */
+    title?: string;
+    /**
+     * The max number of options that the user can select. Zero means unlimited.
+     * Works only when multiple is true.
+     * @default 0
+     */
+    maxSelectedItems?: number;
+    /**
+     * Selected menu items.
+     * @default undefined
+     */
+    value?: T;
+    /**
+     * The default value.
+     * @default undefined
+     */
+    defaultValue?: T;
+    /**
+     * The change event handler.
+     * @default undefined
+     */
+    onChange?: (value: T) => void;
+}
+interface MenuGroupNotMultipleProps extends BaseMenuGroupProps<string | null> {
+    /**
+     * Is it possible to select multiple values.
+     * @default false
+     */
+    multiple?: false;
+}
+interface MenuGroupMultipleProps extends BaseMenuGroupProps<string[]> {
+    /**
+     * Is it possible to select multiple values.
+     * @default false
+     */
+    multiple: true;
+}
+export type MenuGroupProps = MenuGroupNotMultipleProps | MenuGroupMultipleProps;
+/**
+ * The group of menu items.
+ */
+declare const MenuGroup: React.ForwardRefExoticComponent<MenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+export default MenuGroup;
+//# sourceMappingURL=index.d.ts.map

package/dist/MenuGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MenuGroup/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAG5E,KAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,cAAc,GAAG,OAAO,GAAG,UAAU,GAAG,KAAK,CAC9C,CAAC;AACF,UAAU,kBAAkB,CAAC,CAAC,CAAE,SAAQ,WAAW;IACjD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IACV;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CAC/B;AACD,UAAU,yBAA0B,SAAQ,kBAAkB,CAAC,MAAM,GAAG,IAAI,CAAC;IAC3E;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AACD,UAAU,sBAAuB,SAAQ,kBAAkB,CAAC,MAAM,EAAE,CAAC;IACnE;;;OAGG;IACH,QAAQ,EAAE,IAAI,CAAC;CAChB;AACD,MAAM,MAAM,cAAc,GAAG,yBAAyB,GAAG,sBAAsB,CAAC;AA6BhF;;GAEG;AACH,QAAA,MAAM,SAAS,uFAkGd,CAAC;AAIF,eAAe,SAAS,CAAC"}

package/dist/MenuGroup/index.js

@@ -0,0 +1,107 @@
+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';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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__*/_jsxs(Container, {
+    role: maxSelectedItems === 1 ? 'radiogroup' : 'group',
+    ...rest,
+    ref: ref,
+    children: [title && /*#__PURE__*/_jsx(Title, {
+      children: title
+    }), menuItems]
+  });
+});
+MenuGroup.displayName = 'MenuGroup';
+export default MenuGroup;

package/dist/MenuItem/index.d.ts

@@ -0,0 +1,19 @@
+import { type 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;
+}
+/**
+ * The base menu item.
+ */
+declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default MenuItem;
+//# sourceMappingURL=index.d.ts.map

package/dist/MenuItem/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MenuItem/index.tsx"],"names":[],"mappings":"AAQA,OAAe,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAErD,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACnD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqCD;;GAEG;AACH,QAAA,MAAM,QAAQ,6GAkCb,CAAC;AAIF,eAAe,QAAQ,CAAC"}

package/dist/MenuItem/index.js

@@ -0,0 +1,77 @@
+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 { forwardRef, useCallback, useContext, useEffect, useRef } from 'react';
+import Button from '../Button';
+import { jsx as _jsx } from "react/jsx-runtime";
+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__*/_jsx(ThemeOverrider, {
+    overrides: theme => ({
+      buttonGhostColorText: theme.colorText
+    }),
+    children: /*#__PURE__*/_jsx(StyledButton, {
+      selected: selected,
+      right: selected ? /*#__PURE__*/_jsx(SelectedIcon, {}) : right,
+      type: "ghost",
+      wide: "always",
+      onClick: clickHandler,
+      role: "menuitem",
+      ...rest,
+      ref: ref
+    })
+  });
+});
+MenuItem.displayName = 'MenuItem';
+export default MenuItem;

package/dist/Modal/index.d.ts

@@ -0,0 +1,76 @@
+import { type WithSize } from '@os-design/styles';
+import React from 'react';
+import { type 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;
+}
+type MaskProps = Pick<ModalProps, 'visible'>;
+export declare const ModalMask: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & MaskProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const useCloseModal: () => () => void;
+/**
+ * The base pop-up window.
+ */
+declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
+export default Modal;
+//# sourceMappingURL=index.d.ts.map

package/dist/Modal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Modal/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,QAAQ,EAId,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAQN,MAAM,OAAO,CAAC;AAGf,OAAsB,EAAE,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAExE,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,UAAW,SAAQ,WAAW,EAAE,QAAQ;IACvD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;CACnB;AA2BD,KAAK,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;AAC7C,eAAO,MAAM,SAAS;;SA0GM,MAAO,WAAW;iGAhG7C,CAAC;AAsJF,eAAO,MAAM,aAAa,cAF0B,IAEY,CAAC;AAEjE;;GAEG;AACH,QAAA,MAAM,KAAK,mFAyIV,CAAC;AAIF,eAAe,KAAK,CAAC"}