@os-design/core 1.0.199 → 1.0.200

package/src/ListSkeleton/index.tsx

@@ -0,0 +1,115 @@
+import styled from '@emotion/styled';
+import { horizontalPaddingStyles } from '@os-design/styles';
+import { clr } from '@os-design/theming';
+import React, { forwardRef, useCallback } from 'react';
+import { FixedSizeList } from 'react-window';
+import List, { ListProps } from '../List';
+import { ListItemProps } from '../ListItem';
+import Skeleton from '../Skeleton';
+
+export interface ListSkeletonProps
+  extends Omit<ListProps, 'itemCount' | 'itemRenderer'>,
+    Pick<ListItemProps, 'left' | 'right'> {
+  /**
+   * The description placeholder.
+   * @default false
+   */
+  hasDescription?: boolean;
+  /**
+   * The width of the title.
+   * @default 30%
+   */
+  titleWidth?: string;
+  /**
+   * The width of the description.
+   * @default 40%
+   */
+  descriptionWidth?: string;
+  /**
+   * Total count of items.
+   * @default 10
+   */
+  itemCount?: number;
+}
+
+const ListItem = styled.div`
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+
+  &:not(:last-of-type) {
+    border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};
+  }
+
+  ${horizontalPaddingStyles()};
+`;
+
+const Content = styled.div`
+  width: 100%;
+`;
+
+const DescriptionSkeleton = styled(Skeleton)`
+  height: ${(p) => p.theme.sizes.small}em;
+  margin-top: 0.3em;
+`;
+
+const LeftAddon = styled.div`
+  color: ${(p) => clr(p.theme.colorText)};
+  padding-right: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;
+`;
+
+const RightAddon = styled.div`
+  color: ${(p) => clr(p.theme.colorText)};
+  margin-left: auto;
+  padding-left: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;
+`;
+
+/**
+ * Provides a list placeholder while a user waits for the content to load.
+ */
+const ListSkeleton = forwardRef<FixedSizeList, ListSkeletonProps>(
+  (
+    {
+      hasDescription = false,
+      titleWidth = '30%',
+      descriptionWidth = '40%',
+      itemCount = 10,
+      left,
+      right,
+      ...rest
+    },
+    ref
+  ) => {
+    const itemRenderer = useCallback(
+      ({ style }) => (
+        <ListItem style={style}>
+          {left && <LeftAddon>{left}</LeftAddon>}
+
+          <Content>
+            <Skeleton width={titleWidth} />
+            {hasDescription && <DescriptionSkeleton width={descriptionWidth} />}
+          </Content>
+
+          {right && <RightAddon>{right}</RightAddon>}
+        </ListItem>
+      ),
+      [descriptionWidth, hasDescription, left, right, titleWidth]
+    );
+
+    return (
+      <List
+        itemCount={itemCount}
+        itemRenderer={itemRenderer}
+        {...rest}
+        ref={ref}
+      />
+    );
+  }
+);
+
+ListSkeleton.displayName = 'ListSkeleton';
+
+export default ListSkeleton;

package/src/LogoLink/index.tsx

@@ -0,0 +1,93 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import {
+  resetFocusStyles,
+  sizeStyles,
+  transitionStyles,
+  WithSize,
+} from '@os-design/styles';
+import { useTheme } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef } from 'react';
+import { 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;
+}
+
+const darkStyles = (p) =>
+  p.dark &&
+  css`
+    img {
+      filter: brightness(0) invert(1); // Make the logo white
+    }
+  `;
+
+interface StyledLogoLinkProps extends WithSize {
+  dark: boolean;
+}
+const StyledLogoLink = styled(
+  'a',
+  omitEmotionProps('dark', 'size', 'as')
+)<StyledLogoLinkProps>`
+  ${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 = forwardRef<HTMLAnchorElement, LogoLinkProps>(
+  ({ src, as, onMouseDown = () => {}, ...rest }, ref) => {
+    const { activeTheme } = useTheme();
+    const ariaLabel = rest['aria-label'] || 'Logo';
+
+    return (
+      <StyledLogoLink
+        dark={activeTheme === 'dark'}
+        aria-label={ariaLabel}
+        as={as}
+        onMouseDown={(e) => {
+          onMouseDown(e);
+          e.preventDefault();
+        }}
+        {...rest}
+        ref={ref}
+      >
+        <img src={src} alt={ariaLabel} />
+      </StyledLogoLink>
+    );
+  }
+);
+
+LogoLink.displayName = 'LogoLink';
+
+export default LogoLink;

package/src/LogoLink/logo.example.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="223" viewBox="0 0 1024 223">
+  <g transform="translate(0,223) scale(0.1,-0.1)" fill="#0a66c2">
+    <path
+        d='M522 1740 c-173 -46 -328 -169 -410 -326 -133 -258 -91 -556 108 -754 109 -109 193 -154 340 -186 196 -42 429 20 558 147 85 85 91 163 17 228 -63 55 -115 50 -217 -22 -90 -63 -133 -77 -236 -77 -75 0 -95 4 -147 29 -282 134 -282 528 1 667 50 25 71 29 139 29 104 0 143 -13 244 -80 71 -47 90 -55 130 -55 37 0 54 6 83 30 78 64 72 150 -15 235 -139 134 -385 190 -595 135z'/>
+    <path
+        d='M1800 1744 c-111 -24 -223 -86 -310 -173 -134 -132 -193 -274 -193 -461 0 -188 59 -329 193 -462 314 -311 844 -222 1033 173 54 111 67 169 67 289 0 120 -13 178 -67 289 -128 267 -425 409 -723 345z m282 -294 c73 -27 124 -69 170 -137 46 -70 62 -134 56 -233 -9 -156 -104 -273 -260 -322 -73 -22 -124 -23 -197 -2 -115 32 -209 119 -251 231 -30 80 -25 205 10 277 91 180 284 257 472 186z'/>
+    <path
+        d='M2864 1750 c-11 -4 -34 -24 -52 -44 l-32 -37 0 -545 c0 -602 -2 -583 63 -623 64 -39 153 -22 193 36 18 26 19 56 24 408 6 430 3 417 88 482 112 86 266 64 325 -46 l27 -49 0 -366 c0 -288 3 -374 14 -399 41 -96 157 -120 230 -48 l31 31 5 383 c6 421 4 409 72 474 70 67 176 91 255 58 52 -22 72 -42 99 -100 24 -50 24 -53 24 -411 0 -230 4 -372 11 -392 36 -103 212 -109 255 -7 22 52 20 725 -2 833 -37 179 -158 315 -319 356 -153 41 -320 5 -468 -101 l-48 -34 -55 50 c-79 72 -143 95 -274 95 -95 1 -111 -2 -165 -27 -33 -16 -71 -38 -84 -50 -20 -18 -25 -19 -29 -7 -3 8 -22 32 -42 53 -32 32 -44 37 -81 36 -24 0 -53 -4 -65 -9z'/>
+    <path
+        d='M4835 1750 c-27 -11 -61 -49 -74 -83 -8 -19 -11 -271 -11 -778 0 -810 -1 -787 53 -838 35 -32 111 -40 156 -17 17 10 41 31 51 49 18 29 20 52 20 260 0 126 3 227 8 225 4 -2 32 -16 62 -32 89 -47 159 -67 260 -73 318 -19 597 184 675 492 19 76 19 234 0 310 -46 182 -173 342 -335 423 -188 94 -398 95 -580 4 -41 -20 -77 -38 -80 -39 -3 -2 -15 15 -27 36 -34 59 -116 87 -178 61z m710 -301 c79 -30 154 -100 191 -182 26 -54 29 -73 29 -157 0 -82 -4 -103 -26 -151 -49 -104 -127 -170 -238 -203 -69 -20 -123 -20 -192 0 -140 41 -236 144 -265 285 -25 119 6 222 95 321 98 110 256 143 406 87z'/>
+    <path
+        d='M6675 1746 c-142 -33 -236 -87 -337 -194 -119 -127 -172 -262 -172 -442 0 -195 53 -320 193 -460 89 -89 158 -130 271 -165 84 -25 231 -30 315 -11 71 17 182 71 223 109 l22 20 0 -22 c0 -78 118 -128 201 -86 16 9 39 30 49 48 19 30 20 52 20 334 0 343 -7 401 -67 522 -44 89 -169 226 -248 271 -135 77 -328 109 -470 76z m296 -307 c82 -38 139 -95 177 -177 23 -49 27 -70 27 -152 0 -87 -3 -101 -33 -162 -39 -79 -92 -129 -181 -172 -58 -27 -77 -31 -152 -31 -77 0 -91 3 -153 34 -156 80 -235 230 -206 393 45 244 293 372 521 267z'/>
+    <path
+        d='M7789 1737 c-71 -47 -69 -32 -69 -615 0 -572 -1 -564 59 -615 42 -35 124 -38 165 -6 50 39 51 44 57 394 5 319 6 332 29 390 28 68 93 140 155 170 24 11 69 21 111 23 88 5 157 -21 210 -80 82 -91 94 -161 94 -545 l0 -292 30 -35 c51 -58 126 -69 188 -28 50 33 52 46 52 407 0 383 -5 425 -72 565 -137 286 -478 377 -733 196 l-65 -47 0 27 c0 18 -14 40 -44 70 -38 39 -49 44 -88 44 -30 0 -56 -8 -79 -23z'/>
+    <path
+        d='M9105 1751 c-44 -19 -78 -68 -82 -118 -4 -45 10 -78 216 -531 122 -266 221 -489 221 -494 0 -6 -43 -108 -97 -227 -100 -223 -111 -268 -84 -319 42 -79 175 -82 229 -5 10 16 171 361 357 768 317 691 339 744 339 797 1 53 -2 60 -35 94 -61 61 -154 57 -206 -9 -10 -13 -92 -190 -183 -395 -91 -204 -168 -368 -171 -364 -3 4 -79 174 -168 377 -105 237 -173 380 -191 399 -22 22 -39 30 -77 32 -26 2 -57 0 -68 -5z'/>
+  </g>
+</svg>

package/src/Menu/index.tsx

@@ -0,0 +1,128 @@
+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 React, { forwardRef, RefObject, useMemo } from 'react';
+import Modal from '../Modal';
+import Popover, { PopoverProps } from '../Popover';
+import useFocusWithArrows from './utils/useFocusWithArrows';
+
+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;
+}
+
+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 = forwardRef<HTMLDivElement, MenuProps>(
+  (
+    {
+      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) as EventTarget,
+      '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 as RefObject<Element>;
+      if (!current) return;
+      current.setAttribute('aria-haspopup', 'menu');
+      current.setAttribute('aria-controls', menuId);
+    }, [menuId]);
+
+    const contextValue = useMemo(
+      () => ({ closeOnSelect, onClose }),
+      [closeOnSelect, onClose]
+    );
+
+    return (
+      <MenuContext.Provider value={contextValue}>
+        {isMinXs ? (
+          <StyledPopover
+            trigger={trigger}
+            placement={placement}
+            visible={visible}
+            onClose={onClose}
+            size={size}
+            className={className}
+            id={menuId}
+            role='menu'
+            {...rest}
+            ref={mergedContainerRef}
+          >
+            {children}
+          </StyledPopover>
+        ) : (
+          <StyledModal
+            title={modalTitle}
+            footer={null}
+            visible={visible}
+            onClose={onClose}
+            size={size}
+            className={className}
+            id={menuId}
+            role='menu'
+            ref={mergedContainerRef}
+          >
+            {children}
+          </StyledModal>
+        )}
+      </MenuContext.Provider>
+    );
+  }
+);
+
+Menu.displayName = 'Menu';
+
+export default Menu;

package/src/Menu/utils/useFocusWithArrows.ts

@@ -0,0 +1,50 @@
+import { KeyPressListener, useKeyPress } from '@os-design/utils';
+import { RefObject, useCallback } from 'react';
+
+const useFocusWithArrows = (ref: RefObject<Element>): void => {
+  const arrowKeyPressListener = useCallback<KeyPressListener>(
+    (e) => {
+      if (!ref.current) return;
+      const focusableListItems = ref.current.querySelectorAll<HTMLElement>(
+        'button:not([disabled])'
+      );
+      const { activeElement } = document;
+      const curFocusedIndex = activeElement
+        ? ([...focusableListItems] as Element[]).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) as EventTarget,
+    ['ArrowUp', 'ArrowDown'],
+    arrowKeyPressListener
+  );
+};
+
+export default useFocusWithArrows;

package/src/MenuDivider/index.tsx

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+import { clr } from '@os-design/theming';
+import React, { forwardRef } from 'react';
+
+export type MenuDividerProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+
+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 = forwardRef<HTMLDivElement, MenuDividerProps>(
+  (props, ref) => <Container role='separator' {...props} ref={ref} />
+);
+
+MenuDivider.displayName = 'MenuDivider';
+
+export default MenuDivider;

package/src/MenuGroup/index.tsx

@@ -0,0 +1,190 @@
+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';
+
+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;
+
+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 = forwardRef<HTMLDivElement, MenuGroupProps>(
+  (
+    {
+      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<any>({
+      value,
+      defaultValue,
+      onChange,
+    });
+
+    const onSelect = useCallback(
+      (v: string) => {
+        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 (!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 React.cloneElement<any>(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 (
+      <Container
+        role={maxSelectedItems === 1 ? 'radiogroup' : 'group'}
+        {...rest}
+        ref={ref}
+      >
+        {title && <Title>{title}</Title>}
+        {menuItems}
+      </Container>
+    );
+  }
+);
+
+MenuGroup.displayName = 'MenuGroup';
+
+export default MenuGroup;