@os-design/core 1.0.199 → 1.0.200

package/src/TextArea/index.tsx

@@ -0,0 +1,231 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { Loading } from '@os-design/icons';
+import { WithSize } from '@os-design/styles';
+import { clr, ThemeOverrider } from '@os-design/theming';
+import { omitEmotionProps, useForwardedRef } from '@os-design/utils';
+import React, {
+  ChangeEvent,
+  FocusEventHandler,
+  ForwardedRef,
+  forwardRef,
+  KeyboardEventHandler,
+  useCallback,
+  useMemo,
+} from 'react';
+import { InputContainer, StyledInput } from '../Input';
+import getFocusableElements from '../Input/utils/getFocusableElements';
+
+type JsxTextAreaProps = Omit<
+  JSX.IntrinsicElements['textarea'],
+  'value' | 'onChange' | 'ref'
+>;
+export interface TextAreaProps extends JsxTextAreaProps, WithSize {
+  /**
+   * The component located on the left side.
+   * @default undefined
+   */
+  left?: React.ReactNode;
+  /**
+   * Adds padding to the left component.
+   * It can be useful when passing an icon or text in the left component.
+   * @default false
+   */
+  leftHasPadding?: boolean;
+  /**
+   * The component located on the right side.
+   * @default undefined
+   */
+  right?: React.ReactNode;
+  /**
+   * Adds padding to the right component.
+   * It can be useful when passing an icon or text in the right component.
+   * @default false
+   */
+  rightHasPadding?: boolean;
+  /**
+   * Whether the textarea is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Shows the loading status.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The ref of the textarea container.
+   * @default undefined
+   */
+  containerRef?: ForwardedRef<HTMLDivElement>;
+  /**
+   * The props of the textarea container.
+   * @default undefined
+   */
+  containerProps?: JSX.IntrinsicElements['div'];
+  /**
+   * The textarea value.
+   * @default undefined
+   */
+  value?: string;
+  /**
+   * The change event handler.
+   * @default undefined
+   */
+  onChange?: (value: string, e: ChangeEvent<HTMLTextAreaElement>) => void;
+}
+
+const TextAreaContainer = styled(InputContainer)`
+  height: ${(p) => p.theme.textAreaHeight}em;
+`;
+
+const TextAreaField = styled(StyledInput.withComponent('textarea'))`
+  padding-top: ${(p) => p.theme.textAreaPaddingVertical}em;
+  padding-bottom: ${(p) => p.theme.textAreaPaddingVertical}em;
+  line-height: ${(p) => p.theme.lineHeight};
+  resize: none;
+`;
+
+interface AddonProps {
+  hasPadding: boolean;
+}
+const Addon = styled('span', omitEmotionProps('hasPadding'))<AddonProps>`
+  display: flex;
+  align-items: center;
+  user-select: none;
+  color: ${(p) => clr(p.theme.inputColorPlaceholder)};
+
+  svg {
+    transform: scale(1.2);
+  }
+`;
+
+const LeftAddon = styled(Addon)`
+  padding-right: ${(p) => p.theme.inputAddonPaddingHorizontal}em;
+  ${(p) =>
+    p.hasPadding &&
+    css`
+      padding-left: ${p.theme.inputPaddingHorizontal}em;
+    `}
+`;
+
+const RightAddon = styled(Addon)`
+  padding-left: ${(p) => p.theme.inputAddonPaddingHorizontal}em;
+  ${(p) =>
+    p.hasPadding &&
+    css`
+      padding-right: ${p.theme.inputPaddingHorizontal}em;
+    `}
+`;
+
+/**
+ * The multiline input component.
+ */
+const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  (
+    {
+      left,
+      leftHasPadding = false,
+      right,
+      rightHasPadding = false,
+      disabled = false,
+      loading = false,
+      containerRef,
+      containerProps = {},
+      size,
+      value,
+      onChange = () => {},
+      ...rest
+    },
+    ref
+  ) => {
+    const [innerContainerRef, mergedContainerRef] =
+      useForwardedRef(containerRef);
+
+    const rightValue = useMemo(
+      () => (loading ? <Loading /> : right),
+      [loading, right]
+    );
+
+    const rightHasPaddingValue = useMemo(
+      () => (loading ? true : rightHasPadding),
+      [loading, rightHasPadding]
+    );
+
+    const onFocus = useCallback<FocusEventHandler>(
+      (e) => {
+        // Focus the next element if the container element was focused.
+        // The next element will be the input or button in the addon.
+        if (disabled || e.target !== innerContainerRef.current) return;
+        const focusableElements = getFocusableElements(
+          innerContainerRef.current
+        );
+        focusableElements[0].focus();
+      },
+      [disabled, innerContainerRef]
+    );
+
+    const onKeyDown = useCallback<KeyboardEventHandler>(
+      (e) => {
+        // Focus the previous element if the first element in the input
+        // container is focused and the Shift + Tab combination is pressed.
+        const focusableElements = getFocusableElements(document);
+        const inputFocusableElements = innerContainerRef.current
+          ? getFocusableElements(innerContainerRef.current)
+          : [];
+        const firstInputElementIsFocused =
+          inputFocusableElements[0] === document.activeElement;
+        if (firstInputElementIsFocused && e.key === 'Tab' && e.shiftKey) {
+          const inputContainerIndex = focusableElements.findIndex(
+            (el) => el === innerContainerRef.current
+          );
+          if (inputContainerIndex === 0) return;
+          const elementBeforeInputContainer =
+            focusableElements[inputContainerIndex - 1];
+          elementBeforeInputContainer.focus();
+        }
+      },
+      [innerContainerRef]
+    );
+
+    return (
+      <TextAreaContainer
+        disabled={disabled}
+        size={size}
+        tabIndex={!disabled ? 0 : -1}
+        onFocus={onFocus}
+        onKeyDown={onKeyDown}
+        ref={mergedContainerRef}
+        {...containerProps}
+      >
+        {left && (
+          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>
+            <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>
+          </ThemeOverrider>
+        )}
+
+        <TextAreaField
+          disabled={disabled}
+          hasLeft={!!left}
+          hasRight={!!right}
+          value={value || ''}
+          onChange={(e) => onChange(e.target.value, e)}
+          {...rest}
+          ref={ref}
+        />
+
+        {rightValue && (
+          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>
+            <RightAddon hasPadding={rightHasPaddingValue}>
+              {rightValue}
+            </RightAddon>
+          </ThemeOverrider>
+        )}
+      </TextAreaContainer>
+    );
+  }
+);
+
+TextArea.displayName = 'TextArea';
+
+export default TextArea;

package/src/TextAreaSkeleton/index.tsx

@@ -0,0 +1,20 @@
+import styled from '@emotion/styled';
+import React, { forwardRef } from 'react';
+import InputSkeleton, { InputSkeletonProps } from '../InputSkeleton';
+
+export type TextAreaSkeletonProps = InputSkeletonProps;
+
+const StyledTextAreaSkeleton = styled(InputSkeleton)`
+  height: ${(p) => p.theme.textAreaHeight}em;
+`;
+
+/**
+ * Provides a textarea placeholder while a user waits for the content to load.
+ */
+const TextAreaSkeleton = forwardRef<HTMLDivElement, TextAreaSkeletonProps>(
+  (props, ref) => <StyledTextAreaSkeleton {...props} ref={ref} />
+);
+
+TextAreaSkeleton.displayName = 'TextAreaSkeleton';
+
+export default TextAreaSkeleton;

package/src/ThemeSwitcher/index.tsx

@@ -0,0 +1,39 @@
+import { Moon, Sun } from '@os-design/icons';
+
+import { useTheme } from '@os-design/theming';
+import React, { forwardRef } from 'react';
+
+import Button, { ButtonProps } from '../Button';
+
+export type ThemeSwitcherProps = ButtonProps;
+
+/**
+ * The button to switch the current theme.
+ */
+const ThemeSwitcher = forwardRef<HTMLButtonElement, ThemeSwitcherProps>(
+  ({ onClick = () => {}, ...rest }, ref) => {
+    const { activeTheme, setActiveTheme } = useTheme();
+
+    return (
+      <Button
+        type='ghost'
+        wide='never'
+        onClick={(e) => {
+          setActiveTheme(activeTheme === 'light' ? 'dark' : 'light');
+          onClick(e);
+        }}
+        role='switch'
+        aria-checked={activeTheme === 'dark'}
+        aria-label='Dark theme'
+        {...rest}
+        ref={ref}
+      >
+        {activeTheme === 'light' ? <Moon /> : <Sun />}
+      </Button>
+    );
+  }
+);
+
+ThemeSwitcher.displayName = 'ThemeSwitcher';
+
+export default ThemeSwitcher;

package/src/TimePicker/index.tsx

@@ -0,0 +1,142 @@
+import { useTime } from '@os-design/time-picker-utils';
+import { useForwardedRef, useForwardedState } from '@os-design/utils';
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import Button from '../Button';
+import Input, { InputProps } from '../Input';
+
+export interface TimePickerProps
+  extends Omit<InputProps, 'type' | 'value' | 'defaultValue' | 'onChange'> {
+  /**
+   * The time notation.
+   * @default 12-hour
+   */
+  notation?: '12-hour' | '24-hour';
+  /**
+   * The selected date.
+   * @default undefined
+   */
+  value?: Date;
+  /**
+   * The default value.
+   * @default undefined
+   */
+  defaultValue?: Date;
+  /**
+   * The change event handler.
+   * @default undefined
+   */
+  onChange?: (value: Date) => void;
+}
+
+interface Selection {
+  start: number;
+  end: number;
+}
+
+/**
+ * The component to choose a time.
+ */
+const TimePicker = forwardRef<HTMLInputElement, TimePickerProps>(
+  (
+    {
+      notation = '12-hour',
+      value,
+      defaultValue,
+      onChange = () => {},
+      onSelect = () => {},
+      onKeyDown = () => {},
+      disabled = false,
+      right,
+      ...rest
+    },
+    ref
+  ) => {
+    const [inputRef, mergedInputRef] = useForwardedRef(ref);
+    const [forwardedValue, setForwardedValue] = useForwardedState({
+      value,
+      defaultValue,
+      onChange,
+    });
+    const [selection, setSelection] = useState<Selection>({ start: 0, end: 0 });
+
+    const { time, isPm, changePeriod, keyHandler } = useTime({
+      notation,
+      selection,
+      setSelection,
+      forwardedValue,
+      setForwardedValue,
+    });
+
+    const rightComponent = useMemo(() => {
+      if (notation !== '12-hour' && !right) return null;
+      return (
+        <>
+          {notation === '12-hour' && (
+            <Button
+              type='ghost'
+              wide='never'
+              size='small'
+              disabled={disabled}
+              onClick={changePeriod}
+            >
+              {isPm ? 'PM' : 'AM'}
+            </Button>
+          )}
+          {right}
+        </>
+      );
+    }, [changePeriod, disabled, isPm, notation, right]);
+
+    const keyDownHandler = useCallback(
+      (e) => {
+        keyHandler(e.key, e.metaKey);
+        onKeyDown(e);
+        e.preventDefault();
+      },
+      [keyHandler, onKeyDown]
+    );
+
+    // Update the selection
+    useEffect(() => {
+      if (!inputRef.current) return;
+      inputRef.current.setSelectionRange(selection.start, selection.end);
+    }, [inputRef, selection]);
+
+    const selectHandler = useCallback(
+      (e) => {
+        // Update the selection state.
+        const { selectionStart, selectionEnd } = e.currentTarget;
+        setSelection({ start: selectionStart || 0, end: selectionEnd || 0 });
+        onSelect(e);
+      },
+      [onSelect]
+    );
+
+    return (
+      <Input
+        type='text'
+        inputMode='decimal'
+        role='spinbutton'
+        minLength={5}
+        maxLength={5}
+        disabled={disabled}
+        value={time}
+        right={rightComponent}
+        onSelect={selectHandler}
+        onKeyDown={keyDownHandler}
+        {...rest}
+        ref={mergedInputRef}
+      />
+    );
+  }
+);
+
+TimePicker.displayName = 'TimePicker';
+
+export default TimePicker;

package/src/Video/index.tsx

@@ -0,0 +1,41 @@
+import styled from '@emotion/styled';
+
+import React, { forwardRef } from 'react';
+
+type JsxIFrameProps = Omit<JSX.IntrinsicElements['iframe'], 'ref'>;
+export type VideoProps = JsxIFrameProps;
+
+const Container = styled.div`
+  position: relative;
+  padding-bottom: 56.25%; // 16:9
+  height: 0;
+`;
+
+const IFrame = styled.iframe`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+`;
+
+/**
+ * The video player.
+ */
+const Video = forwardRef<HTMLIFrameElement, VideoProps>(
+  ({ id, ...rest }, ref) => (
+    <Container>
+      <IFrame
+        frameBorder={0}
+        allow='clipboard-write; autoplay'
+        allowFullScreen
+        {...rest}
+        ref={ref}
+      />
+    </Container>
+  )
+);
+
+Video.displayName = 'Video';
+
+export default Video;

package/src/index.ts

@@ -0,0 +1,125 @@
+export { default as Alert } from './Alert';
+export { default as Avatar } from './Avatar';
+export { default as AvatarSkeleton } from './AvatarSkeleton';
+export { default as Breadcrumb } from './Breadcrumb';
+export { default as BreadcrumbItem } from './BreadcrumbItem';
+export { default as Button } from './Button';
+export { default as Checkbox } from './Checkbox';
+export { default as CheckboxSkeleton } from './CheckboxSkeleton';
+export { default as DatePicker } from './DatePicker';
+export { default as Drawer } from './Drawer';
+export { default as Form } from './Form';
+export { default as FormDivider } from './FormDivider';
+export { default as FormItem } from './FormItem';
+export { default as Gallery } from './Gallery';
+export { default as GlobalStyles } from './GlobalStyles';
+export { default as HeaderSkeleton } from './HeaderSkeleton';
+export { default as Image } from './Image';
+export { default as ImageSkeleton } from './ImageSkeleton';
+export { default as Input } from './Input';
+export { default as InputNumber } from './InputNumber';
+export { default as InputPassword } from './InputPassword';
+export { default as InputSearch } from './InputSearch';
+export { default as InputSkeleton } from './InputSkeleton';
+export { default as Layout } from './Layout';
+export { default as Link } from './Link';
+export { default as LinkButton } from './LinkButton';
+export { default as List } from './List';
+export { default as ListItem } from './ListItem';
+export { default as ListItemActions } from './ListItemActions';
+export { default as ListItemLink } from './ListItemLink';
+export { default as ListSkeleton } from './ListSkeleton';
+export { default as LogoLink } from './LogoLink';
+export { default as message } from './message';
+export { default as Menu } from './Menu';
+export { default as MenuDivider } from './MenuDivider';
+export { default as MenuGroup } from './MenuGroup';
+export { default as MenuItem } from './MenuItem';
+export { default as Modal } from './Modal';
+export { default as Navigation } from './Navigation';
+export { default as NavigationItem } from './NavigationItem';
+export { default as PageContent } from './PageContent';
+export { default as PageHeader } from './PageHeader';
+export { default as PageHeaderInputSearch } from './PageHeaderInputSearch';
+export { default as PageHeaderSkeleton } from './PageHeaderSkeleton';
+export { default as ParagraphSkeleton } from './ParagraphSkeleton';
+export { default as Popover } from './Popover';
+export { default as Progress } from './Progress';
+export { default as RadioGroup } from './RadioGroup';
+export { default as Result } from './Result';
+export { default as ScrollButton } from './ScrollButton';
+export { default as Select } from './Select';
+export { default as Skeleton } from './Skeleton';
+export { default as Switch } from './Switch';
+export { default as SwitchSkeleton } from './SwitchSkeleton';
+export { default as Tag } from './Tag';
+export { default as TagLink } from './TagLink';
+export { default as TagList } from './TagList';
+export { default as TagListSkeleton } from './TagListSkeleton';
+export { default as TagSkeleton } from './TagSkeleton';
+export { default as TextArea } from './TextArea';
+export { default as TextAreaSkeleton } from './TextAreaSkeleton';
+export { default as ThemeSwitcher } from './ThemeSwitcher';
+export { default as Video } from './Video';
+
+export * from './Alert';
+export * from './Avatar';
+export * from './AvatarSkeleton';
+export * from './Breadcrumb';
+export * from './BreadcrumbItem';
+export * from './Button';
+export * from './Checkbox';
+export * from './CheckboxSkeleton';
+export * from './DatePicker';
+export * from './Drawer';
+export * from './Form';
+export * from './FormDivider';
+export * from './FormItem';
+export * from './Gallery';
+export * from './HeaderSkeleton';
+export * from './Image';
+export * from './ImageSkeleton';
+export * from './Input';
+export * from './InputNumber';
+export * from './InputPassword';
+export * from './InputSearch';
+export * from './InputSkeleton';
+export * from './Layout';
+export * from './Link';
+export * from './LinkButton';
+export * from './List';
+export * from './ListItem';
+export * from './ListItemActions';
+export * from './ListItemLink';
+export * from './ListSkeleton';
+export * from './LogoLink';
+export * from './Menu';
+export * from './MenuDivider';
+export * from './MenuGroup';
+export * from './MenuItem';
+export * from './Modal';
+export * from './Navigation';
+export * from './NavigationItem';
+export * from './PageContent';
+export * from './PageHeader';
+export * from './PageHeaderInputSearch';
+export * from './PageHeaderSkeleton';
+export * from './ParagraphSkeleton';
+export * from './Popover';
+export * from './Progress';
+export * from './RadioGroup';
+export * from './Result';
+export * from './ScrollButton';
+export * from './Select';
+export * from './Skeleton';
+export * from './Switch';
+export * from './SwitchSkeleton';
+export * from './Tag';
+export * from './TagLink';
+export * from './TagList';
+export * from './TagListSkeleton';
+export * from './TagSkeleton';
+export * from './TextArea';
+export * from './TextAreaSkeleton';
+export * from './ThemeSwitcher';
+export * from './Video';

package/src/message/AlertIcon.tsx

@@ -0,0 +1,50 @@
+import styled from '@emotion/styled';
+import { CheckCircle, CloseCircle, InfoCircle } from '@os-design/icons';
+import { Color, clr, light } from '@os-design/theming';
+
+import { omitEmotionProps } from '@os-design/utils';
+import React from 'react';
+
+interface AlertIconProps {
+  type: 'info' | 'success' | 'error';
+}
+
+interface ContainerProps {
+  iconColor: Color;
+}
+const Container = styled('i', omitEmotionProps('iconColor'))<ContainerProps>`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  margin-right: 0.3em;
+  font-size: 1.4em;
+  color: ${(p) => clr(p.iconColor)};
+`;
+
+const AlertIcon: React.FC<AlertIconProps> = ({ type }) => {
+  const { Icon, iconColor } = {
+    info: {
+      Icon: InfoCircle,
+      iconColor: light.alertInfoColorIcon,
+    },
+    success: {
+      Icon: CheckCircle,
+      iconColor: light.alertSuccessColorIcon,
+    },
+    error: {
+      Icon: CloseCircle,
+      iconColor: light.alertErrorColorIcon,
+    },
+  }[type];
+
+  return (
+    <Container iconColor={iconColor}>
+      <Icon />
+    </Container>
+  );
+};
+
+AlertIcon.displayName = 'AlertIcon';
+
+export default AlertIcon;