@os-design/core 1.0.199 → 1.0.200

package/src/Select/utils/defaultLocale.ts

@@ -0,0 +1,11 @@
+export interface SelectLocale {
+  deleteLabel: string;
+  clearLabel: string;
+}
+
+const defaultLocale: SelectLocale = {
+  deleteLabel: 'Delete',
+  clearLabel: 'Clear',
+};
+
+export default defaultLocale;

package/src/Skeleton/index.tsx

@@ -0,0 +1,52 @@
+import { keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
+import { clr } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef } from 'react';
+
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface SkeletonProps extends JsxDivProps {
+  /**
+   * The width of the skeleton.
+   * @default 100%
+   */
+  width?: string;
+}
+
+const SkeletonAnimation = keyframes`
+  from { background-position: 100% 50%; }
+  to { background-position: 0 50%; }
+`;
+
+type StyledSkeletonProps = Required<Pick<SkeletonProps, 'width'>>;
+const StyledSkeleton = styled(
+  'div',
+  omitEmotionProps('width', 'size')
+)<StyledSkeletonProps>`
+  width: ${(p) => p.width};
+  height: 1em;
+
+  background: linear-gradient(
+    90deg,
+    ${(p) => clr(p.theme.skeletonColorBgFrom)} 25%,
+    ${(p) => clr(p.theme.skeletonColorBgTo)} 37%,
+    ${(p) => clr(p.theme.skeletonColorBgFrom)} 63%
+  );
+  background-size: 400% 100%;
+
+  border-radius: ${(p) => p.theme.borderRadius}em;
+  animation: ${SkeletonAnimation} 1.4s ease infinite;
+`;
+
+/**
+ * Provides a basic placeholder while a user waits for the content to load.
+ */
+const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
+  ({ width = '100%', ...rest }, ref) => (
+    <StyledSkeleton width={width} aria-busy {...rest} ref={ref} />
+  )
+);
+
+Skeleton.displayName = 'Skeleton';
+
+export default Skeleton;

package/src/Switch/index.tsx

@@ -0,0 +1,217 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import {
+  resetButtonStyles,
+  sizeStyles,
+  transitionStyles,
+  WithSize,
+} from '@os-design/styles';
+import { clr } from '@os-design/theming';
+import { omitEmotionProps, useForwardedState } from '@os-design/utils';
+import React, { forwardRef, useCallback } from 'react';
+
+type JsxButtonProps = Omit<
+  JSX.IntrinsicElements['button'],
+  'value' | 'defaultValue' | 'onChange' | 'onClick' | 'ref'
+>;
+export interface SwitchProps extends JsxButtonProps, WithSize {
+  /**
+   * Whether the switch is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Whether the switch is checked.
+   * @default false
+   */
+  value?: boolean;
+  /**
+   * The default value.
+   * @default undefined
+   */
+  defaultValue?: boolean;
+  /**
+   * The change event handler.
+   * @default undefined
+   */
+  onChange?: (value: boolean) => void;
+}
+
+const FRACTION_DIGITS = 4;
+
+const uncheckedStyles = (p) =>
+  !p.checked &&
+  css`
+    background-color: ${clr(p.theme.switchUncheckedColorBg)};
+    &::after {
+      left: ${+((p.theme.switchHeight - p.theme.switchCircleSize) / 2).toFixed(
+        FRACTION_DIGITS
+      )}em;
+    }
+  `;
+
+const checkedStyles = (p) =>
+  p.checked &&
+  css`
+    background-color: ${clr(p.theme.switchCheckedColorBg)};
+    &::after {
+      left: ${+(
+        p.theme.switchWidth -
+        p.theme.switchCircleSize -
+        (p.theme.switchHeight - p.theme.switchCircleSize) / 2
+      ).toFixed(FRACTION_DIGITS)}em;
+    }
+  `;
+
+const hoverUncheckedStyles = (p) =>
+  !p.checked &&
+  css`
+    background-color: ${clr(p.theme.switchUncheckedColorBgHover)};
+  `;
+
+const hoverCheckedStyles = (p) =>
+  p.checked &&
+  css`
+    background-color: ${clr(p.theme.switchCheckedColorBgHover)};
+  `;
+
+const hoverStyles = (p) =>
+  !p.disabled &&
+  css`
+    @media (hover: hover) {
+      &:hover,
+      &:focus {
+        ${hoverUncheckedStyles(p)};
+        ${hoverCheckedStyles(p)};
+      }
+    }
+  `;
+
+const disabledUncheckedStyles = (p) =>
+  !p.checked &&
+  css`
+    background-color: ${clr(p.theme.switchDisabledUncheckedColorBg)};
+  `;
+
+const disabledCheckedStyles = (p) =>
+  p.checked &&
+  css`
+    background-color: ${clr(p.theme.switchDisabledCheckedColorBg)};
+  `;
+
+const disabledStyles = (p) =>
+  p.disabled &&
+  css`
+    cursor: not-allowed;
+    ${disabledUncheckedStyles(p)};
+    ${disabledCheckedStyles(p)};
+  `;
+
+interface StyledSwitchProps extends Pick<SwitchProps, 'disabled' | 'size'> {
+  checked: SwitchProps['value'];
+}
+const StyledSwitch = styled(
+  'button',
+  omitEmotionProps('size', 'checked')
+)<StyledSwitchProps>`
+  ${resetButtonStyles};
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+  display: block;
+
+  width: ${(p) => p.theme.switchWidth}em;
+  height: ${(p) => p.theme.switchHeight}em;
+  border-radius: ${(p) => p.theme.switchHeight / 2}em;
+
+  &::after {
+    position: absolute;
+    top: ${(p) =>
+      +((p.theme.switchHeight - p.theme.switchCircleSize) / 2).toFixed(
+        FRACTION_DIGITS
+      )}em;
+
+    width: ${(p) => p.theme.switchCircleSize}em;
+    height: ${(p) => p.theme.switchCircleSize}em;
+    border-radius: 50%;
+
+    background-color: ${(p) => clr(p.theme.switchColorCircleBg)};
+    content: ' ';
+
+    ${transitionStyles('left')};
+  }
+
+  ${uncheckedStyles};
+  ${checkedStyles};
+  ${hoverStyles};
+  ${disabledStyles};
+
+  ${sizeStyles};
+  ${transitionStyles('background-color')};
+`;
+
+/**
+ * The switch that can be enabled or disabled.
+ */
+const Switch = forwardRef<HTMLButtonElement, SwitchProps>(
+  (
+    {
+      disabled = false,
+      value,
+      defaultValue,
+      onChange = () => {},
+      size,
+      onMouseDown = () => {},
+      onKeyDown = () => {},
+      ...rest
+    },
+    ref
+  ) => {
+    const [forwardedValue, setForwardedValue] = useForwardedState({
+      value,
+      defaultValue,
+      onChange,
+    });
+
+    const clickHandler = useCallback(() => {
+      if (disabled) return;
+      setForwardedValue(!forwardedValue);
+    }, [disabled, forwardedValue, setForwardedValue]);
+
+    const mouseDownHandler = useCallback(
+      (e) => {
+        onMouseDown(e);
+        e.preventDefault();
+      },
+      [onMouseDown]
+    );
+
+    const keyDownHandler = useCallback(
+      (e) => {
+        if (e.key === ' ') setForwardedValue(!forwardedValue);
+        onKeyDown(e);
+        e.preventDefault();
+      },
+      [forwardedValue, onKeyDown, setForwardedValue]
+    );
+
+    return (
+      <StyledSwitch
+        disabled={disabled}
+        checked={forwardedValue}
+        size={size}
+        onClick={clickHandler}
+        onMouseDown={mouseDownHandler}
+        onKeyDown={keyDownHandler}
+        role='switch'
+        aria-checked={forwardedValue}
+        {...rest}
+        ref={ref}
+      />
+    );
+  }
+);
+
+Switch.displayName = 'Switch';
+
+export default Switch;

package/src/SwitchSkeleton/index.tsx

@@ -0,0 +1,30 @@
+import styled from '@emotion/styled';
+
+import { sizeStyles, WithSize } from '@os-design/styles';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef } from 'react';
+
+import Skeleton, { SkeletonProps } from '../Skeleton';
+
+export type SwitchSkeletonProps = Omit<SkeletonProps, 'width'> & WithSize;
+
+const StyledSwitchSkeleton = styled(
+  Skeleton,
+  omitEmotionProps('size')
+)<WithSize>`
+  width: ${(p) => p.theme.switchWidth}em;
+  height: ${(p) => p.theme.switchHeight}em;
+  border-radius: ${(p) => p.theme.switchHeight / 2}em;
+  ${sizeStyles};
+`;
+
+/**
+ * Provides a switch placeholder while a user waits for the content to load.
+ */
+const SwitchSkeleton = forwardRef<HTMLDivElement, SwitchSkeletonProps>(
+  (props, ref) => <StyledSwitchSkeleton width='100%' {...props} ref={ref} />
+);
+
+SwitchSkeleton.displayName = 'SwitchSkeleton';
+
+export default SwitchSkeleton;

package/src/Tag/index.tsx

@@ -0,0 +1,75 @@
+import styled from '@emotion/styled';
+import {
+  ellipsisStyles,
+  sizeStyles,
+  transitionStyles,
+  WithSize,
+} from '@os-design/styles';
+import { clr } from '@os-design/theming';
+
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef } from 'react';
+
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+
+export interface BaseTagProps extends WithSize {
+  /**
+   * The component located on the left side.
+   * @default undefined
+   */
+  left?: React.ReactNode;
+  /**
+   * The component located on the right side.
+   * @default undefined
+   */
+  right?: React.ReactNode;
+}
+
+export type TagProps = JsxDivProps & BaseTagProps;
+
+export const TagContainer = styled('div', omitEmotionProps('size'))<WithSize>`
+  display: inline-flex;
+  align-items: center;
+  overflow: hidden;
+
+  background-color: ${(p) => clr(p.theme.tagColorBg)};
+  color: ${(p) => clr(p.theme.tagColorText)};
+
+  border-radius: ${(p) => p.theme.borderRadius}em;
+  padding: ${(p) => p.theme.tagPaddingVertical}em
+    ${(p) => p.theme.tagPaddingHorizontal}em;
+
+  ${sizeStyles};
+  ${transitionStyles('background-color')};
+`;
+
+const Content = styled.div`
+  ${ellipsisStyles};
+`;
+
+export const LeftAddon = styled.div`
+  display: inherit;
+  padding-right: ${(p) => p.theme.tagAddonPaddingHorizontal}em;
+`;
+
+export const RightAddon = styled.div`
+  display: inherit;
+  padding-left: ${(p) => p.theme.tagAddonPaddingHorizontal}em;
+`;
+
+/**
+ * The component to display a label, tag, or category.
+ */
+const Tag = forwardRef<HTMLDivElement, TagProps>(
+  ({ left, right, children, ...rest }, ref) => (
+    <TagContainer {...rest} ref={ref}>
+      {left && <LeftAddon>{left}</LeftAddon>}
+      <Content>{children}</Content>
+      {right && <RightAddon>{right}</RightAddon>}
+    </TagContainer>
+  )
+);
+
+Tag.displayName = 'Tag';
+
+export default Tag;

package/src/TagLink/index.tsx

@@ -0,0 +1,53 @@
+import styled from '@emotion/styled';
+import { clr } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef } from 'react';
+
+import { LinkProps, ReactRouterLinkProps } from '../Link';
+import { BaseTagProps, LeftAddon, RightAddon, TagContainer } from '../Tag';
+
+type JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;
+export type TagLinkProps = JsxAProps &
+  ReactRouterLinkProps &
+  Pick<LinkProps, 'as'> &
+  BaseTagProps;
+
+const StyledTagLink = styled(
+  TagContainer.withComponent('a'),
+  omitEmotionProps('as')
+)`
+  cursor: pointer;
+  text-decoration: none;
+
+  @media (hover: hover) {
+    &:hover,
+    &:focus {
+      background-color: ${(p) => clr(p.theme.tagColorBgHover)};
+    }
+  }
+`;
+
+/**
+ * The tag component with a link.
+ */
+const TagLink = forwardRef<HTMLAnchorElement, TagLinkProps>(
+  ({ left, right, as, onMouseDown = () => {}, children, ...rest }, ref) => (
+    <StyledTagLink
+      as={as}
+      onMouseDown={(e) => {
+        onMouseDown(e);
+        e.preventDefault();
+      }}
+      {...rest}
+      ref={ref}
+    >
+      {left && <LeftAddon>{left}</LeftAddon>}
+      {children}
+      {right && <RightAddon>{right}</RightAddon>}
+    </StyledTagLink>
+  )
+);
+
+TagLink.displayName = 'TagLink';
+
+export default TagLink;

package/src/TagList/index.tsx

@@ -0,0 +1,95 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { Down, Up } from '@os-design/icons';
+import { WithSize, sizeStyles } from '@os-design/styles';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef, useState } from 'react';
+import Button from '../Button';
+
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface TagListProps extends JsxDivProps, WithSize {
+  /**
+   * Whether the tag list is collapsible.
+   * @default false
+   */
+  collapsible?: boolean;
+}
+
+const collapsibleStyles = (p) =>
+  p.collapsible &&
+  !p.opened &&
+  css`
+    // The height of the tag
+    height: ${p.theme.lineHeight + p.theme.tagPaddingVertical * 2}em;
+  `;
+
+interface ContainerProps extends Pick<TagListProps, 'collapsible' | 'size'> {
+  opened: boolean;
+}
+const Container = styled(
+  'div',
+  omitEmotionProps('opened', 'collapsible', 'size')
+)<ContainerProps>`
+  display: flex;
+  overflow: hidden;
+  ${collapsibleStyles};
+  ${sizeStyles};
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  flex-grow: 1;
+
+  margin: ${(p) => -p.theme.tagListGap}em 0 0 ${(p) => -p.theme.tagListGap}em;
+  & > * {
+    margin: ${(p) => p.theme.tagListGap}em 0 0 ${(p) => p.theme.tagListGap}em;
+  }
+`;
+
+const Control = styled.div`
+  margin-left: 0.2em;
+`;
+
+const OpenButton = styled(Button)`
+  // The height of the tag
+  height: ${(p) => p.theme.lineHeight + p.theme.tagPaddingVertical * 2}em;
+  padding: 0 0.5em;
+`;
+
+/**
+ * The component to display a list of tags.
+ */
+const TagList = forwardRef<HTMLDivElement, TagListProps>(
+  ({ collapsible = false, size, children, ...rest }, ref) => {
+    const [opened, setOpened] = useState(false);
+
+    return (
+      <Container
+        opened={opened}
+        collapsible={collapsible}
+        size={size}
+        {...rest}
+        ref={ref}
+      >
+        <Content>{children}</Content>
+
+        {collapsible && (
+          <Control>
+            <OpenButton
+              type='ghost'
+              wide='never'
+              onClick={() => setOpened(!opened)}
+            >
+              {opened ? <Up /> : <Down />}
+            </OpenButton>
+          </Control>
+        )}
+      </Container>
+    );
+  }
+);
+
+TagList.displayName = 'TagList';
+
+export default TagList;

package/src/TagListSkeleton/index.tsx

@@ -0,0 +1,38 @@
+import React, { forwardRef } from 'react';
+import TagList, { TagListProps } from '../TagList';
+import TagSkeleton from '../TagSkeleton';
+
+export interface TagListSkeletonProps extends TagListProps {
+  /**
+   * The width of the tag skeleton.
+   * @default undefined
+   */
+  width?: string;
+  /**
+   * The number of tag skeletons.
+   * @default 3
+   */
+  tagsCount?: number;
+}
+
+let tagIndex = 0;
+
+/**
+ * Provides a tag list placeholder while a user waits for the content to load.
+ */
+const TagListSkeleton = forwardRef<HTMLDivElement, TagListSkeletonProps>(
+  ({ width, tagsCount = 3, ...rest }, ref) => (
+    <TagList {...rest} ref={ref}>
+      {Array(tagsCount)
+        .fill({})
+        .map(() => {
+          tagIndex += 1;
+          return <TagSkeleton key={tagIndex} width={width} />;
+        })}
+    </TagList>
+  )
+);
+
+TagListSkeleton.displayName = 'TagListSkeleton';
+
+export default TagListSkeleton;

package/src/TagSkeleton/index.tsx

@@ -0,0 +1,40 @@
+import styled from '@emotion/styled';
+
+import { sizeStyles, WithSize } from '@os-design/styles';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef } from 'react';
+
+import Skeleton, { SkeletonProps } from '../Skeleton';
+
+export interface TagSkeletonProps
+  extends Omit<SkeletonProps, 'width'>,
+    WithSize {
+  /**
+   * The width of the skeleton.
+   * @default 6em
+   */
+  width?: string;
+}
+
+type StyledTagSkeletonProps = Pick<TagSkeletonProps, 'width' | 'size'>;
+const StyledTagSkeleton = styled(
+  Skeleton,
+  omitEmotionProps('width', 'size')
+)<StyledTagSkeletonProps>`
+  width: ${(p) => p.width};
+  height: ${(p) => p.theme.lineHeight + p.theme.tagPaddingVertical * 2}em;
+  ${sizeStyles};
+`;
+
+/**
+ * Provides a tag placeholder while a user waits for the content to load.
+ */
+const TagSkeleton = forwardRef<HTMLDivElement, TagSkeletonProps>(
+  ({ width = '6em', ...rest }, ref) => (
+    <StyledTagSkeleton width={width} {...rest} ref={ref} />
+  )
+);
+
+TagSkeleton.displayName = 'TagSkeleton';
+
+export default TagSkeleton;