@fibery/ui-kit 1.35.0 → 1.36.1

package/src/number-input/number-inline-input-with-autosize.tsx

@@ -0,0 +1,156 @@
+import {css, cx} from "@linaria/core";
+import {useCallback, useMemo, useRef, useState} from "react";
+import {formatValue, getStep, parseValue} from "./index";
+import _ from "lodash";
+import {add, sub} from "./decimal";
+import InputNumber from "rc-input-number";
+import {StepButton, ValueWithStepperWrapper} from "./step-button";
+import {stopPropagation} from "@fibery/react/src/stop-propagation";
+import {UnitPrimitive} from "../unit/primitive";
+import {Stack} from "./stack";
+import {hiddenCss, inputStyle, textInlineStyle} from "./styles";
+import {invalidInputStyle} from "./edit-unit-styles";
+
+const invalidCss = css``;
+
+const inputCss = css`
+  position: relative;
+  min-width: 36px;
+
+  input {
+    ${{...inputStyle, ...textInlineStyle}}
+  }
+
+  & .rc-input-number-input-wrap {
+    display: grid;
+  }
+
+  & .step-button {
+    z-index: 1;
+  }
+
+  &.${invalidCss} {
+    input {
+      ${invalidInputStyle}
+    }
+  }
+`;
+
+export const NumberInlineInputWithAutosize = ({
+  value,
+  numberFormat,
+  numberPrecision,
+  format = _.identity,
+  onFocus,
+  onBlur,
+  onChange,
+  onKeyDown,
+  autoFocus,
+  placeholder,
+  invalid,
+  ...rest
+}: {
+  value: string | number | null;
+  numberFormat: "Number" | "Money" | "Percent";
+  format?: (value: string | number) => string;
+  numberPrecision: number;
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  onChange: (value: string | number) => void;
+  decimalSeparator?: string;
+  placeholder?: string;
+  autoFocus: boolean;
+  style?: object;
+  width?: number;
+  invalid?: boolean;
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const handleFocus: React.FocusEventHandler<HTMLInputElement> = useCallback(
+    (e) => {
+      if (onFocus) {
+        onFocus(e);
+      }
+      setIsEditing(true);
+    },
+    [onFocus, setIsEditing]
+  );
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(
+    (e) => {
+      if (onBlur && e.relatedTarget) {
+        onBlur(e);
+      }
+      setIsEditing(false);
+    },
+    [onBlur]
+  );
+
+  const handleChange = useCallback(
+    (value: string | number | null) => {
+      if (onChange) {
+        onChange(parseValue(value, numberFormat, numberPrecision));
+      }
+    },
+    [onChange, numberFormat, numberPrecision]
+  );
+
+  const handleStep = useCallback(
+    (
+      newValue: string | number,
+      {
+        type,
+      }: {
+        type: "up" | "down";
+      }
+    ) => {
+      inputRef.current?.focus();
+      const step = getStep(numberFormat);
+      if (type === "up") {
+        onChange(add(value, step));
+      } else {
+        onChange(sub(value, step));
+      }
+    },
+    [numberFormat, onChange, value]
+  );
+
+  const formattedValue = useMemo(() => {
+    return formatValue(value, isEditing, numberFormat, format);
+  }, [value, isEditing, numberFormat, format]);
+
+  return (
+    <Stack
+      bottom={
+        <div className={hiddenCss}>
+          <UnitPrimitive invalid={invalid}>
+            <ValueWithStepperWrapper>{formattedValue}</ValueWithStepperWrapper>
+          </UnitPrimitive>
+        </div>
+      }
+      top={
+        <InputNumber
+          // Allow input to shrink (otherwise it has size 20 by default)
+          size={1}
+          autoFocus={autoFocus}
+          ref={inputRef}
+          value={formattedValue}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          onChange={handleChange}
+          onKeyDown={onKeyDown}
+          type="text"
+          placeholder={placeholder}
+          upHandler={<StepButton className="step-button" type={"up"} />}
+          downHandler={<StepButton className="step-button" type={"down"} />}
+          onStep={handleStep}
+          onClick={stopPropagation}
+          {...rest}
+          className={cx(inputCss, invalid && invalidCss)}
+        />
+      }
+    />
+  );
+};

package/src/number-input/number-input.tsx

@@ -0,0 +1,133 @@
+import {textStyles, themeVars} from "../../src/design-system";
+import {css} from "@linaria/core";
+import {ComponentProps, forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState} from "react";
+import {formatValue, getStep, parseValue} from "./index";
+import _ from "lodash";
+import {add, sub} from "./decimal";
+import InputNumber from "rc-input-number";
+import {StepButton} from "./step-button";
+import {stopPropagation} from "@fibery/react/src/stop-propagation";
+import cx from "classnames";
+import {invalidInputStyle} from "./edit-unit-styles";
+
+const invalidCss = css``;
+
+const inputContainerCss = css`
+  position: relative;
+  input {
+    background-color: ${themeVars.transparent};
+    ${textStyles.regular}
+    outline: none;
+    width: 100%;
+    border: none;
+    text-align: right;
+    &::placeholder {
+      color: ${themeVars.inputPlaceholderTextColor};
+    }
+  }
+
+  &.${invalidCss} {
+    ${invalidInputStyle}
+  }
+`;
+
+type NumberFormat = "Number" | "Money" | "Percent";
+
+type Props = ComponentProps<typeof InputNumber> & {
+  value: string | number | null;
+  numberFormat: NumberFormat;
+  format?: (value: string | number) => string;
+  numberPrecision: number;
+  placeholder: string;
+  autoFocus: boolean;
+  valueWrapperClassName?: string;
+  decimalSeparator?: string;
+  invalid?: boolean;
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  onChange: (value: string | number | null) => void;
+};
+
+export const NumberInlineInput = forwardRef<HTMLInputElement, Props>(
+  (
+    {
+      value,
+      numberFormat,
+      numberPrecision,
+      format = _.identity,
+      onFocus,
+      onBlur,
+      onChange,
+      onKeyDown,
+      autoFocus,
+      placeholder,
+      valueWrapperClassName,
+      invalid,
+      ...rest
+    },
+    ref
+  ) => {
+    const inputRef = useRef<HTMLInputElement | null>(null);
+    const [inputContainerRef, setInputContainerRef] = useState<HTMLDivElement | null>(null);
+
+    useImperativeHandle(ref, () => inputRef.current!, []);
+
+    const handleBlur = useCallback(
+      (e: React.FocusEvent<HTMLInputElement>) => {
+        if (e.relatedTarget && inputContainerRef && !inputContainerRef.contains(e.relatedTarget)) {
+          onBlur?.(e);
+        }
+      },
+      [inputContainerRef, onBlur]
+    );
+
+    const handleChange = useCallback(
+      (value: string | number | null) => {
+        if (onChange) {
+          onChange(parseValue(value, numberFormat, numberPrecision));
+        }
+      },
+      [onChange, numberFormat, numberPrecision]
+    );
+
+    const handleStep = useCallback(
+      (newValue: string | number, {type}: {type: "up" | "down"}) => {
+        inputRef.current?.focus();
+        const step = getStep(numberFormat);
+        if (type === "up") {
+          onChange(add(value, step));
+        } else {
+          onChange(sub(value, step));
+        }
+      },
+      [numberFormat, onChange, value]
+    );
+
+    const formattedValue = useMemo(() => {
+      const isEditing = true;
+      return formatValue(value, isEditing, numberFormat, format);
+    }, [value, numberFormat, format]);
+
+    return (
+      <div ref={setInputContainerRef} className={cx(valueWrapperClassName, inputContainerCss, invalid && invalidCss)}>
+        <InputNumber
+          autoFocus={autoFocus}
+          ref={inputRef}
+          value={formattedValue}
+          type="text"
+          placeholder={placeholder}
+          upHandler={<StepButton type={"up"} />}
+          downHandler={<StepButton type={"down"} />}
+          onFocus={onFocus}
+          onBlur={handleBlur}
+          onChange={handleChange}
+          onKeyDown={onKeyDown}
+          onStep={handleStep}
+          onClick={stopPropagation}
+          {...rest}
+        />
+      </div>
+    );
+  }
+);

package/src/number-input/stack.tsx

@@ -0,0 +1,25 @@
+import {css, cx} from "@linaria/core";
+import {ReactNode} from "react";
+
+const wrapperCss = css`
+  display: grid;
+  & > * {
+    /* Place the elements on top of each other and have them both sized based on the tallest one's height */
+    grid-area: 1 / 1 / 2 / 2;
+  }
+`;
+
+type Props = {
+  className?: string;
+  bottom: ReactNode;
+  top: ReactNode;
+};
+
+export const Stack = ({className, bottom, top}: Props) => {
+  return (
+    <div className={cx(className, wrapperCss)}>
+      {bottom}
+      {top}
+    </div>
+  );
+};

package/src/number-input/step-button.tsx

@@ -0,0 +1,73 @@
+import {border, themeVars} from "../../src/design-system";
+import {css, cx} from "@linaria/core";
+import {stopPropagation} from "@fibery/react/src/stop-propagation";
+
+type StepType = "up" | "down";
+export const stepButtonWidth = 16;
+
+type Props = {
+  className?: string;
+  type: StepType;
+};
+
+export const StepButton = ({className, type}: Props) => {
+  return (
+    <div
+      className={cx(
+        className,
+        css`
+          position: absolute;
+          display: flex;
+          right: 1px;
+          width: ${stepButtonWidth}px;
+          padding: 0;
+          border: 0;
+          cursor: pointer;
+          line-height: 0;
+          background-color: ${themeVars.inputBgColor};
+          align-items: center;
+          justify-content: center;
+
+          & polygon {
+            fill: ${themeVars.disabledTextColor};
+          }
+
+          &:hover polygon {
+            fill: ${themeVars.textColor};
+          }
+        `
+      )}
+      style={
+        type === "up"
+          ? {top: 1, bottom: "50%", borderTopRightRadius: border.radius4}
+          : {
+              bottom: 1,
+              top: "50%",
+              borderBottomRightRadius: border.radius4,
+            }
+      }
+      onClick={stopPropagation}
+    >
+      <svg
+        width={8}
+        height={4}
+        viewBox="0 0 8 4"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        style={type === "up" ? {marginTop: 1} : {marginBottom: 1}}
+      >
+        <polygon points={type === "up" ? `0,4 4,0 8,4` : `0,0 4,4 8,0`} />
+      </svg>
+    </div>
+  );
+};
+
+export const ValueWithStepperWrapper = ({children}: {children: React.ReactNode}) => (
+  <span
+    className={css`
+      margin-right: ${stepButtonWidth}px;
+    `}
+  >
+    {children}
+  </span>
+);

package/src/number-input/styles.ts

@@ -0,0 +1,50 @@
+import {css} from "@linaria/core";
+import {border, space, textStyles, themeVars} from "../design-system";
+
+export const hiddenCss = css`
+  visibility: hidden;
+`;
+
+export const inputStyle = {
+  position: "relative",
+  backgroundColor: themeVars.inputBgColor,
+  border: "none",
+  boxShadow: "inset 0 0 0 1px rgb(0 0 0 / 4%)",
+  borderRadius: border.radius6,
+  ...textStyles.small,
+  padding: `${space.s2}px ${space.s6}px`,
+  margin: 0,
+  outline: "none",
+
+  lineHeight: `20px`,
+
+  "&::placeholder": {
+    color: themeVars.inputPlaceholderTextColor,
+  },
+
+  "&:focus": {
+    boxShadow: `${themeVars.inputBorderFocusColor} inset`,
+  },
+};
+
+export const inputCss = css`
+  ${inputStyle}
+`;
+
+export const textInlineStyle = {
+  textWrap: "normal",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+};
+
+export const textInlineCss = css`
+  ${textInlineStyle}
+`;
+
+export const textAreaCss = css`
+  display: block;
+  resize: none;
+  white-space: pre-wrap;
+  overflow: hidden;
+`;

package/src/number-input/text-area-with-autosize.tsx

@@ -0,0 +1,91 @@
+import {CSSProperties, useCallback, useRef} from "react";
+import {stopPropagation} from "@fibery/react/src/stop-propagation";
+import {hiddenCss, inputCss, textAreaCss} from "./styles";
+import {css, cx} from "@linaria/core";
+import {Stack} from "./stack";
+import {invalidInputClass} from "./edit-unit-styles";
+
+export const TextAreaWithAutosize = ({
+  value,
+  onFocus,
+  onBlur,
+  onChange,
+  onKeyDown,
+  autoFocus,
+  placeholder,
+  invalid,
+  ...rest
+}: {
+  value: string | null;
+  onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  onChange: (value: string | number) => void;
+  placeholder: string;
+  autoFocus: boolean;
+  style?: CSSProperties;
+  width?: number;
+  invalid?: boolean;
+}) => {
+  const handleFocus: React.FocusEventHandler<HTMLTextAreaElement> = useCallback(
+    (e) => {
+      if (onFocus) {
+        onFocus(e);
+      }
+    },
+    [onFocus]
+  );
+
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const initialValue = useRef(value);
+
+  const handleBlur: React.FocusEventHandler<HTMLTextAreaElement> = useCallback(
+    (e) => {
+      if (onBlur) {
+        onBlur(e);
+      }
+    },
+    [onBlur]
+  );
+
+  const handleChange: React.ChangeEventHandler<HTMLTextAreaElement> = useCallback(
+    (e) => {
+      if (onChange) {
+        onChange(e.target.value);
+      }
+    },
+    [onChange]
+  );
+
+  return (
+    <Stack
+      className={css`
+        width: 100%;
+      `}
+      bottom={
+        <div className={cx(inputCss, textAreaCss, hiddenCss)}>
+          {value === null || value === "" || initialValue.current === null || initialValue.current === ""
+            ? placeholder
+            : value}
+        </div>
+      }
+      top={
+        <textarea
+          // Allow textarea to shrink to 1 row if there is only 1 row (otherwise it has min 2 by default)
+          rows={1}
+          autoFocus={autoFocus}
+          ref={inputRef}
+          value={value || ""}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          onChange={handleChange}
+          onKeyDown={onKeyDown}
+          placeholder={placeholder}
+          onClick={stopPropagation}
+          {...rest}
+          className={cx(inputCss, textAreaCss, invalid && invalidInputClass)}
+        />
+      }
+    />
+  );
+};

package/src/number-input/text-inline-input-with-autosize.tsx

@@ -0,0 +1,60 @@
+import {CSSProperties, useRef} from "react";
+import {stopPropagation} from "@fibery/react/src/stop-propagation";
+import {Stack} from "./stack";
+import {cx} from "@linaria/core";
+import {hiddenCss, inputCss, textInlineCss} from "./styles";
+import {invalidInputClass} from "./edit-unit-styles";
+
+export const TextInlineInputWithAutosize = ({
+  value,
+  onFocus,
+  onBlur,
+  onChange,
+  onKeyDown,
+  autoFocus,
+  placeholder,
+  invalid,
+  ...rest
+}: {
+  value: string | null;
+  onFocus?: React.FocusEventHandler<HTMLInputElement>;
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+  onChange: (value: string | number) => void;
+  placeholder: string;
+  autoFocus: boolean;
+  style?: CSSProperties;
+  width?: number;
+  invalid?: boolean;
+}) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  let hiddenValue = placeholder || "";
+  if (value && value.length > hiddenValue.length - 1) {
+    hiddenValue = value;
+  }
+
+  return (
+    <Stack
+      bottom={<div className={cx(inputCss, textInlineCss, hiddenCss)}>{hiddenValue}</div>}
+      top={
+        <input
+          // Allow input to shrink (otherwise it has size 20 by default)
+          size={1}
+          autoFocus={autoFocus}
+          ref={inputRef}
+          value={value || ""}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          onChange={(e) => onChange?.(e.target.value)}
+          onKeyDown={onKeyDown}
+          type="text"
+          placeholder={placeholder}
+          onClick={stopPropagation}
+          {...rest}
+          className={cx(inputCss, invalid && invalidInputClass)}
+        />
+      }
+    />
+  );
+};