@basic-ui/material 1.0.0-alpha.43 → 1.0.0-alpha.45

package/src/TextField/OutlinedContainer.tsx

@@ -1,116 +1,116 @@
-import type { ReactNode } from 'react';
-import {
-  forwardRef,
-  useEffect,
-  useLayoutEffect,
-  useState,
-  useRef,
-} from 'react';
-
-import { NotchedOutline } from '../NotchedOutline';
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-import { FloatingLabel } from '../FloatingLabel';
-import type { Theme } from '../theme';
-import {
-  ICON_WIDTH,
-  PADDING_LEFT_WITHOUT_ICON,
-  PADDING_LEFT_WITH_ICON,
-} from './consts';
-
-const useEnhancedEffect =
-  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-
-export interface OutlinedContainerProps extends BoxProps {
-  children?: ReactNode;
-  label?: ReactNode;
-  color?: string;
-  error?: boolean;
-  theme: Theme;
-  labelIsFloating: boolean;
-  hasFocus: boolean;
-  inputId: string;
-  disabled?: boolean;
-  forceActive?: boolean;
-  leadingIcon?: boolean;
-}
-
-export const OutlinedContainer = forwardRef<
-  HTMLDivElement,
-  OutlinedContainerProps
->(function OutlinedContainer(props, forwardedRef) {
-  const {
-    label,
-    labelIsFloating,
-    inputId,
-    forceActive = false,
-    children,
-    error,
-    color: colorProp = 'primary',
-    leadingIcon,
-    ...otherProps
-  } = props;
-  const [labelWidth, setLabelWidth] = useState(0);
-  const labelRef = useRef<HTMLLabelElement>(null);
-
-  useEnhancedEffect(() => {
-    const element = labelRef.current;
-
-    if (element) {
-      setLabelWidth(element.offsetWidth);
-      function handleFontsLoaded() {
-        // set the label width again once the fonts have been loaded
-        requestAnimationFrame(() => {
-          if (element) setLabelWidth(element.offsetWidth);
-        });
-      }
-      document.fonts?.addEventListener?.('loadingdone', handleFontsLoaded);
-      document.fonts?.ready?.then(handleFontsLoaded);
-
-      return () =>
-        document.fonts?.removeEventListener?.('loadingdone', handleFontsLoaded);
-    }
-  }, [label]);
-
-  const color = error ? 'error' : colorProp;
-  const inputHeight = 56;
-
-  return (
-    <Box position="relative" lineHeight={0} {...otherProps}>
-      <NotchedOutline
-        ref={forwardedRef}
-        borderRadius={4}
-        borderColor={color}
-        borderWidth={1}
-        notchActive={forceActive || labelIsFloating}
-        notchWidth={labelWidth * 0.75}
-        notchStart={16}
-        forceActive={forceActive || error}
-        label={
-          label && (
-            <FloatingLabel
-              height={inputHeight}
-              offsetX={
-                leadingIcon
-                  ? PADDING_LEFT_WITH_ICON +
-                    ICON_WIDTH +
-                    PADDING_LEFT_WITHOUT_ICON
-                  : PADDING_LEFT_WITHOUT_ICON
-              }
-              translateX={
-                leadingIcon ? -(PADDING_LEFT_WITH_ICON + ICON_WIDTH) : 0
-              }
-              active={forceActive || labelIsFloating}
-              ref={labelRef}
-              htmlFor={inputId}
-            >
-              {label}
-            </FloatingLabel>
-          )
-        }
-      >
-        {children}
-      </NotchedOutline>
-    </Box>
-  );
-});
+import type { ReactNode } from 'react';
+import {
+  forwardRef,
+  useEffect,
+  useLayoutEffect,
+  useState,
+  useRef,
+} from 'react';
+
+import { NotchedOutline } from '../NotchedOutline';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { FloatingLabel } from '../FloatingLabel';
+import type { Theme } from '../theme';
+import {
+  ICON_WIDTH,
+  PADDING_LEFT_WITHOUT_ICON,
+  PADDING_LEFT_WITH_ICON,
+} from './consts';
+
+const useEnhancedEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+export interface OutlinedContainerProps extends BoxProps {
+  children?: ReactNode;
+  label?: ReactNode;
+  color?: string;
+  error?: boolean;
+  theme: Theme;
+  labelIsFloating: boolean;
+  hasFocus: boolean;
+  inputId: string;
+  disabled?: boolean;
+  forceActive?: boolean;
+  leadingIcon?: boolean;
+}
+
+export const OutlinedContainer = forwardRef<
+  HTMLDivElement,
+  OutlinedContainerProps
+>(function OutlinedContainer(props, forwardedRef) {
+  const {
+    label,
+    labelIsFloating,
+    inputId,
+    forceActive = false,
+    children,
+    error,
+    color: colorProp = 'primary',
+    leadingIcon,
+    ...otherProps
+  } = props;
+  const [labelWidth, setLabelWidth] = useState(0);
+  const labelRef = useRef<HTMLLabelElement>(null);
+
+  useEnhancedEffect(() => {
+    const element = labelRef.current;
+
+    if (element) {
+      setLabelWidth(element.offsetWidth);
+      function handleFontsLoaded() {
+        // set the label width again once the fonts have been loaded
+        requestAnimationFrame(() => {
+          if (element) setLabelWidth(element.offsetWidth);
+        });
+      }
+      document.fonts?.addEventListener?.('loadingdone', handleFontsLoaded);
+      document.fonts?.ready?.then(handleFontsLoaded);
+
+      return () =>
+        document.fonts?.removeEventListener?.('loadingdone', handleFontsLoaded);
+    }
+  }, [label]);
+
+  const color = error ? 'error' : colorProp;
+  const inputHeight = 56;
+
+  return (
+    <Box position="relative" lineHeight={0} {...otherProps}>
+      <NotchedOutline
+        ref={forwardedRef}
+        borderRadius={4}
+        borderColor={color}
+        borderWidth={1}
+        notchActive={forceActive || labelIsFloating}
+        notchWidth={labelWidth * 0.75}
+        notchStart={16}
+        forceActive={forceActive || error}
+        label={
+          label && (
+            <FloatingLabel
+              height={inputHeight}
+              offsetX={
+                leadingIcon
+                  ? PADDING_LEFT_WITH_ICON +
+                    ICON_WIDTH +
+                    PADDING_LEFT_WITHOUT_ICON
+                  : PADDING_LEFT_WITHOUT_ICON
+              }
+              translateX={
+                leadingIcon ? -(PADDING_LEFT_WITH_ICON + ICON_WIDTH) : 0
+              }
+              active={forceActive || labelIsFloating}
+              ref={labelRef}
+              htmlFor={inputId}
+            >
+              {label}
+            </FloatingLabel>
+          )
+        }
+      >
+        {children}
+      </NotchedOutline>
+    </Box>
+  );
+});