@mirohq/design-system-base-input 0.1.0-forms.1 → 0.1.0

package/dist/module.js

@@ -1,134 +1,219 @@
-import { booleanify, removeEventProps } from '@mirohq/design-system-utils';
-import { styled } from '@mirohq/design-system-stitches';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import React, { createContext, useRef, useState, useContext } from 'react';
+import { booleanify, mergeRefs, addPropsToChildren, booleanishAttrValue } from '@mirohq/design-system-utils';
+import { usePress } from '@mirohq/design-system-use-press';
+import { useHover } from '@react-aria/interactions';
+import { mergeProps } from '@react-aria/utils';
 import { Primitive } from '@mirohq/design-system-primitive';
+import { styled } from '@mirohq/design-system-stitches';
+import { IconExclamationPointCircle, IconCheckMark } from '@mirohq/design-system-icons';
+import { styles } from '@mirohq/design-system-base-text-field';
+import { BaseButton } from '@mirohq/design-system-base-button';
+import { focus } from '@mirohq/design-system-styles';
+import { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled';
+import { Tooltip } from '@mirohq/design-system-tooltip';
+import { isIconComponent } from '@mirohq/design-system-base-icon';
+import { useLayoutEffect } from '@mirohq/design-system-use-layout-effect';
 
-const styles = {
+const StyledIconSlot = styled(Primitive.div, {
+  order: 1,
+  alignContent: "center",
+  display: "flex",
+  justifyContent: "center",
+  color: "$icon-neutrals-subtle",
+  "& svg, & img": {
+    pointerEvents: "none"
+  },
   variants: {
-    idle: {
-      background: "$background-neutrals-container",
-      border: "1px solid $border-neutrals",
-      borderRadius: "$50",
-      fontSize: "$200",
-      lineHeight: "1.5"
-    },
-    focused: {
-      boxShadow: "$focus-controls",
-      borderColor: "$border-neutrals"
-    },
-    hovered: {
-      borderColor: "$border-primary-hover"
-    },
-    readOnly: {
-      background: "$background-neutrals-disabled",
-      color: "$text-neutrals-subtle"
-    },
     disabled: {
-      background: "$background-neutrals-disabled"
-    },
-    invalid: {
-      idle: {
-        borderColor: "$border-danger"
-      },
-      focused: {
-        borderColor: "$border-danger",
-        boxShadow: "$focus-controls-error"
-      },
-      hovered: {
-        borderColor: "$border-danger-hover"
-      }
-    },
-    valid: {
-      idle: {
-        borderColor: "$border-success"
-      },
-      focused: {
-        borderColor: "$border-success",
-        boxShadow: "$focus-controls-success"
-      },
-      hovered: {
-        borderColor: "$border-success-hover"
+      true: {
+        "& svg": {
+          color: "$icon-neutrals-disabled"
+        }
       }
     }
+  }
+});
+
+const StyledActionButton = styled(BaseButton, {
+  backgroundColor: "transparent",
+  color: "$icon-neutrals-subtle",
+  display: "flex",
+  justifyContent: "center",
+  order: 3,
+  padding: "6px",
+  square: "$7",
+  "& svg:not([data-icon-component]), & img:not([data-icon-component])": {
+    square: "$icon-200",
+    "--svg-stroke-width": "$stroke-width$thin"
   },
-  base: {
-    placeholder: {
-      color: "$text-neutrals-subtle"
+  ...focus.css({
+    boxShadow: "$focus-small"
+  }),
+  "&:hover": {
+    backgroundColor: "$background-neutrals-subtle-hover"
+  },
+  "&:active, &[data-pressed]": {
+    backgroundColor: "$background-neutrals-subtle-active"
+  },
+  variants: {
+    readOnlyAppearance: {
+      true: {
+        "& svg[data-icon-component], & img[data-icon-component]": {
+          color: "$icon-neutrals-subtle"
+        }
+      }
     },
-    disabled: {
-      caretColor: "transparent",
-      "&, &::placeholder": {
-        color: "$text-neutrals-disabled",
-        "-webkit-text-fill-color": "$colors$text-neutrals-disabled"
-      },
-      "&:selection": {
-        background: "transparent"
+    disableAppearance: {
+      true: {
+        color: "$icon-neutrals-disabled"
       }
     }
   }
-};
+});
 
-const keyboardEventHandler = (e) => {
-  if (e.key !== "Tab") {
-    e.preventDefault();
+const StyledIconExclamationPointCircle = styled(
+  IconExclamationPointCircle,
+  {
+    color: "$icon-danger"
   }
-};
-const useAriaDisabled = (props, ariaDisabled) => {
-  if (!booleanify(ariaDisabled)) {
-    return props;
-  }
-  const formattedProps = removeEventProps(props, [
-    "onFocus",
-    "onBlur",
-    "onPointerMove"
-  ]);
-  formattedProps.onKeyDown = keyboardEventHandler;
-  formattedProps.onKeyUp = keyboardEventHandler;
-  return formattedProps;
-};
-
-const FloatingLabel = styled(Primitive.label, {
-  transitionProperty: "transform, left, top, font-size",
-  transitionDuration: "200ms",
-  transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
+);
+const StyledIconCheckMark = styled(IconCheckMark, {
+  color: "$icon-success"
+});
+const StyledValidityBox = styled(Primitive.div, {
+  order: 3,
+  display: "flex",
+  alignItems: "center",
+  padding: "6px"
+});
+const StyledBaseInput = styled("div", {
+  position: "relative",
+  alignItems: "center",
+  display: "inline-flex",
+  height: "max-content",
+  boxSizing: "border-box",
+  width: "100%",
+  ...styles.variants.idle,
   variants: {
-    floating: {
-      true: {
-        transform: "translate(2px, -8px)",
-        fontSize: "$150",
-        lineHeight: 1.5,
-        height: "1.5em",
-        color: "$text-neutrals-subtle",
-        padding: "0 2px",
-        backgroundColor: "$background-neutrals-container"
-      },
-      false: {
-        transform: "translate(0, 0)",
-        fontSize: "$200",
-        lineHeight: 1.5,
-        height: "1.5em",
-        ...styles.base.placeholder
-      }
+    hovered: {
+      true: {},
+      false: {}
+    },
+    focused: {
+      true: styles.variants.focused,
+      false: {}
+    },
+    valid: {
+      true: {},
+      false: {}
+    },
+    readOnly: {
+      true: styles.variants.readOnly,
+      false: {}
+    },
+    disabled: {
+      true: styles.variants.disabled,
+      false: {}
+    },
+    ariaDisabled: {
+      true: styles.variants.disabled,
+      false: {}
     },
     size: {
-      large: {},
-      "x-large": {}
+      large: {
+        height: "$10",
+        padding: "0 $100 ",
+        ["& ".concat(StyledIconSlot)]: {
+          paddingRight: "$50"
+        },
+        ["& ".concat(StyledActionButton, ", & ").concat(StyledValidityBox)]: {
+          marginLeft: "$50"
+        },
+        ["& ".concat(StyledValidityBox)]: {
+          paddingRight: "6px"
+        }
+      },
+      "x-large": {
+        height: "$12",
+        padding: "0 $150",
+        ["& ".concat(StyledIconSlot)]: {
+          paddingRight: "$100"
+        },
+        ["& ".concat(StyledActionButton, ", & ").concat(StyledValidityBox)]: {
+          marginLeft: "$100"
+        },
+        ["& ".concat(StyledValidityBox)]: {
+          paddingRight: "6px"
+        }
+      }
     }
   },
   compoundVariants: [
+    /** Idle states */
     {
-      size: "large",
-      floating: false,
-      css: {
-        top: "7px"
-      }
+      valid: false,
+      readOnly: false,
+      disabled: false,
+      ariaDisabled: false,
+      css: styles.variants.invalid.idle
+    },
+    {
+      valid: true,
+      readOnly: false,
+      disabled: false,
+      ariaDisabled: false,
+      css: styles.variants.valid.idle
     },
+    /** Focus States */
     {
-      size: "x-large",
-      floating: false,
+      focused: true,
+      readOnly: false,
       css: {
-        top: "11px",
-        left: "$200"
+        borderColor: styles.variants.focused.borderColor
       }
+    },
+    {
+      focused: true,
+      readOnly: false,
+      valid: false,
+      disabled: false,
+      ariaDisabled: false,
+      css: styles.variants.invalid.focused
+    },
+    {
+      focused: true,
+      readOnly: false,
+      valid: true,
+      disabled: false,
+      ariaDisabled: false,
+      css: styles.variants.valid.focused
+    },
+    /** Hover states */
+    {
+      hovered: true,
+      disabled: false,
+      ariaDisabled: false,
+      readOnly: false,
+      css: styles.variants.hovered
+    },
+    {
+      hovered: true,
+      focused: false,
+      valid: false,
+      readOnly: false,
+      disabled: false,
+      ariaDisabled: false,
+      css: styles.variants.invalid.hovered
+    },
+    {
+      hovered: true,
+      focused: false,
+      valid: true,
+      readOnly: false,
+      disabled: false,
+      ariaDisabled: false,
+      css: styles.variants.valid.hovered
     }
   ],
   defaultVariants: {
@@ -136,16 +221,271 @@ const FloatingLabel = styled(Primitive.label, {
   }
 });
 
-const inputSymbol = Symbol.for("input");
-const isInputComponent = (inputComponent) => {
-  var _a, _b;
-  return Boolean(
-    (_b = inputComponent[inputSymbol]) != null ? _b : (
-      // @ts-expect-error
-      (_a = inputComponent == null ? void 0 : inputComponent.type) == null ? void 0 : _a[inputSymbol]
-    )
+const disabledAndReadonlySelectors = ':read-only, :disabled, [aria-disabled="true"], [data-disabled]';
+const StyledInput = styled(Primitive.input, {
+  all: "unset",
+  background: "transparent",
+  color: "$text-neutrals",
+  width: "100%",
+  borderRadius: "$50",
+  order: 2,
+  padding: "0 $50",
+  height: "100%",
+  "&::placeholder": {
+    fontStyle: "italic"
+  },
+  ["&:not(".concat(disabledAndReadonlySelectors, ")::placeholder")]: styles.base.placeholder,
+  "&:read-only": {
+    color: styles.variants.readOnly.color
+  },
+  "&:disabled, &[aria-disabled=true], &[data-disabled]": styles.base.disabled
+});
+
+const InputContext = createContext({});
+const InputProvider = ({
+  children,
+  disabled,
+  "aria-disabled": ariaDisabled,
+  readOnly,
+  required,
+  valid,
+  ...restProps
+}) => {
+  const actionButtonRef = useRef(null);
+  const inputRef = useRef(null);
+  const [focused, setFocused] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const [hasIconSlot, setHasIconSlot] = useState(false);
+  const editable = !booleanify(disabled) && !booleanify(ariaDisabled) && !booleanify(readOnly);
+  return /* @__PURE__ */ jsx(
+    InputContext.Provider,
+    {
+      value: {
+        ...restProps,
+        setFocused,
+        setHovered,
+        setHasIconSlot,
+        hasIconSlot,
+        hovered,
+        focused,
+        disabled,
+        "aria-disabled": ariaDisabled,
+        readOnly,
+        editable,
+        inputRef,
+        actionButtonRef,
+        required,
+        valid
+      },
+      children
+    }
   );
 };
+const useInputContext = () => useContext(InputContext);
+
+const Input = React.forwardRef(
+  ({
+    id,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid,
+    ...restProps
+  }, forwardRef) => {
+    const {
+      "aria-disabled": ariaDisabled,
+      disabled,
+      setFocused,
+      inputRef,
+      required,
+      readOnly,
+      onChange
+    } = useInputContext();
+    const { onBlur, onFocus, ...elementProps } = useAriaDisabled({
+      ...restProps,
+      ariaDisabled
+    });
+    const onFocusHandler = React.useCallback(
+      (e) => {
+        setFocused(true);
+        onFocus == null ? void 0 : onFocus(e);
+      },
+      [setFocused, onFocus]
+    );
+    const onBlurHandler = React.useCallback(
+      (e) => {
+        setFocused(false);
+        onBlur == null ? void 0 : onBlur(e);
+      },
+      [setFocused, onBlur]
+    );
+    return /* @__PURE__ */ jsx(
+      StyledInput,
+      {
+        ...elementProps,
+        id,
+        readOnly,
+        "aria-describedby": ariaDescribedBy,
+        "aria-invalid": ariaInvalid,
+        disabled: disabled === true || void 0,
+        required: required === true || void 0,
+        onFocus: onFocusHandler,
+        onBlur: onBlurHandler,
+        onChange,
+        ref: mergeRefs([inputRef, forwardRef])
+      }
+    );
+  }
+);
+
+const ActionButton = React.forwardRef(({ "aria-label": ariaLabel, label, children, ...restProps }, forwardRef) => {
+  const {
+    valid,
+    hovered,
+    editable,
+    "aria-disabled": ariaDisabled,
+    disabled,
+    readOnly,
+    actionButtonRef
+  } = useInputContext();
+  const showInputSlot = valid === void 0 || booleanify(hovered);
+  let formattedChildren = children;
+  formattedChildren = addPropsToChildren(children, isIconComponent, {
+    "aria-hidden": true
+  });
+  const hasPressEvent = Object.keys(restProps).some(
+    (key) => key.startsWith("onPress")
+  );
+  const customDisabled = restProps.disabled;
+  return /* @__PURE__ */ jsx(Fragment, { children: showInputSlot && /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      StyledActionButton,
+      {
+        type: "button",
+        ...restProps,
+        "aria-label": ariaLabel != null ? ariaLabel : label,
+        disabled: hasPressEvent ? customDisabled : customDisabled != null ? customDisabled : !editable,
+        disableAppearance: hasPressEvent ? !booleanify(readOnly) && customDisabled : booleanify(disabled != null ? disabled : ariaDisabled),
+        readOnlyAppearance: readOnly,
+        ref: mergeRefs([forwardRef, actionButtonRef]),
+        children: formattedChildren
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Tooltip.Content, { children: label })
+  ] }) });
+});
+
+const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => {
+  const {
+    "aria-disabled": ariaDisabled,
+    disabled,
+    setHasIconSlot
+  } = useInputContext();
+  const formattedChildren = addPropsToChildren(children, isIconComponent, {
+    size: "small",
+    weight: "thin",
+    "aria-hidden": true
+  });
+  useLayoutEffect(() => {
+    setHasIconSlot(true);
+    return () => setHasIconSlot(false);
+  }, [setHasIconSlot]);
+  return /* @__PURE__ */ jsx(
+    StyledIconSlot,
+    {
+      ...restProps,
+      disabled: booleanify(disabled != null ? disabled : ariaDisabled),
+      ref: forwardRef,
+      children: formattedChildren
+    }
+  );
+});
+IconSlot.displayName = "IconSlot";
+
+const Root = React.forwardRef(({ children, size, ...restProps }, forwardRef) => {
+  const ref = useRef(null);
+  const {
+    valid,
+    "aria-disabled": ariaDisabled,
+    disabled,
+    readOnly,
+    focused,
+    setHovered,
+    inputRef,
+    actionButtonRef,
+    setFocused
+  } = useInputContext();
+  const { hoverProps, isHovered: hovered } = useHover({
+    onHoverChange: setHovered
+  });
+  const { pressProps } = usePress({
+    onPressStart: (e) => {
+      const { target } = e.originalEvent;
+      const shouldPrevent = document.activeElement === inputRef.current && target !== inputRef.current;
+      if (shouldPrevent) {
+        e.originalEvent.preventDefault();
+      }
+    },
+    onPressEnd: (e) => {
+      var _a, _b;
+      const { target } = e.originalEvent;
+      const isActionButton = target === actionButtonRef.current || ((_a = actionButtonRef.current) == null ? void 0 : _a.contains(target)) === true;
+      const shouldFocusInput = !isActionButton && !booleanify(disabled) && !booleanify(focused);
+      if (shouldFocusInput) {
+        (_b = inputRef.current) == null ? void 0 : _b.focus();
+        setFocused(true);
+      }
+    },
+    preventFocusOnPress: "auto"
+  });
+  const ariaDisabledOrDisabled = booleanify(ariaDisabled) || booleanify(disabled);
+  const showValidityIcon = !booleanify(readOnly) && !ariaDisabledOrDisabled && !hovered && !focused && valid !== void 0;
+  const ValidIcon = valid === true ? StyledIconCheckMark : StyledIconExclamationPointCircle;
+  return /* @__PURE__ */ jsxs(
+    StyledBaseInput,
+    {
+      ...mergeProps(restProps, hoverProps, pressProps),
+      "data-invalid": booleanishAttrValue(valid === false),
+      "data-valid": booleanishAttrValue(valid === true),
+      "data-form-element": "input",
+      ref: mergeRefs([ref, forwardRef]),
+      size,
+      hovered,
+      focused,
+      valid,
+      disabled: booleanify(disabled),
+      ariaDisabled: booleanify(ariaDisabled),
+      readOnly: booleanify(readOnly),
+      children: [
+        children,
+        showValidityIcon && /* @__PURE__ */ jsx(StyledValidityBox, { children: /* @__PURE__ */ jsx(ValidIcon, { size: "small", weight: "thin" }) })
+      ]
+    }
+  );
+});
+const BaseInput = React.forwardRef(
+  ({
+    "aria-disabled": ariaDisabled,
+    disabled,
+    valid,
+    readOnly,
+    required,
+    onChange,
+    ...restProps
+  }, forwardRef) => /* @__PURE__ */ jsx(
+    InputProvider,
+    {
+      valid,
+      disabled,
+      "aria-disabled": ariaDisabled,
+      readOnly,
+      required,
+      onChange,
+      children: /* @__PURE__ */ jsx(Root, { ...restProps, ref: forwardRef })
+    }
+  )
+);
+BaseInput.Input = Input;
+BaseInput.ActionButton = ActionButton;
+BaseInput.IconSlot = IconSlot;
 
-export { FloatingLabel, inputSymbol, isInputComponent, styles, useAriaDisabled };
+export { BaseInput, useInputContext };
 //# sourceMappingURL=module.js.map