@os-design/core 1.0.198 → 1.0.200

package/src/Input/index.tsx

@@ -0,0 +1,330 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { Loading } from '@os-design/icons';
+import {
+  resetFocusStyles,
+  sizeStyles,
+  transitionStyles,
+  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 getFocusableElements from './utils/getFocusableElements';
+
+type JsxInputProps = Omit<
+  JSX.IntrinsicElements['input'],
+  'value' | 'onChange' | 'size' | 'ref'
+>;
+export interface InputProps extends JsxInputProps, WithSize {
+  /**
+   * Type of the input.
+   * @default text
+   */
+  type?: JsxInputProps['type'];
+  /**
+   * 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 input is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Shows the loading status.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The ref of the input container.
+   * @default undefined
+   */
+  containerRef?: ForwardedRef<HTMLDivElement>;
+  /**
+   * The props of the input container.
+   * @default undefined
+   */
+  containerProps?: JSX.IntrinsicElements['div'];
+  /**
+   * The input value.
+   * @default undefined
+   */
+  value?: string;
+  /**
+   * The change event handler.
+   * @default undefined
+   */
+  onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;
+}
+
+const hoverStyles = (p) =>
+  !p.disabled &&
+  css`
+    @media (hover: hover) {
+      &:hover {
+        border-color: ${clr(p.theme.inputHoverColorBorder)};
+      }
+    }
+  `;
+
+const focusStyles = (p) =>
+  !p.disabled &&
+  css`
+    &:focus-within {
+      border-color: ${clr(p.theme.inputFocusColorBorder)};
+      box-shadow: 0 0 0 0.15em ${clr(p.theme.inputFocusColorShadow)};
+    }
+  `;
+
+const disabledStyles = (p) =>
+  p.disabled &&
+  css`
+    cursor: not-allowed;
+    color: ${clr(p.theme.inputDisabledColorText)};
+    background-color: ${clr(p.theme.inputDisabledColorBg)};
+    border-color: ${clr(p.theme.inputDisabledColorBorder)};
+
+    input,
+    textarea {
+      cursor: not-allowed;
+      &::placeholder {
+        color: ${clr(p.theme.inputDisabledColorPlaceholder)};
+      }
+    }
+  `;
+
+type InputContainerProps = Pick<InputProps, 'disabled' | 'size'>;
+export const InputContainer = styled(
+  'div',
+  omitEmotionProps('disabled', 'size')
+)<InputContainerProps>`
+  ${resetFocusStyles};
+
+  display: inline-flex;
+  width: 100%;
+  height: ${(p) => p.theme.baseHeight}em;
+  box-sizing: border-box;
+  background-color: ${(p) => clr(p.theme.inputColorBg)};
+
+  border: ${(p) => p.theme.inputBorderWidth}px solid
+    ${(p) => clr(p.theme.inputColorBorder)};
+  border-radius: ${(p) => p.theme.borderRadius}em;
+
+  ${hoverStyles};
+  ${focusStyles};
+  ${disabledStyles};
+  ${sizeStyles};
+  ${transitionStyles('border-color', 'box-shadow')};
+`;
+
+const notHasLeftStyles = (p) =>
+  !p.hasLeft &&
+  css`
+    padding-left: ${p.theme.inputPaddingHorizontal}em;
+  `;
+
+const notHasRightStyles = (p) =>
+  !p.hasRight &&
+  css`
+    padding-right: ${p.theme.inputPaddingHorizontal}em;
+  `;
+
+interface StyledInputProps {
+  hasLeft?: boolean;
+  hasRight?: boolean;
+}
+export const StyledInput = styled(
+  'input',
+  omitEmotionProps('hasLeft', 'hasRight')
+)<StyledInputProps>`
+  ${resetFocusStyles};
+  appearance: none;
+  border: none;
+  font-size: 1em;
+  flex: 1;
+  overflow: hidden;
+
+  color: ${(p) => clr(p.theme.inputColorText)};
+  background-color: transparent;
+
+  &::placeholder {
+    color: ${(p) => clr(p.theme.inputColorPlaceholder)};
+  }
+
+  ${notHasLeftStyles};
+  ${notHasRightStyles};
+`;
+
+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 basic input component.
+ */
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      type = 'text',
+      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 (
+      <InputContainer
+        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>
+        )}
+
+        <StyledInput
+          type={type}
+          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>
+        )}
+      </InputContainer>
+    );
+  }
+);
+
+Input.displayName = 'Input';
+
+export default Input;

package/src/Input/utils/getFocusableElements.ts

@@ -0,0 +1,8 @@
+const getFocusableElements = (element: ParentNode): HTMLElement[] =>
+  [
+    ...element.querySelectorAll<HTMLElement>(
+      'a, button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])'
+    ),
+  ].filter((el) => !el.hasAttribute('disabled'));
+
+export default getFocusableElements;

package/src/InputNumber/index.tsx

@@ -0,0 +1,208 @@
+import {
+  getNextCaret,
+  getNextState,
+  numberToFormattedString,
+  useGetCaretWithinValue,
+  useValidate,
+} from '@os-design/input-number-utils';
+import { useForwardedRef } from '@os-design/utils';
+import React, { forwardRef, useEffect, useMemo, useState } from 'react';
+import Input, { InputProps } from '../Input';
+import defaultLocale, { InputNumberLocale } from './utils/defaultLocale';
+
+export interface InputNumberProps
+  extends Omit<InputProps, 'type' | 'value' | 'onChange'> {
+  /**
+   * The minimum value.
+   * @default 0
+   */
+  min?: number;
+  /**
+   * The maximum value.
+   * @default 2147483647
+   */
+  max?: number;
+  /**
+   * The number of digits after the decimal point.
+   * @default 0
+   */
+  precision?: number;
+  /**
+   * The string before the number.
+   * @default undefined
+   */
+  prefix?: string;
+  /**
+   * The string after the number.
+   * @default undefined
+   */
+  suffix?: string;
+  /**
+   * The decimal separator.
+   * @default .
+   */
+  decimalSeparator?: '.' | ',';
+  /**
+   * The thousands separator.
+   * @default ' '
+   */
+  thousandsSeparator?: ' ' | '.' | ',' | null;
+  /**
+   * The locale.
+   * @default undefined
+   */
+  locale?: InputNumberLocale;
+  /**
+   * The input value.
+   * @default undefined
+   */
+  value?: number | null;
+  /**
+   * The change event handler.
+   * Returns null when the input value is empty.
+   * @default undefined
+   */
+  onChange?: (value: number | null) => void;
+}
+
+interface Selection {
+  start: number;
+  end: number;
+}
+
+/**
+ * The input for entering a number.
+ */
+const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
+  (
+    {
+      min = 0,
+      max = 2147483647,
+      precision = 0,
+      prefix = '',
+      suffix = '',
+      decimalSeparator = '.',
+      thousandsSeparator = ' ',
+      locale = defaultLocale,
+      value = null,
+      onChange = () => {},
+      onSelect = () => {},
+      onFocus = () => {},
+      ...rest
+    },
+    ref
+  ) => {
+    useValidate({
+      min,
+      max,
+      precision,
+      prefix,
+      suffix,
+      decimalSeparator,
+      thousandsSeparator,
+    });
+
+    const options = useMemo(
+      () => ({
+        min,
+        max,
+        precision,
+        prefix,
+        suffix,
+        decimalSeparator,
+        thousandsSeparator,
+      }),
+      [
+        min,
+        max,
+        precision,
+        prefix,
+        suffix,
+        decimalSeparator,
+        thousandsSeparator,
+      ]
+    );
+
+    const [inputRef, mergedInputRef] = useForwardedRef(ref);
+    const [valueString, setValueString] = useState<string>(
+      numberToFormattedString(value, options)
+    );
+    const [selection, setSelection] = useState<Selection>({ start: 0, end: 0 });
+    const getCaretWithinValue = useGetCaretWithinValue(prefix, suffix);
+
+    // Update the value
+    useEffect(() => {
+      setValueString(numberToFormattedString(value, options));
+    }, [value, options]);
+
+    // Update the selection
+    useEffect(() => {
+      if (!inputRef.current) return;
+      inputRef.current.setSelectionRange(selection.start, selection.end);
+    }, [inputRef, selection]);
+
+    return (
+      <Input
+        onSelect={(e) => {
+          // Update the selection state.
+          // Don't use `getCaretWithinValue` here to allow a user to copy
+          // the input value with a prefix and suffix.
+          const { selectionStart, selectionEnd } = e.currentTarget;
+          setSelection({ start: selectionStart || 0, end: selectionEnd || 0 });
+          onSelect(e);
+        }}
+        onFocus={(e) => {
+          // Move the caret to the end of the input value and before the suffix
+          setSelection({
+            start: getCaretWithinValue(valueString.length, valueString),
+            end: getCaretWithinValue(valueString.length, valueString),
+          });
+          onFocus(e);
+        }}
+        value={valueString}
+        onChange={(v, e) => {
+          // Get a new value as a string and number
+          const nextState = getNextState(v, options);
+
+          // Set the new string value in the input field
+          setValueString(nextState.valueString);
+
+          // Send the new numeric value in the onChange callback
+          onChange(nextState.valueNumber);
+
+          // Update the caret position
+          const nextCaret = getCaretWithinValue(
+            getNextCaret({
+              value: v,
+              prevValueString: valueString,
+              nextValueString: nextState.valueString,
+              prevCaret: selection.end,
+              deleteKeyPressed:
+                (e.nativeEvent as InputEvent).inputType ===
+                'deleteContentBackward',
+              options,
+            }),
+            nextState.valueString
+          );
+          setSelection({ start: nextCaret, end: nextCaret });
+        }}
+        role='spinbutton'
+        aria-valuenow={
+          value !== undefined && value !== null ? value : undefined
+        }
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuetext={valueString === '' ? locale.emptyLabel : undefined}
+        inputMode='decimal'
+        autoComplete='off'
+        autoCorrect='off'
+        {...rest}
+        ref={mergedInputRef}
+      />
+    );
+  }
+);
+
+InputNumber.displayName = 'InputNumber';
+
+export default InputNumber;

package/src/InputNumber/utils/defaultLocale.ts

@@ -0,0 +1,9 @@
+export interface InputNumberLocale {
+  emptyLabel: string;
+}
+
+const defaultLocale: InputNumberLocale = {
+  emptyLabel: 'Empty',
+};
+
+export default defaultLocale;