@lets-events/react 12.4.1 → 12.5.0

package/src/components/TextareaField.tsx

@@ -1,138 +1,138 @@
-import { TextArea as TextAreaRadix } from "@radix-ui/themes";
-import { styled } from "../styles";
-import React, { ComponentProps, useRef, useState, useEffect } from "react";
-import { typographyValues } from "../types/typographyValues";
-import { Text } from "./Text";
-import { Badge } from "./Badge";
-import { Flex } from "./Flex";
-
-export const TextareaFieldStyle = styled(TextAreaRadix, {
-  display: "flex",
-  flex: 1,
-  textarea: {
-    width: "100%",
-    border: "none",
-    padding: "$12 $14",
-    fontFamily: "$default",
-    outline: "none",
-    resize: "vertical",
-    height: "auto",
-  },
-  variants: {
-    typography: typographyValues,
-  },
-  defaultVariants: {
-    typography: "labelSmall",
-  },
-});
-
-const TextareaContainer = styled("div", {
-  display: "flex",
-  flexDirection: "column",
-  overflow: "hidden",
-  width: "100%",
-  border: "1px solid",
-  borderRadius: "$sm",
-
-  "&:has(textarea:focus)": {
-    border: "1px solid $brand300",
-  },
-  "&:has(textarea:disabled)": {
-    backgroundColor: "$dark100",
-    color: "$dark400",
-    border: "1px solid $dark200",
-    cursor: "not-allowed",
-  },
-
-  variants: {
-    color: {
-      default: {
-        borderColor: "$dark300",
-      },
-      error: {
-        borderColor: "$error400",
-      },
-    },
-  },
-
-  defaultVariants: {
-    color: "default",
-  },
-});
-
-const TextareaLimitIndicator = styled("div", {
-  padding: "$12 $16",
-  borderTop: "1px solid $neutral300",
-  width: "100%",
-  flex: 1,
-  display: "flex",
-  backgroundColor: "$dark50",
-  span: {
-    backgroundColor: "$neutral200",
-    color: "$neutral700",
-    borderRadius: "$2xs",
-    padding: "$4",
-  },
-});
-
-export type TextareaFieldProps = Omit<
-  ComponentProps<typeof TextareaFieldStyle>,
-  "color"
-> &
-  ComponentProps<typeof TextareaContainer> & {
-    simpleLayout?: boolean;
-  };
-
-export const TextareaField = React.forwardRef<
-  HTMLTextAreaElement,
-  TextareaFieldProps
->(({ maxLength, color, simpleLayout = false, ...props }, forwardedRef) => {
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-  const [remaining, setRemaining] = useState(maxLength);
-
-  useEffect(() => {
-    if (maxLength && inputRef.current) {
-      setRemaining(maxLength - (inputRef.current.value.length ?? 0));
-    }
-  }, [maxLength]);
-
-  const handleInput = (e: React.FormEvent<HTMLTextAreaElement>) => {
-    if (maxLength) {
-      setRemaining(maxLength - e.currentTarget.value.length);
-    }
-    props.onInput?.(e);
-  };
-
-  return (
-    <Flex direction="column" align="end" style={{ position: 'relative' }}>
-      {maxLength && simpleLayout && (
-        <Badge size="sm" color="grey" style={{ position: 'absolute', right: 0, top: '-1.75rem' }}>
-          {remaining}
-        </Badge>
-      )}
-      <TextareaContainer color={color}>
-        <TextareaFieldStyle
-          rows={4}
-          ref={(r) => {
-            if (!r) return;
-            inputRef.current = r;
-            if (forwardedRef) {
-              if (typeof forwardedRef === "function") forwardedRef(r);
-              else forwardedRef.current = r;
-            }
-          }}
-          onInput={handleInput}
-          maxLength={maxLength}
-          {...props}
-        />
-        {maxLength && !simpleLayout && (
-          <TextareaLimitIndicator>
-            <Text typography="badgeMedium">
-              {remaining}
-            </Text>
-          </TextareaLimitIndicator>
-        )}
-      </TextareaContainer>
-    </Flex>
-  );
-});
+import { TextArea as TextAreaRadix } from "@radix-ui/themes";
+import { styled } from "../styles";
+import React, { ComponentProps, useRef, useState, useEffect } from "react";
+import { typographyValues } from "../types/typographyValues";
+import { Text } from "./Text";
+import { Badge } from "./Badge";
+import { Flex } from "./Flex";
+
+export const TextareaFieldStyle = styled(TextAreaRadix, {
+  display: "flex",
+  flex: 1,
+  textarea: {
+    width: "100%",
+    border: "none",
+    padding: "$12 $14",
+    fontFamily: "$default",
+    outline: "none",
+    resize: "vertical",
+    height: "auto",
+  },
+  variants: {
+    typography: typographyValues,
+  },
+  defaultVariants: {
+    typography: "labelSmall",
+  },
+});
+
+const TextareaContainer = styled("div", {
+  display: "flex",
+  flexDirection: "column",
+  overflow: "hidden",
+  width: "100%",
+  border: "1px solid",
+  borderRadius: "$sm",
+
+  "&:has(textarea:focus)": {
+    border: "1px solid $brand300",
+  },
+  "&:has(textarea:disabled)": {
+    backgroundColor: "$dark100",
+    color: "$dark400",
+    border: "1px solid $dark200",
+    cursor: "not-allowed",
+  },
+
+  variants: {
+    color: {
+      default: {
+        borderColor: "$dark300",
+      },
+      error: {
+        borderColor: "$error400",
+      },
+    },
+  },
+
+  defaultVariants: {
+    color: "default",
+  },
+});
+
+const TextareaLimitIndicator = styled("div", {
+  padding: "$12 $16",
+  borderTop: "1px solid $neutral300",
+  width: "100%",
+  flex: 1,
+  display: "flex",
+  backgroundColor: "$dark50",
+  span: {
+    backgroundColor: "$neutral200",
+    color: "$neutral700",
+    borderRadius: "$2xs",
+    padding: "$4",
+  },
+});
+
+export type TextareaFieldProps = Omit<
+  ComponentProps<typeof TextareaFieldStyle>,
+  "color"
+> &
+  ComponentProps<typeof TextareaContainer> & {
+    simpleLayout?: boolean;
+  };
+
+export const TextareaField = React.forwardRef<
+  HTMLTextAreaElement,
+  TextareaFieldProps
+>(({ maxLength, color, simpleLayout = false, ...props }, forwardedRef) => {
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const [remaining, setRemaining] = useState(maxLength);
+
+  useEffect(() => {
+    if (maxLength && inputRef.current) {
+      setRemaining(maxLength - (inputRef.current.value.length ?? 0));
+    }
+  }, [maxLength]);
+
+  const handleInput = (e: React.FormEvent<HTMLTextAreaElement>) => {
+    if (maxLength) {
+      setRemaining(maxLength - e.currentTarget.value.length);
+    }
+    props.onInput?.(e);
+  };
+
+  return (
+    <Flex direction="column" align="end" style={{ position: 'relative' }}>
+      {maxLength && simpleLayout && (
+        <Badge size="sm" color="grey" style={{ position: 'absolute', right: 0, top: '-1.75rem' }}>
+          {remaining}
+        </Badge>
+      )}
+      <TextareaContainer color={color}>
+        <TextareaFieldStyle
+          rows={4}
+          ref={(r) => {
+            if (!r) return;
+            inputRef.current = r;
+            if (forwardedRef) {
+              if (typeof forwardedRef === "function") forwardedRef(r);
+              else forwardedRef.current = r;
+            }
+          }}
+          onInput={handleInput}
+          maxLength={maxLength}
+          {...props}
+        />
+        {maxLength && !simpleLayout && (
+          <TextareaLimitIndicator>
+            <Text typography="badgeMedium">
+              {remaining}
+            </Text>
+          </TextareaLimitIndicator>
+        )}
+      </TextareaContainer>
+    </Flex>
+  );
+});