@os-design/core 1.0.199 → 1.0.200

package/src/InputPassword/index.tsx

@@ -0,0 +1,201 @@
+import styled from '@emotion/styled';
+
+import { Eye, EyeInvisible } from '@os-design/icons';
+import { ThemeOverrider, useTheme } from '@os-design/theming';
+import { useForwardedRef, useForwardedState } from '@os-design/utils';
+import getPasswordScore from '@os-team/password-score';
+import React, { forwardRef, useEffect, useMemo, useState } from 'react';
+import Button from '../Button';
+
+import Input, { InputProps } from '../Input';
+
+import Progress from '../Progress';
+import defaultLocale, { InputPasswordLocale } from './utils/defaultLocale';
+
+export interface InputPasswordProps extends Omit<InputProps, 'type'> {
+  /**
+   * Whether the password strength meter is visible.
+   * @default false
+   */
+  showStrengthMeter?: boolean;
+  /**
+   * The name of a weak, good, strong, and powerful password.
+   * Located to the right of the password strength meter.
+   * @default undefined
+   */
+  strengthNames?: Record<'weak' | 'good' | 'strong' | 'powerful', string>;
+  /**
+   * From what number of score the password is considered
+   * good, strong, and powerful.
+   * @default [30, 60, 80]
+   */
+  strengthThresholds?: [number, number, number];
+  /**
+   * The locale.
+   * @default undefined
+   */
+  locale?: InputPasswordLocale;
+  /**
+   * The input value.
+   * @default undefined
+   */
+  value?: string;
+  /**
+   * The default value.
+   * @default undefined
+   */
+  defaultValue?: string;
+  /**
+   * The change event handler.
+   * @default undefined
+   */
+  onChange?: (value: string) => void;
+}
+
+interface Selection {
+  start: number;
+  end: number;
+}
+
+const StrengthMeterProgress = styled(Progress)`
+  margin-top: 0.4em;
+`;
+
+/**
+ * The input for entering a password.
+ */
+const InputPassword = forwardRef<HTMLInputElement, InputPasswordProps>(
+  (
+    {
+      showStrengthMeter = false,
+      strengthNames,
+      strengthThresholds = [30, 60, 80],
+      locale = defaultLocale,
+      value,
+      defaultValue,
+      onChange = () => {},
+      onSelect = () => {},
+      disabled,
+      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 [invisible, setInvisible] = useState(true);
+    const { theme } = useTheme();
+
+    // Update the selection of the input when changing the invisible flag
+    useEffect(() => {
+      if (!inputRef.current) return;
+      inputRef.current.setSelectionRange(selection.start, selection.end);
+    }, [inputRef, selection, invisible]);
+
+    const score = useMemo(
+      () => getPasswordScore(forwardedValue || ''),
+      [forwardedValue]
+    );
+
+    const strength = useMemo(() => {
+      if (score >= strengthThresholds[2]) {
+        return {
+          name: 'powerful',
+          color: theme.inputPasswordColorPowerful,
+        };
+      }
+      if (score >= strengthThresholds[1]) {
+        return {
+          name: 'strong',
+          color: theme.inputPasswordColorStrong,
+        };
+      }
+      if (score >= strengthThresholds[0]) {
+        return {
+          name: 'good',
+          color: theme.inputPasswordColorGood,
+        };
+      }
+      return {
+        name: 'weak',
+        color: theme.inputPasswordColorWeak,
+      };
+    }, [
+      score,
+      strengthThresholds,
+      theme.inputPasswordColorPowerful,
+      theme.inputPasswordColorStrong,
+      theme.inputPasswordColorGood,
+      theme.inputPasswordColorWeak,
+    ]);
+
+    return (
+      <>
+        <Input
+          type={invisible ? 'password' : 'text'}
+          right={
+            <>
+              <Button
+                key='invisible-button'
+                type='ghost'
+                wide='never'
+                size='small'
+                disabled={disabled}
+                onClick={() => {
+                  setInvisible(!invisible);
+                  if (!inputRef.current) return;
+                  inputRef.current.focus();
+                }}
+                aria-label={invisible ? locale.showLabel : locale.hideLabel}
+              >
+                {invisible ? <EyeInvisible /> : <Eye />}
+              </Button>
+              {right}
+            </>
+          }
+          value={forwardedValue}
+          onChange={setForwardedValue}
+          onSelect={(e) => {
+            // Update the selection state
+            const { selectionStart, selectionEnd } = e.currentTarget;
+            setSelection({
+              start: selectionStart || 0,
+              end: selectionEnd || 0,
+            });
+            onSelect(e);
+          }}
+          disabled={disabled}
+          {...rest}
+          ref={mergedInputRef}
+        />
+        {showStrengthMeter && (
+          <ThemeOverrider
+            overrides={{
+              progressColorStroke: strength.color,
+              get progressColorStrokeSuccess() {
+                // eslint-disable-next-line react/no-this-in-sfc
+                return this.progressColorStroke;
+              },
+            }}
+          >
+            <StrengthMeterProgress
+              size='small'
+              height='0.25em'
+              percent={score}
+              text={strengthNames ? strengthNames[strength.name] : undefined}
+            />
+          </ThemeOverrider>
+        )}
+      </>
+    );
+  }
+);
+
+InputPassword.displayName = 'InputPassword';
+
+export default InputPassword;

package/src/InputPassword/utils/defaultLocale.ts

@@ -0,0 +1,11 @@
+export interface InputPasswordLocale {
+  showLabel: string;
+  hideLabel: string;
+}
+
+const defaultLocale: InputPasswordLocale = {
+  showLabel: 'Show password',
+  hideLabel: 'Hide password',
+};
+
+export default defaultLocale;

package/src/InputSearch/index.tsx

@@ -0,0 +1,111 @@
+import { keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
+import { CloseCircle, Search } from '@os-design/icons';
+import { ThemeOverrider } from '@os-design/theming';
+import { useForwardedRef, useForwardedState } from '@os-design/utils';
+import React, { forwardRef } from 'react';
+import Button from '../Button';
+import Input, { InputProps } from '../Input';
+import defaultLocale, { InputSearchLocale } from './utils/defaultLocale';
+
+export interface InputSearchProps
+  extends Omit<InputProps, 'type' | 'onChange'> {
+  /**
+   * The locale.
+   * @default undefined
+   */
+  locale?: InputSearchLocale;
+  /**
+   * The input value.
+   * @default undefined
+   */
+  value?: string;
+  /**
+   * The default value.
+   * @default undefined
+   */
+  defaultValue?: string;
+  /**
+   * The change event handler.
+   * @default undefined
+   */
+  onChange?: (value: string) => void;
+}
+
+const fadeIn = keyframes`
+  from { opacity: 0; }
+  to { opacity: 1; }
+`;
+
+const ClearButton = styled(Button)`
+  animation: ${fadeIn} ${(p) => p.theme.transitionDelay}ms;
+`;
+
+/**
+ * The search input.
+ */
+const InputSearch = forwardRef<HTMLInputElement, InputSearchProps>(
+  (
+    {
+      locale = defaultLocale,
+      value,
+      defaultValue,
+      onChange = () => {},
+      disabled,
+      left,
+      leftHasPadding = true,
+      right,
+      ...rest
+    },
+    ref
+  ) => {
+    const [inputRef, mergedInputRef] = useForwardedRef(ref);
+    const [forwardedValue, setForwardedValue] = useForwardedState({
+      value,
+      defaultValue,
+      onChange,
+    });
+
+    return (
+      <Input
+        type='text'
+        left={left || <Search key='search-icon' />}
+        leftHasPadding={leftHasPadding}
+        right={
+          <>
+            {!!forwardedValue && (
+              <ThemeOverrider overrides={{ buttonIconScaleFactor: 1.2 }}>
+                <ClearButton
+                  key='clear-button'
+                  type='ghost'
+                  wide='never'
+                  size='small'
+                  disabled={disabled}
+                  onClick={() => {
+                    setForwardedValue('');
+                    if (!inputRef.current) return;
+                    inputRef.current.focus();
+                  }}
+                  aria-label={locale.clearLabel}
+                >
+                  <CloseCircle />
+                </ClearButton>
+              </ThemeOverrider>
+            )}
+            {right}
+          </>
+        }
+        value={forwardedValue}
+        onChange={setForwardedValue}
+        role='searchbox'
+        disabled={disabled}
+        {...rest}
+        ref={mergedInputRef}
+      />
+    );
+  }
+);
+
+InputSearch.displayName = 'InputSearch';
+
+export default InputSearch;

package/src/InputSearch/utils/defaultLocale.ts

@@ -0,0 +1,9 @@
+export interface InputSearchLocale {
+  clearLabel: string;
+}
+
+const defaultLocale: InputSearchLocale = {
+  clearLabel: 'Clear',
+};
+
+export default defaultLocale;

package/src/InputSkeleton/index.tsx

@@ -0,0 +1,28 @@
+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 InputSkeletonProps = Omit<SkeletonProps, 'width'> & WithSize;
+
+const StyledInputSkeleton = styled(
+  Skeleton,
+  omitEmotionProps('size')
+)<WithSize>`
+  height: ${(p) => p.theme.baseHeight}em;
+  ${sizeStyles};
+`;
+
+/**
+ * Provides an input placeholder while a user waits for the content to load.
+ */
+const InputSkeleton = forwardRef<HTMLDivElement, InputSkeletonProps>(
+  (props, ref) => <StyledInputSkeleton width='100%' {...props} ref={ref} />
+);
+
+InputSkeleton.displayName = 'InputSkeleton';
+
+export default InputSkeleton;

package/src/Layout/LayoutContext.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+
+export interface LayoutContextProps {
+  /**
+   * Whether there is the navigation in the layout.
+   */
+  hasNavigation: boolean;
+  /**
+   * Whether there is the page header in the layout.
+   */
+  hasPageHeader: boolean;
+}
+
+const LayoutContext = React.createContext<LayoutContextProps>({
+  hasNavigation: false,
+  hasPageHeader: false,
+});
+
+LayoutContext.displayName = 'LayoutContext';
+
+export default LayoutContext;

package/src/Layout/index.tsx

@@ -0,0 +1,44 @@
+import React, { useMemo } from 'react';
+import LayoutContext from './LayoutContext';
+
+export interface LayoutProps {
+  /**
+   * Whether there is the navigation in the layout.
+   * @default false
+   */
+  hasNavigation?: boolean;
+  /**
+   * Whether there is the page header in the layout.
+   * @default false
+   */
+  hasPageHeader?: boolean;
+  /**
+   * The children.
+   * @default undefined
+   */
+  children?: React.ReactNode;
+}
+
+/**
+ * The layout of the page.
+ */
+const Layout: React.FC<LayoutProps> = ({
+  hasNavigation = false,
+  hasPageHeader = false,
+  children,
+}) => {
+  const contextValue = useMemo(
+    () => ({ hasNavigation, hasPageHeader }),
+    [hasNavigation, hasPageHeader]
+  );
+
+  return (
+    <LayoutContext.Provider value={contextValue}>
+      {children}
+    </LayoutContext.Provider>
+  );
+};
+
+Layout.displayName = 'Layout';
+
+export default Layout;

package/src/Link/index.tsx

@@ -0,0 +1,129 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import {
+  resetFocusStyles,
+  sizeStyles,
+  transitionStyles,
+  WithSize,
+} from '@os-design/styles';
+import { clr } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef } from 'react';
+
+export interface ReactRouterLinkProps {
+  to?: string;
+  replace?: boolean;
+}
+
+type JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;
+export interface LinkProps extends JsxAProps, ReactRouterLinkProps, WithSize {
+  /**
+   * Type of the underline styles.
+   * @default hover
+   */
+  underline?: 'hover' | 'always' | 'never';
+  /**
+   * The custom link component.
+   * For example, the Link from react-router-dom.
+   * @default undefined
+   */
+  as?: React.ElementType;
+}
+
+/**
+ * Sets base underline styles.
+ */
+const underlineBaseStyles = (p) => css`
+  position: relative;
+  display: inline-block;
+  padding-bottom: 0.1em;
+
+  &::after {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    content: '';
+    height: 0.125em;
+    background-color: ${clr(p.theme.linkColor)};
+  }
+`;
+
+/**
+ * Sets underline styles on hover.
+ */
+const underlineHoverStyles = (p) =>
+  p.underline === 'hover' &&
+  css`
+    @media (hover: hover) {
+      ${underlineBaseStyles(p)};
+
+      &::after {
+        width: 0;
+        opacity: 0;
+        ${transitionStyles('width', 'opacity')(p)};
+      }
+
+      &:hover::after,
+      &:focus::after {
+        width: 100%;
+        opacity: 1;
+      }
+    }
+  `;
+
+/**
+ * Sets underline styles always.
+ */
+const underlineAlwaysStyles = (p) =>
+  p.underline === 'always' &&
+  css`
+    ${underlineBaseStyles(p)};
+
+    &::after {
+      width: 100%;
+      opacity: 1;
+    }
+  `;
+
+const StyledLink = styled(
+  'a',
+  omitEmotionProps('size', 'underline', 'as')
+)<LinkProps>`
+  ${resetFocusStyles};
+
+  cursor: pointer;
+  text-decoration: none;
+  line-height: 1.2;
+
+  &,
+  &:active,
+  &:focus {
+    color: ${(p) => clr(p.theme.linkColor)};
+  }
+
+  ${underlineHoverStyles};
+  ${underlineAlwaysStyles};
+  ${sizeStyles};
+`;
+
+/**
+ * The link component to navigate between pages.
+ */
+const Link = forwardRef<HTMLAnchorElement, LinkProps>(
+  ({ underline = 'hover', as, onMouseDown = () => {}, ...rest }, ref) => (
+    <StyledLink
+      underline={underline}
+      as={as}
+      onMouseDown={(e) => {
+        onMouseDown(e);
+        e.preventDefault();
+      }}
+      {...rest}
+      ref={ref}
+    />
+  )
+);
+
+Link.displayName = 'Link';
+
+export default Link;

package/src/LinkButton/index.tsx

@@ -0,0 +1,100 @@
+import { css } from '@emotion/react';
+
+import styled from '@emotion/styled';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef } from 'react';
+
+import { ButtonProps, StyledButton } from '../Button';
+import ButtonContent from '../Button/ButtonContent';
+
+import useButtonColors from '../Button/utils/useButtonColors';
+
+import { LinkProps, ReactRouterLinkProps } from '../Link';
+
+type JsxAProps = Omit<JSX.IntrinsicElements['a'], 'type' | 'ref'>;
+export type LinkButtonProps = JsxAProps &
+  ReactRouterLinkProps &
+  Pick<LinkProps, 'as'> &
+  ButtonProps;
+
+const disabledStyles = (p) =>
+  p.disabled &&
+  css`
+    pointer-events: none;
+  `;
+
+const StyledLinkButton = styled(
+  StyledButton.withComponent('a'),
+  omitEmotionProps('as', 'disabled')
+)`
+  text-decoration: none;
+  display: inline-flex;
+  ${disabledStyles};
+`;
+
+/**
+ * The button that is rendered as the a tag.
+ */
+const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(
+  (
+    {
+      type = 'primary',
+      danger = false,
+      left,
+      right,
+      wide = 'default',
+      loading = false,
+      disabled = false,
+      size,
+      as,
+      onMouseDown = () => {},
+      onKeyDown = () => {},
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    const { buttonColors, loadingColors } = useButtonColors({
+      type,
+      danger,
+      disabled,
+    });
+
+    return (
+      <StyledLinkButton
+        btnType={type}
+        colors={buttonColors}
+        wide={wide}
+        loading={loading}
+        disabled={disabled || loading}
+        size={size}
+        as={as}
+        onMouseDown={(e) => {
+          onMouseDown(e);
+          e.preventDefault();
+        }}
+        onKeyDown={(e) => {
+          onKeyDown(e);
+          if (disabled || loading) e.preventDefault();
+        }}
+        aria-disabled={disabled || loading}
+        aria-busy={loading}
+        {...rest}
+        ref={ref}
+      >
+        <ButtonContent
+          left={left}
+          right={right}
+          loading={loading}
+          loadingColors={loadingColors}
+        >
+          {children}
+        </ButtonContent>
+      </StyledLinkButton>
+    );
+  }
+);
+
+LinkButton.displayName = 'LinkButton';
+
+export default LinkButton;

package/src/List/WindowScroller.tsx

@@ -0,0 +1,53 @@
+import { useEvent } from '@os-design/utils';
+
+import React, { useCallback, useEffect, useRef } from 'react';
+
+import {
+  disableBodyPointerEvents,
+  enableBodyPointerEventsAfterDelay,
+} from './utils/bodyPointerEvents';
+
+export interface ScrollPosition {
+  top: number;
+  left: number;
+}
+
+interface WindowScrollerProps {
+  onScroll?: (props: ScrollPosition) => void;
+  children?: React.ReactNode;
+}
+
+/**
+ * Specifies the number of milliseconds during which to disable pointer events while
+ * a scroll is in progress. This improves performance and makes scrolling smoother.
+ */
+export const DISABLE_BODY_POINTER_EVENTS_TIMEOUT = 150;
+
+const WindowScroller: React.FC<WindowScrollerProps> = ({
+  onScroll = () => {},
+  children,
+}) => {
+  const onScrollRef = useRef<WindowScrollerProps['onScroll']>();
+
+  useEffect(() => {
+    onScrollRef.current = onScroll;
+  }, [onScroll]);
+
+  const scrollListener = useCallback(() => {
+    disableBodyPointerEvents();
+    enableBodyPointerEventsAfterDelay(DISABLE_BODY_POINTER_EVENTS_TIMEOUT);
+    if (!onScrollRef.current) return;
+    onScrollRef.current({
+      top: window.pageYOffset,
+      left: window.pageXOffset,
+    });
+  }, []);
+
+  useEffect(() => () => enableBodyPointerEventsAfterDelay(0), []);
+  useEvent(document, 'scroll', scrollListener);
+
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return <>{children}</>;
+};
+
+export default WindowScroller;