@noya-app/noya-designsystem 0.0.14 → 0.0.16

package/src/components/InputField.tsx

@@ -1,6 +1,7 @@
-import { CaretDownIcon } from '@noya-app/noya-icons';
-import { memoize } from '@noya-app/noya-utils';
-import { Property } from 'csstype';
+import { CaretDownIcon } from "@noya-app/noya-icons";
+import { memoize } from "@noya-app/noya-utils";
+import { assignRef } from "@noya-app/react-utils";
+import { Property } from "csstype";
 import React, {
   Children,
   createContext,
@@ -14,19 +15,20 @@ import React, {
   useEffect,
   useLayoutEffect,
   useMemo,
-} from 'react';
-import styled from 'styled-components';
-import handleNudge from '../utils/handleNudge';
-import { Button } from './Button';
-import { DropdownMenu } from './DropdownMenu';
-import { MenuItem } from './internal/Menu';
-import TextInput, { TextInputProps } from './internal/TextInput';
-import { Popover } from './Popover';
-import { Stack } from './Stack';
+  useRef,
+} from "react";
+import styled from "styled-components";
+import handleNudge from "../utils/handleNudge";
+import { Button } from "./Button";
+import { DropdownMenu } from "./DropdownMenu";
+import { MenuItem } from "./internal/Menu";
+import TextInput, { TextInputProps } from "./internal/TextInput";
+import { Popover } from "./Popover";
+import { Stack } from "./Stack";
 
-type LabelPosition = 'start' | 'end';
+type LabelPosition = "start" | "end";
 
-export type InputFieldSize = 'small' | 'medium' | 'large';
+export type InputFieldSize = "small" | "medium" | "large";
 
 type InputFieldContextValue = {
   labelPosition: LabelPosition;
@@ -38,14 +40,15 @@ type InputFieldContextValue = {
   onFocusChange: (isFocused: boolean) => void;
   inputRef?: ForwardedRef<HTMLInputElement>;
   setInputRef?: (ref: ForwardedRef<HTMLInputElement>) => void;
+  setLabelWidth?: (width: number) => void;
 };
 
 const InputFieldContext = createContext<InputFieldContextValue>({
-  labelPosition: 'end',
+  labelPosition: "end",
   labelSize: 6,
   hasLabel: false,
   hasDropdown: false,
-  size: 'medium',
+  size: "medium",
   isFocused: false,
   onFocusChange: () => {},
 });
@@ -60,58 +63,79 @@ const LabelContainer = styled.label<{
   hasDropdown: boolean;
 }>(({ theme, labelPosition, hasDropdown, pointerEvents }) => ({
   color: theme.colors.textDisabled,
-  position: 'absolute',
+  position: "absolute",
   top: 0,
-  right: labelPosition === 'end' ? 0 : undefined,
+  right: labelPosition === "end" ? 0 : undefined,
   bottom: 0,
-  left: labelPosition === 'start' ? 0 : undefined,
-  display: 'flex',
-  alignItems: 'center',
+  left: labelPosition === "start" ? 0 : undefined,
+  display: "flex",
+  alignItems: "center",
   pointerEvents,
-  fontWeight: 'bold',
-  fontSize: '60%',
-  userSelect: 'none',
-  ...(labelPosition === 'start'
-    ? { justifyContent: 'flex-start', paddingLeft: '6px' }
+  fontWeight: "bold",
+  fontSize: "60%",
+  userSelect: "none",
+  ...(labelPosition === "start"
+    ? { justifyContent: "flex-start", paddingLeft: "6px" }
     : {
-        justifyContent: 'flex-end',
-        paddingRight: hasDropdown ? '16px' : '6px',
+        justifyContent: "flex-end",
+        paddingRight: hasDropdown ? "16px" : "6px",
       }),
 }));
 
 interface InputFieldLabelProps {
   children?: ReactNode;
   pointerEvents?: Property.PointerEvents;
+  style?: React.CSSProperties;
 }
 
-const InputFieldLabel = memo(function InputFieldLabel({
-  children = false,
-  pointerEvents = 'none',
-}: InputFieldLabelProps) {
-  const { labelPosition, hasDropdown } = useContext(InputFieldContext);
+const InputFieldLabel = memo(
+  forwardRef(function InputFieldLabel(
+    { children = false, pointerEvents = "none", style }: InputFieldLabelProps,
+    forwardedRef: ForwardedRef<HTMLLabelElement>
+  ) {
+    const { labelPosition, hasDropdown, setLabelWidth } =
+      useContext(InputFieldContext);
 
-  return (
-    <LabelContainer
-      pointerEvents={pointerEvents}
-      labelPosition={labelPosition}
-      hasDropdown={hasDropdown}
-    >
-      {children}
-    </LabelContainer>
-  );
-});
+    const ref = useRef<HTMLLabelElement | null>(null);
+
+    useLayoutEffect(() => {
+      if (!setLabelWidth) return;
+
+      const width = ref.current?.getBoundingClientRect().width;
+
+      if (!width) return;
+
+      setLabelWidth(width);
+    }, [setLabelWidth]);
+
+    return (
+      <LabelContainer
+        ref={(element) => {
+          ref.current = element;
+          assignRef(forwardedRef, element);
+        }}
+        pointerEvents={pointerEvents}
+        labelPosition={labelPosition}
+        hasDropdown={hasDropdown}
+        style={style}
+      >
+        {children}
+      </LabelContainer>
+    );
+  })
+);
 
 /* ----------------------------------------------------------------------------
  * Dropdown
  * ------------------------------------------------------------------------- */
 
 const DropdownContainer = styled.span(({ theme }) => ({
-  position: 'absolute',
+  position: "absolute",
   top: 0,
   right: 0,
   bottom: 0,
-  display: 'flex',
-  flexDirection: 'column',
+  display: "flex",
+  flexDirection: "column",
 }));
 
 interface InputFieldDropdownProps<T extends string> {
@@ -128,10 +152,10 @@ const InputFieldDropdownMenu = memo(function InputFieldDropdownMenu<
 
   const contentStyle = useMemo(
     () => ({
-      margin: '-4px 0',
-      minHeight: size === 'small' ? '15px' : undefined,
+      margin: "-4px 0",
+      minHeight: size === "small" ? "15px" : undefined,
     }),
-    [size],
+    [size]
   );
 
   return (
@@ -153,10 +177,10 @@ const InputFieldDropdownMenu = memo(function InputFieldDropdownMenu<
 
 const ButtonContainer = styled.span<{ size: InputFieldSize }>(
   ({ theme, size }) => ({
-    position: 'absolute',
-    right: size === 'large' ? '9px' : size === 'medium' ? '4px' : '2px',
-    top: size === 'large' ? '8px' : size === 'medium' ? '4px' : '2px',
-  }),
+    position: "absolute",
+    right: size === "large" ? "9px" : size === "medium" ? "4px" : "2px",
+    top: size === "large" ? "8px" : size === "medium" ? "4px" : "2px",
+  })
 );
 
 const InputFieldButton = memo(function InputFieldButton({
@@ -170,7 +194,7 @@ const InputFieldButton = memo(function InputFieldButton({
 
   const defaultHandleClick = useCallback(
     (event: React.MouseEvent) => {
-      if (inputRef && typeof inputRef !== 'function') {
+      if (inputRef && typeof inputRef !== "function") {
         inputRef.current?.focus();
         // Select all text
         inputRef.current?.setSelectionRange(0, inputRef.current.value.length);
@@ -179,7 +203,7 @@ const InputFieldButton = memo(function InputFieldButton({
       event.preventDefault();
       event.stopPropagation();
     },
-    [inputRef],
+    [inputRef]
   );
 
   const handlePointerDown = useCallback((event: React.PointerEvent) => {
@@ -209,19 +233,19 @@ const createCrossSVGString = memoize(
   (color: string) =>
     `<svg width='15' height='15' viewBox='0 0 15 15' fill='${color}' xmlns='http://www.w3.org/2000/svg'>
       <path d='M0.877075 7.49988C0.877075 3.84219 3.84222 0.877045 7.49991 0.877045C11.1576 0.877045 14.1227 3.84219 14.1227 7.49988C14.1227 11.1575 11.1576 14.1227 7.49991 14.1227C3.84222 14.1227 0.877075 11.1575 0.877075 7.49988ZM7.49991 1.82704C4.36689 1.82704 1.82708 4.36686 1.82708 7.49988C1.82708 10.6329 4.36689 13.1727 7.49991 13.1727C10.6329 13.1727 13.1727 10.6329 13.1727 7.49988C13.1727 4.36686 10.6329 1.82704 7.49991 1.82704ZM9.85358 5.14644C10.0488 5.3417 10.0488 5.65829 9.85358 5.85355L8.20713 7.49999L9.85358 9.14644C10.0488 9.3417 10.0488 9.65829 9.85358 9.85355C9.65832 10.0488 9.34173 10.0488 9.14647 9.85355L7.50002 8.2071L5.85358 9.85355C5.65832 10.0488 5.34173 10.0488 5.14647 9.85355C4.95121 9.65829 4.95121 9.3417 5.14647 9.14644L6.79292 7.49999L5.14647 5.85355C4.95121 5.65829 4.95121 5.3417 5.14647 5.14644C5.34173 4.95118 5.65832 4.95118 5.85358 5.14644L7.50002 6.79289L9.14647 5.14644C9.34173 4.95118 9.65832 4.95118 9.85358 5.14644Z' fill-rule='evenodd' clip-rule='evenodd'></path>
-    </svg>`,
+    </svg>`
 );
 
-type InputFieldVariant = 'normal' | 'bare';
+type InputFieldVariant = "normal" | "bare";
 
 const ignoredProps = new Set([
-  'labelPosition',
-  'labelSize',
-  'hasLabel',
-  'hasDropdown',
-  'textAlign',
-  'variant',
-  'onNudge',
+  "labelPosition",
+  "labelSize",
+  "hasLabel",
+  "hasDropdown",
+  "textAlign",
+  "variant",
+  "onNudge",
 ]);
 
 export const InputElement = styled(TextInput).withConfig({
@@ -246,76 +270,76 @@ export const InputElement = styled(TextInput).withConfig({
     disabled,
     hasLabel,
     readOnly,
-    variant = 'normal',
+    variant = "normal",
     size,
   }) => ({
     // placeholder
-    '&::placeholder': {
+    "&::placeholder": {
       color: theme.colors.textDisabled,
     },
     ...theme.textStyles.small,
     color: readOnly
       ? theme.colors.textMuted
       : disabled
-      ? theme.colors.textDisabled
-      : theme.colors.text,
-    ...(size === 'small' && {
-      fontSize: '11px',
+        ? theme.colors.textDisabled
+        : theme.colors.text,
+    ...(size === "small" && {
+      fontSize: "11px",
     }),
-    width: '0px', // Reset intrinsic width
-    flex: '1 1 0px',
-    position: 'relative',
-    border: '0',
-    outline: 'none',
-    minWidth: '0',
-    textAlign: textAlign ?? 'left',
-    alignSelf: 'stretch',
-    borderRadius: '4px',
-    paddingTop: size === 'large' ? '10px' : size === 'medium' ? '4px' : '1px',
+    width: "0px", // Reset intrinsic width
+    flex: "1 1 0px",
+    position: "relative",
+    border: "0",
+    outline: "none",
+    minWidth: "0",
+    textAlign: textAlign ?? "left",
+    alignSelf: "stretch",
+    borderRadius: "4px",
+    paddingTop: size === "large" ? "10px" : size === "medium" ? "4px" : "1px",
     paddingBottom:
-      size === 'large' ? '10px' : size === 'medium' ? '4px' : '1px',
+      size === "large" ? "10px" : size === "medium" ? "4px" : "1px",
     paddingLeft:
-      (size === 'large' ? 10 : size === 'medium' ? 6 : 4) +
-      (hasLabel && labelPosition === 'start' ? 6 + labelSize : 0) +
-      'px',
+      (size === "large" ? 10 : size === "medium" ? 6 : 4) +
+      (hasLabel && labelPosition === "start" ? 6 + labelSize : 0) +
+      "px",
     paddingRight:
-      (size === 'large' ? 10 : size === 'medium' ? 6 : 4) +
-      (hasLabel && labelPosition === 'end' ? 6 + labelSize : 0) +
+      (size === "large" ? 10 : size === "medium" ? 6 : 4) +
+      (hasLabel && labelPosition === "end" ? 6 + labelSize : 0) +
       (hasDropdown ? 11 : 0) +
-      'px',
+      "px",
     background: theme.colors.inputBackground,
-    '&:focus': {
+    "&:focus": {
       boxShadow: `0 0 0 2px ${theme.colors.primary}`,
     },
-    ...(variant === 'bare' && {
-      paddingTop: '4px',
-      paddingRight: '4px',
-      paddingBottom: '4px',
-      paddingLeft: '4px',
-      marginTop: '-4px',
-      marginRight: '-4px',
-      marginBottom: '-4px',
-      marginLeft: '-4px',
+    ...(variant === "bare" && {
+      paddingTop: "4px",
+      paddingRight: "4px",
+      paddingBottom: "4px",
+      paddingLeft: "4px",
+      marginTop: "-4px",
+      marginRight: "-4px",
+      marginBottom: "-4px",
+      marginLeft: "-4px",
     }),
 
     '&[type="search"]::-webkit-search-cancel-button': {
-      appearance: 'none',
-      height: '15px',
-      width: '15px',
+      appearance: "none",
+      height: "15px",
+      width: "15px",
       background: `url("data:image/svg+xml;utf8,${createCrossSVGString(
-        theme.colors.icon,
+        theme.colors.icon
       )}") no-repeat`,
     },
-  }),
+  })
 );
 
 const InputFieldInput = forwardRef(function InputFieldInput(
   // onFocusChange should only be passed from the root, never directly
   props: TextInputProps & {
     textAlign?: Property.TextAlign;
-    variant?: 'bare';
+    variant?: "bare";
   },
-  forwardedRef: ForwardedRef<HTMLInputElement>,
+  forwardedRef: ForwardedRef<HTMLInputElement>
 ) {
   const {
     labelPosition,
@@ -331,7 +355,7 @@ const InputFieldInput = forwardRef(function InputFieldInput(
     (isFocused: boolean) => {
       onFocusChange(isFocused);
     },
-    [onFocusChange],
+    [onFocusChange]
   );
 
   useLayoutEffect(() => {
@@ -352,17 +376,54 @@ const InputFieldInput = forwardRef(function InputFieldInput(
   );
 });
 
+const InputFieldTypeahead = (props: { value: string }) => {
+  const {
+    labelPosition,
+    labelSize,
+    hasDropdown,
+    hasLabel,
+    size,
+    onFocusChange,
+  } = useContext(InputFieldContext);
+
+  return (
+    <InputElement
+      labelPosition={labelPosition}
+      labelSize={labelSize}
+      hasLabel={hasLabel}
+      hasDropdown={hasDropdown}
+      size={size}
+      onFocusChange={onFocusChange}
+      readOnly
+      placeholder={props.value}
+      value=""
+      style={{
+        position: "absolute",
+        top: -1,
+        left: 0,
+        right: 0,
+        bottom: -1,
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+        background: "transparent",
+        boxShadow: "none",
+      }}
+    />
+  );
+};
+
 /* ----------------------------------------------------------------------------
  * NumberInput
  * ------------------------------------------------------------------------- */
 
 type InputFieldNumberInputProps = Omit<
   TextInputProps,
-  'value' | 'onChange' | 'onKeyDown' | 'onSubmit'
+  "value" | "onChange" | "onKeyDown" | "onSubmit"
 > & {
   value: number | undefined;
   onNudge?: (value: number) => void;
-  variant?: 'bare';
+  variant?: "bare";
 } & (
     | {
         onChange: (value: number) => void;
@@ -378,8 +439,8 @@ function parseNumber(value: string) {
 
 function InputFieldNumberInput(props: InputFieldNumberInputProps) {
   const { value, placeholder, onNudge } = props;
-  const onSubmit = 'onSubmit' in props ? props.onSubmit : undefined;
-  const onChange = 'onChange' in props ? props.onChange : undefined;
+  const onSubmit = "onSubmit" in props ? props.onSubmit : undefined;
+  const onChange = "onChange" in props ? props.onChange : undefined;
 
   const handleSubmit = useCallback(
     (value: string) => {
@@ -389,7 +450,7 @@ function InputFieldNumberInput(props: InputFieldNumberInputProps) {
         onSubmit?.(newValue);
       }
     },
-    [onSubmit],
+    [onSubmit]
   );
 
   const handleKeyDown = useCallback(
@@ -403,23 +464,23 @@ function InputFieldNumberInput(props: InputFieldNumberInputProps) {
       event.preventDefault();
       event.stopPropagation();
     },
-    [onNudge],
+    [onNudge]
   );
 
   const handleChange = useCallback(
     (value: string) => {
       onChange?.(parseNumber(value));
     },
-    [onChange],
+    [onChange]
   );
 
   return (
     <InputFieldInput
       {...props}
-      value={value === undefined ? '' : String(value)}
+      value={value === undefined ? "" : String(value)}
       placeholder={placeholder}
       onKeyDown={handleKeyDown}
-      {...('onChange' in props
+      {...("onChange" in props
         ? { onChange: handleChange }
         : { onSubmit: handleSubmit })}
     />
@@ -432,12 +493,12 @@ function InputFieldNumberInput(props: InputFieldNumberInputProps) {
 
 const RootContainer = styled.div<{ width?: number; flex?: string }>(
   ({ theme, flex, width }) => ({
-    flex: flex ?? '1',
-    display: 'flex',
-    flexDirection: 'row',
-    position: 'relative',
-    maxWidth: typeof width === 'number' ? `${width}px` : undefined,
-  }),
+    flex: flex ?? "1",
+    display: "flex",
+    flexDirection: "row",
+    position: "relative",
+    maxWidth: typeof width === "number" ? `${width}px` : undefined,
+  })
 );
 
 interface InputFieldRootProps {
@@ -458,23 +519,24 @@ function InputFieldRoot({
   flex,
   children,
   width,
-  labelPosition = 'end',
-  labelSize = 6,
-  size = 'medium',
+  labelPosition = "end",
+  labelSize,
+  size = "medium",
   renderPopoverContent,
   onFocusChange,
 }: InputFieldRootProps) {
   const childrenArray = Children.toArray(children);
 
   const hasDropdown = childrenArray.some(
-    (child) => isValidElement(child) && child.type === InputFieldDropdownMenu,
+    (child) => isValidElement(child) && child.type === InputFieldDropdownMenu
   );
   const hasLabel = childrenArray.some(
-    (child) => isValidElement(child) && child.type === InputFieldLabel,
+    (child) => isValidElement(child) && child.type === InputFieldLabel
   );
 
   const [isFocused, setIsFocused] = React.useState(false);
 
+  const [measuredLabelSize, setMeasuredLabelSize] = React.useState<number>();
   const [measuredWidth, setMeasuredWidth] = React.useState<number>();
 
   const handleFocusChange = useCallback(
@@ -482,18 +544,17 @@ function InputFieldRoot({
       setIsFocused(isFocused);
       onFocusChange?.(isFocused);
     },
-    [onFocusChange],
+    [onFocusChange]
   );
 
   const [inputRef, setInputRef] =
     React.useState<ForwardedRef<HTMLInputElement>>();
 
+  // eslint-disable-next-line @shopify/prefer-early-return
   useEffect(() => {
-    if (inputRef && typeof inputRef !== 'function') {
+    if (inputRef && typeof inputRef !== "function") {
       setMeasuredWidth?.(
-        isFocused
-          ? inputRef?.current?.getBoundingClientRect().width
-          : undefined,
+        isFocused ? inputRef?.current?.getBoundingClientRect().width : undefined
       );
     }
   }, [inputRef, isFocused]);
@@ -501,7 +562,7 @@ function InputFieldRoot({
   const contextValue = useMemo(
     (): InputFieldContextValue => ({
       labelPosition,
-      labelSize,
+      labelSize: measuredLabelSize ?? labelSize ?? 6,
       hasDropdown,
       hasLabel,
       size,
@@ -509,9 +570,11 @@ function InputFieldRoot({
       onFocusChange: handleFocusChange,
       inputRef,
       setInputRef,
+      setLabelWidth: setMeasuredLabelSize,
     }),
     [
       labelPosition,
+      measuredLabelSize,
       labelSize,
       hasDropdown,
       hasLabel,
@@ -519,7 +582,7 @@ function InputFieldRoot({
       isFocused,
       handleFocusChange,
       inputRef,
-    ],
+    ]
   );
 
   const rootElement = (
@@ -561,6 +624,7 @@ function InputFieldRoot({
 export namespace InputField {
   export const Root = memo(InputFieldRoot);
   export const Input = memo(InputFieldInput);
+  export const Typeahead = memo(InputFieldTypeahead);
   export const NumberInput = memo(InputFieldNumberInput);
   export const DropdownMenu = InputFieldDropdownMenu;
   export const Button = InputFieldButton;