chore: reafctoring

Author: macci001

packages/components/date-input/src/use-date-input.ts

@@ -10,7 +10,7 @@ import type {DateInputGroupProps} from "./date-input-group";
 import {useLocale} from "@react-aria/i18n";
 import {createCalendar, CalendarDate, DateFormatter} from "@internationalized/date";
 import {mergeProps} from "@react-aria/utils";
-import {PropGetter, useProviderContext} from "@nextui-org/system";
+import {PropGetter, useLabelPlacement, useProviderContext} from "@nextui-org/system";
 import {HTMLNextUIProps, mapPropsVariants} from "@nextui-org/system";
 import {useDOMRef} from "@nextui-org/react-utils";
 import {useDateField as useAriaDateField} from "@react-aria/datepicker";
@@ -191,16 +191,10 @@ export function useDateInput<T extends DateValue>(originalProps: UseDateInputPro
 
   const isInvalid = isInvalidProp || ariaIsInvalid;
 
-  const labelPlacement = useMemo<DateInputVariantProps["labelPlacement"]>(() => {
-    const labelPlacement =
-      originalProps.labelPlacement ?? globalContext?.labelPlacement ?? "inside";
-
-    if (labelPlacement === "inside" && !label) {
-      return "outside";
-    }
-
-    return labelPlacement;
-  }, [originalProps.labelPlacement, globalContext?.labelPlacement, label]);
+  const labelPlacement = useLabelPlacement({
+    labelPlacement: originalProps.labelPlacement,
+    label,
+  });
 
   const shouldLabelBeOutside = labelPlacement === "outside" || labelPlacement === "outside-left";
 

packages/components/date-input/src/use-time-input.ts

@@ -6,7 +6,7 @@ import type {DateInputGroupProps} from "./date-input-group";
 
 import {useLocale} from "@react-aria/i18n";
 import {mergeProps} from "@react-aria/utils";
-import {PropGetter, useProviderContext} from "@nextui-org/system";
+import {PropGetter, useLabelPlacement, useProviderContext} from "@nextui-org/system";
 import {HTMLNextUIProps, mapPropsVariants} from "@nextui-org/system";
 import {useDOMRef} from "@nextui-org/react-utils";
 import {useTimeField as useAriaTimeField} from "@react-aria/datepicker";
@@ -133,16 +133,10 @@ export function useTimeInput<T extends TimeValue>(originalProps: UseTimeInputPro
 
   const baseStyles = clsx(classNames?.base, className);
 
-  const labelPlacement = useMemo<DateInputVariantProps["labelPlacement"]>(() => {
-    const labelPlacement =
-      originalProps.labelPlacement ?? globalContext?.labelPlacement ?? "inside";
-
-    if (labelPlacement === "inside" && !label) {
-      return "outside";
-    }
-
-    return labelPlacement;
-  }, [originalProps.labelPlacement, globalContext?.labelPlacement, label]);
+  const labelPlacement = useLabelPlacement({
+    labelPlacement: originalProps.labelPlacement,
+    label,
+  });
 
   const shouldLabelBeOutside = labelPlacement === "outside" || labelPlacement === "outside-left";
 

packages/components/date-picker/src/use-date-picker-base.ts

@@ -9,8 +9,13 @@ import type {ValueBase} from "@react-types/shared";
 
 import {dataAttr} from "@nextui-org/shared-utils";
 import {dateInput, DatePickerVariantProps} from "@nextui-org/theme";
-import {useCallback, useMemo} from "react";
-import {HTMLNextUIProps, mapPropsVariants, useProviderContext} from "@nextui-org/system";
+import {useCallback} from "react";
+import {
+  HTMLNextUIProps,
+  mapPropsVariants,
+  useLabelPlacement,
+  useProviderContext,
+} from "@nextui-org/system";
 import {mergeProps} from "@react-aria/utils";
 import {useDOMRef} from "@nextui-org/react-utils";
 import {useLocalizedStringFormatter} from "@react-aria/i18n";
@@ -234,16 +239,10 @@ export function useDatePickerBase<T extends DateValue>(originalProps: UseDatePic
     "data-invalid": dataAttr(originalProps?.isInvalid),
   } as DateInputProps;
 
-  const labelPlacement = useMemo<TimeInputProps["labelPlacement"]>(() => {
-    const labelPlacement =
-      originalProps.labelPlacement ?? globalContext?.labelPlacement ?? "inside";
-
-    if (labelPlacement === "inside" && !label) {
-      return "outside";
-    }
-
-    return labelPlacement;
-  }, [originalProps.labelPlacement, globalContext?.labelPlacement, label]);
+  const labelPlacement = useLabelPlacement({
+    labelPlacement: originalProps.labelPlacement,
+    label,
+  });
 
   const timeInputProps = {
     ...userTimeInputProps,

packages/components/date-picker/src/use-date-range-picker.ts

@@ -1,5 +1,4 @@
 import type {DateValue} from "@internationalized/date";
-import type {DateInputVariantProps} from "@nextui-org/theme";
 import type {TimeInputProps} from "@nextui-org/date-input";
 import type {ButtonProps} from "@nextui-org/button";
 import type {RangeCalendarProps} from "@nextui-org/calendar";
@@ -14,7 +13,7 @@ import type {DateInputGroupProps} from "@nextui-org/date-input";
 import type {DateRangePickerSlots, SlotsToClasses} from "@nextui-org/theme";
 import type {DateInputProps} from "@nextui-org/date-input";
 
-import {useProviderContext} from "@nextui-org/system";
+import {useLabelPlacement, useProviderContext} from "@nextui-org/system";
 import {useMemo, useRef} from "react";
 import {useDateRangePickerState} from "@react-stately/datepicker";
 import {useDateRangePicker as useAriaDateRangePicker} from "@react-aria/datepicker";
@@ -144,16 +143,10 @@ export function useDateRangePicker<T extends DateValue>({
 
   const showTimeField = !!timeGranularity;
 
-  const labelPlacement = useMemo<DateInputVariantProps["labelPlacement"]>(() => {
-    const labelPlacement =
-      originalProps.labelPlacement ?? globalContext?.labelPlacement ?? "inside";
-
-    if (labelPlacement === "inside" && !label) {
-      return "outside";
-    }
-
-    return labelPlacement;
-  }, [originalProps.labelPlacement, globalContext?.labelPlacement, label]);
+  const labelPlacement = useLabelPlacement({
+    labelPlacement: originalProps.labelPlacement,
+    label,
+  });
 
   const shouldLabelBeOutside = labelPlacement === "outside" || labelPlacement === "outside-left";
 

packages/components/select/src/use-select.ts

@@ -7,6 +7,7 @@ import {
   mapPropsVariants,
   PropGetter,
   SharedSelection,
+  useLabelPlacement,
   useProviderContext,
 } from "@nextui-org/system";
 import {select} from "@nextui-org/theme";
@@ -343,16 +344,10 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
   const {focusProps, isFocused, isFocusVisible} = useFocusRing();
   const {isHovered, hoverProps} = useHover({isDisabled: originalProps.isDisabled});
 
-  const labelPlacement = useMemo<SelectVariantProps["labelPlacement"]>(() => {
-    const labelPlacement =
-      originalProps.labelPlacement ?? globalContext?.labelPlacement ?? "inside";
-
-    if (labelPlacement === "inside" && !label) {
-      return "outside";
-    }
-
-    return labelPlacement;
-  }, [originalProps.labelPlacement, globalContext?.labelPlacement, label]);
+  const labelPlacement = useLabelPlacement({
+    labelPlacement: originalProps.labelPlacement,
+    label,
+  });
 
   const hasPlaceholder = !!placeholder;
   const shouldLabelBeOutside =

packages/core/system/src/hooks/index.ts

@@ -0,0 +1 @@
+export {useLabelPlacement} from "./use-label-placement";

packages/core/system/src/hooks/use-label-placement.ts

@@ -0,0 +1,21 @@
+import {useMemo} from "react";
+
+import {useProviderContext} from "../provider-context";
+
+export function useLabelPlacement(props: {
+  labelPlacement?: "inside" | "outside" | "outside-left";
+  label?: React.ReactNode;
+}) {
+  const globalContext = useProviderContext();
+  const globalLabelPlacement = globalContext?.labelPlacement;
+
+  return useMemo(() => {
+    const labelPlacement = props.labelPlacement ?? globalLabelPlacement ?? "inside";
+
+    if (labelPlacement === "inside" && !props.label) {
+      return "outside";
+    }
+
+    return labelPlacement;
+  }, [props.labelPlacement, globalLabelPlacement, props.label]);
+}

packages/core/system/src/index.ts

@@ -33,3 +33,5 @@ export type {ProviderContextProps} from "./provider-context";
 
 export {NextUIProvider} from "./provider";
 export {ProviderContext, useProviderContext} from "./provider-context";
+
+export {useLabelPlacement} from "./hooks";