From 5fffcddba4fff1c4b7e9aa43b39658453b3c3886 Mon Sep 17 00:00:00 2001 From: Maharshi Alpesh Date: Thu, 12 Dec 2024 16:35:37 +0530 Subject: [PATCH 1/5] feat: adding the support for labelPlacement globally --- .changeset/chilly-dancers-switch.md | 10 ++++++++++ .../docs/api-references/nextui-provider.mdx | 9 +++++++++ .../date-input/src/use-date-input.ts | 12 +++++------ .../date-input/src/use-time-input.ts | 12 +++++------ .../date-picker/src/use-date-picker-base.ts | 15 ++++++++++++-- .../date-picker/src/use-date-range-picker.ts | 17 ++++++++-------- packages/components/input/src/use-input.ts | 20 +++++++++++++++---- packages/components/select/src/use-select.ts | 9 ++++++--- packages/core/system/src/provider-context.ts | 7 +++++++ packages/core/system/src/provider.tsx | 3 +++ .../core/theme/src/components/date-input.ts | 1 - packages/core/theme/src/components/input.ts | 1 - packages/core/theme/src/components/select.ts | 1 - packages/storybook/.storybook/preview.tsx | 16 +++++++++++++-- 14 files changed, 99 insertions(+), 34 deletions(-) create mode 100644 .changeset/chilly-dancers-switch.md diff --git a/.changeset/chilly-dancers-switch.md b/.changeset/chilly-dancers-switch.md new file mode 100644 index 0000000000..97fe3da37d --- /dev/null +++ b/.changeset/chilly-dancers-switch.md @@ -0,0 +1,10 @@ +--- +"@nextui-org/date-picker": patch +"@nextui-org/date-input": patch +"@nextui-org/select": patch +"@nextui-org/input": patch +"@nextui-org/system": patch +"@nextui-org/theme": patch +--- + +Adding support for global labelPlacement prop.(ENG-1694) diff --git a/apps/docs/content/docs/api-references/nextui-provider.mdx b/apps/docs/content/docs/api-references/nextui-provider.mdx index c64fd50061..60c223f467 100644 --- a/apps/docs/content/docs/api-references/nextui-provider.mdx +++ b/apps/docs/content/docs/api-references/nextui-provider.mdx @@ -142,6 +142,15 @@ interface AppProviderProps { +`labelPlacement` + +- **Description**: Determines the position where label should appear, such as inside, outside or outside-left of the component. +- **Type**: `string` | `undefined` +- **Possible Values**: `inside` | `outside` | `outside-left` | `undefined` +- **Default**: `undefined` + + + `disableAnimation` - **Description**: Disables animations globally. This will also avoid `framer-motion` features to be loaded in the bundle which can potentially reduce the bundle size. diff --git a/packages/components/date-input/src/use-date-input.ts b/packages/components/date-input/src/use-date-input.ts index e34065333e..e1cb2b1935 100644 --- a/packages/components/date-input/src/use-date-input.ts +++ b/packages/components/date-input/src/use-date-input.ts @@ -192,15 +192,15 @@ export function useDateInput(originalProps: UseDateInputPro const isInvalid = isInvalidProp || ariaIsInvalid; const labelPlacement = useMemo(() => { - if ( - (!originalProps.labelPlacement || originalProps.labelPlacement === "inside") && - !props.label - ) { + const labelPlacement = + originalProps.labelPlacement ?? globalContext?.labelPlacement ?? "inside"; + + if (labelPlacement === "inside" && !label) { return "outside"; } - return originalProps.labelPlacement ?? "inside"; - }, [originalProps.labelPlacement, props.label]); + return labelPlacement; + }, [originalProps.labelPlacement, globalContext?.labelPlacement, label]); const shouldLabelBeOutside = labelPlacement === "outside" || labelPlacement === "outside-left"; diff --git a/packages/components/date-input/src/use-time-input.ts b/packages/components/date-input/src/use-time-input.ts index 7b540a626b..b953425efd 100644 --- a/packages/components/date-input/src/use-time-input.ts +++ b/packages/components/date-input/src/use-time-input.ts @@ -134,15 +134,15 @@ export function useTimeInput(originalProps: UseTimeInputPro const baseStyles = clsx(classNames?.base, className); const labelPlacement = useMemo(() => { - if ( - (!originalProps.labelPlacement || originalProps.labelPlacement === "inside") && - !props.label - ) { + const labelPlacement = + originalProps.labelPlacement ?? globalContext?.labelPlacement ?? "inside"; + + if (labelPlacement === "inside" && !label) { return "outside"; } - return originalProps.labelPlacement ?? "inside"; - }, [originalProps.labelPlacement, props.label]); + return labelPlacement; + }, [originalProps.labelPlacement, globalContext?.labelPlacement, label]); const shouldLabelBeOutside = labelPlacement === "outside" || labelPlacement === "outside-left"; diff --git a/packages/components/date-picker/src/use-date-picker-base.ts b/packages/components/date-picker/src/use-date-picker-base.ts index 8a88836d74..a89ac5ff4e 100644 --- a/packages/components/date-picker/src/use-date-picker-base.ts +++ b/packages/components/date-picker/src/use-date-picker-base.ts @@ -9,7 +9,7 @@ import type {ValueBase} from "@react-types/shared"; import {dataAttr} from "@nextui-org/shared-utils"; import {dateInput, DatePickerVariantProps} from "@nextui-org/theme"; -import {useCallback} from "react"; +import {useCallback, useMemo} from "react"; import {HTMLNextUIProps, mapPropsVariants, useProviderContext} from "@nextui-org/system"; import {mergeProps} from "@react-aria/utils"; import {useDOMRef} from "@nextui-org/react-utils"; @@ -234,10 +234,21 @@ export function useDatePickerBase(originalProps: UseDatePic "data-invalid": dataAttr(originalProps?.isInvalid), } as DateInputProps; + const labelPlacement = useMemo(() => { + const labelPlacement = + originalProps.labelPlacement ?? globalContext?.labelPlacement ?? "inside"; + + if (labelPlacement === "inside" && !label) { + return "outside"; + } + + return labelPlacement; + }, [originalProps.labelPlacement, globalContext?.labelPlacement, label]); + const timeInputProps = { ...userTimeInputProps, size: "sm", - labelPlacement: "outside-left", + labelPlacement, label: userTimeInputProps?.label || stringFormatter.format("time"), placeholderValue: timePlaceholder, hourCycle: props.hourCycle, diff --git a/packages/components/date-picker/src/use-date-range-picker.ts b/packages/components/date-picker/src/use-date-range-picker.ts index 2dabebb84d..a1301d5bbd 100644 --- a/packages/components/date-picker/src/use-date-range-picker.ts +++ b/packages/components/date-picker/src/use-date-range-picker.ts @@ -60,6 +60,7 @@ export type UseDateRangePickerProps = Props & AriaDateRa export function useDateRangePicker({ as, + label, isInvalid: isInvalidProp, description, startContent, @@ -144,15 +145,15 @@ export function useDateRangePicker({ const showTimeField = !!timeGranularity; const labelPlacement = useMemo(() => { - if ( - (!originalProps.labelPlacement || originalProps.labelPlacement === "inside") && - !originalProps.label - ) { + const labelPlacement = + originalProps.labelPlacement ?? globalContext?.labelPlacement ?? "inside"; + + if (labelPlacement === "inside" && !label) { return "outside"; } - return originalProps.labelPlacement ?? "inside"; - }, [originalProps.labelPlacement, originalProps.label]); + return labelPlacement; + }, [originalProps.labelPlacement, globalContext?.labelPlacement, label]); const shouldLabelBeOutside = labelPlacement === "outside" || labelPlacement === "outside-left"; @@ -395,7 +396,7 @@ export function useDateRangePicker({ const getDateInputGroupProps = () => { return { as, - label: originalProps.label, + label, description, endContent, errorMessage, @@ -423,7 +424,7 @@ export function useDateRangePicker({ return { state, - label: originalProps.label, + label, slots, classNames, startContent, diff --git a/packages/components/input/src/use-input.ts b/packages/components/input/src/use-input.ts index d8cae3c3d7..af3d22a4fb 100644 --- a/packages/components/input/src/use-input.ts +++ b/packages/components/input/src/use-input.ts @@ -231,7 +231,15 @@ export function useInput(originalProps: UseSelectProps) { const {isHovered, hoverProps} = useHover({isDisabled: originalProps.isDisabled}); const labelPlacement = useMemo(() => { - if ((!originalProps.labelPlacement || originalProps.labelPlacement === "inside") && !label) { + const labelPlacement = + originalProps.labelPlacement ?? globalContext?.labelPlacement ?? "inside"; + + if (labelPlacement === "inside" && !label) { return "outside"; } - return originalProps.labelPlacement ?? "inside"; - }, [originalProps.labelPlacement, label]); + return labelPlacement; + }, [originalProps.labelPlacement, globalContext?.labelPlacement, label]); const hasPlaceholder = !!placeholder; const shouldLabelBeOutside = diff --git a/packages/core/system/src/provider-context.ts b/packages/core/system/src/provider-context.ts index c33e2266a4..b6e863cc39 100644 --- a/packages/core/system/src/provider-context.ts +++ b/packages/core/system/src/provider-context.ts @@ -11,6 +11,13 @@ export type ProviderContextProps = { * @default false */ disableAnimation?: boolean; + /** + * Position where the label should appear. + * + * @default undefined + */ + labelPlacement?: "inside" | "outside" | "outside-left" | undefined; + /** /** * Whether to disable the ripple effect in the whole application. * If `disableAnimation` is set to `true`, this prop will be ignored. diff --git a/packages/core/system/src/provider.tsx b/packages/core/system/src/provider.tsx index 45e85e775f..c6cc1a3be3 100644 --- a/packages/core/system/src/provider.tsx +++ b/packages/core/system/src/provider.tsx @@ -58,6 +58,7 @@ export const NextUIProvider: React.FC = ({ reducedMotion = "never", validationBehavior, locale = "en-US", + labelPlacement, // if minDate / maxDate are not specified in `defaultDates` // then they will be set in `use-date-input.ts` or `use-calendar-base.ts` defaultDates, @@ -85,6 +86,7 @@ export const NextUIProvider: React.FC = ({ disableAnimation, disableRipple, validationBehavior, + labelPlacement, }; }, [ createCalendar, @@ -93,6 +95,7 @@ export const NextUIProvider: React.FC = ({ disableAnimation, disableRipple, validationBehavior, + labelPlacement, ]); return ( diff --git a/packages/core/theme/src/components/date-input.ts b/packages/core/theme/src/components/date-input.ts index 4334d08d48..70773a85ba 100644 --- a/packages/core/theme/src/components/date-input.ts +++ b/packages/core/theme/src/components/date-input.ts @@ -217,7 +217,6 @@ const dateInput = tv({ color: "default", size: "md", fullWidth: true, - labelPlacement: "inside", isDisabled: false, }, compoundVariants: [ diff --git a/packages/core/theme/src/components/input.ts b/packages/core/theme/src/components/input.ts index 5cb6ef14a5..5e5d40fd67 100644 --- a/packages/core/theme/src/components/input.ts +++ b/packages/core/theme/src/components/input.ts @@ -258,7 +258,6 @@ const input = tv({ color: "default", size: "md", fullWidth: true, - labelPlacement: "inside", isDisabled: false, isMultiline: false, }, diff --git a/packages/core/theme/src/components/select.ts b/packages/core/theme/src/components/select.ts index 67c216126e..4d0c4e835b 100644 --- a/packages/core/theme/src/components/select.ts +++ b/packages/core/theme/src/components/select.ts @@ -209,7 +209,6 @@ const select = tv({ variant: "flat", color: "default", size: "md", - labelPlacement: "inside", fullWidth: true, isDisabled: false, isMultiline: false, diff --git a/packages/storybook/.storybook/preview.tsx b/packages/storybook/.storybook/preview.tsx index c519a071c4..c294cc65af 100644 --- a/packages/storybook/.storybook/preview.tsx +++ b/packages/storybook/.storybook/preview.tsx @@ -7,13 +7,13 @@ import "./style.css"; import {withStrictModeSwitcher} from "./addons/react-strict-mode"; const decorators: Preview["decorators"] = [ - (Story, {globals: {locale, disableAnimation}}) => { + (Story, {globals: {locale, disableAnimation, labelPlacement}}) => { const direction = // @ts-ignore locale && new Intl.Locale(locale)?.textInfo?.direction === "rtl" ? "rtl" : undefined; return ( - +
@@ -127,6 +127,18 @@ const globalTypes: Preview["globalTypes"] = { ], }, }, + labelPlacement: { + name: "Label Placement", + description: "Position of label.", + toolbar: { + icon: "component", + items: [ + {value: "inside", title: "Inside"}, + {value: "outside", title: "Outside"}, + {value: "outside-left", title: "Outside Left"}, + ], + }, + } }; const preview: Preview = { From db5d31c3bded17d83bcdcacca6523c245c04c0bd Mon Sep 17 00:00:00 2001 From: Maharshi Alpesh Date: Thu, 12 Dec 2024 18:17:42 +0530 Subject: [PATCH 2/5] chore: reafctoring --- .../date-input/src/use-date-input.ts | 16 ++++--------- .../date-input/src/use-time-input.ts | 16 ++++--------- .../date-picker/src/use-date-picker-base.ts | 23 +++++++++---------- .../date-picker/src/use-date-range-picker.ts | 17 ++++---------- packages/components/select/src/use-select.ts | 15 ++++-------- packages/core/system/src/hooks/index.ts | 1 + .../system/src/hooks/use-label-placement.ts | 21 +++++++++++++++++ packages/core/system/src/index.ts | 2 ++ 8 files changed, 55 insertions(+), 56 deletions(-) create mode 100644 packages/core/system/src/hooks/index.ts create mode 100644 packages/core/system/src/hooks/use-label-placement.ts diff --git a/packages/components/date-input/src/use-date-input.ts b/packages/components/date-input/src/use-date-input.ts index e1cb2b1935..28bddbd40a 100644 --- a/packages/components/date-input/src/use-date-input.ts +++ b/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(originalProps: UseDateInputPro const isInvalid = isInvalidProp || ariaIsInvalid; - const labelPlacement = useMemo(() => { - 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"; diff --git a/packages/components/date-input/src/use-time-input.ts b/packages/components/date-input/src/use-time-input.ts index b953425efd..3dcd6c1351 100644 --- a/packages/components/date-input/src/use-time-input.ts +++ b/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(originalProps: UseTimeInputPro const baseStyles = clsx(classNames?.base, className); - const labelPlacement = useMemo(() => { - 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"; diff --git a/packages/components/date-picker/src/use-date-picker-base.ts b/packages/components/date-picker/src/use-date-picker-base.ts index a89ac5ff4e..2283a40610 100644 --- a/packages/components/date-picker/src/use-date-picker-base.ts +++ b/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(originalProps: UseDatePic "data-invalid": dataAttr(originalProps?.isInvalid), } as DateInputProps; - const labelPlacement = useMemo(() => { - 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, diff --git a/packages/components/date-picker/src/use-date-range-picker.ts b/packages/components/date-picker/src/use-date-range-picker.ts index a1301d5bbd..e0b55c347e 100644 --- a/packages/components/date-picker/src/use-date-range-picker.ts +++ b/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({ const showTimeField = !!timeGranularity; - const labelPlacement = useMemo(() => { - 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"; diff --git a/packages/components/select/src/use-select.ts b/packages/components/select/src/use-select.ts index b10e16e318..cf4e9e8f2d 100644 --- a/packages/components/select/src/use-select.ts +++ b/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(originalProps: UseSelectProps) { const {focusProps, isFocused, isFocusVisible} = useFocusRing(); const {isHovered, hoverProps} = useHover({isDisabled: originalProps.isDisabled}); - const labelPlacement = useMemo(() => { - 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 = diff --git a/packages/core/system/src/hooks/index.ts b/packages/core/system/src/hooks/index.ts new file mode 100644 index 0000000000..752604dc49 --- /dev/null +++ b/packages/core/system/src/hooks/index.ts @@ -0,0 +1 @@ +export {useLabelPlacement} from "./use-label-placement"; diff --git a/packages/core/system/src/hooks/use-label-placement.ts b/packages/core/system/src/hooks/use-label-placement.ts new file mode 100644 index 0000000000..33c4bfdd14 --- /dev/null +++ b/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]); +} diff --git a/packages/core/system/src/index.ts b/packages/core/system/src/index.ts index 316a00756c..25433c7e5d 100644 --- a/packages/core/system/src/index.ts +++ b/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"; From 03e94055513210ad6f8f1163397b9b57282a57c4 Mon Sep 17 00:00:00 2001 From: Maharshi Alpesh Date: Fri, 13 Dec 2024 19:50:22 +0530 Subject: [PATCH 3/5] chore: updating the dependency --- packages/components/date-input/package.json | 4 ++-- packages/components/date-picker/package.json | 4 ++-- .../date-picker/src/use-date-picker-base.ts | 14 ++------------ packages/components/input/package.json | 4 ++-- packages/components/select/package.json | 4 ++-- 5 files changed, 10 insertions(+), 20 deletions(-) diff --git a/packages/components/date-input/package.json b/packages/components/date-input/package.json index b93da09a42..37eebc1157 100644 --- a/packages/components/date-input/package.json +++ b/packages/components/date-input/package.json @@ -34,8 +34,8 @@ "postpack": "clean-package restore" }, "peerDependencies": { - "@nextui-org/system": ">=2.4.0", - "@nextui-org/theme": ">=2.4.0", + "@nextui-org/system": ">=2.4.3", + "@nextui-org/theme": ">=2.4.5", "react": ">=18 || >=19.0.0-rc.0", "react-dom": ">=18 || >=19.0.0-rc.0" }, diff --git a/packages/components/date-picker/package.json b/packages/components/date-picker/package.json index 10dbe6f3a1..e26f503b0b 100644 --- a/packages/components/date-picker/package.json +++ b/packages/components/date-picker/package.json @@ -34,8 +34,8 @@ "postpack": "clean-package restore" }, "peerDependencies": { - "@nextui-org/system": ">=2.4.0", - "@nextui-org/theme": ">=2.4.0", + "@nextui-org/system": ">=2.4.3", + "@nextui-org/theme": ">=2.4.5", "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1", "react": ">=18 || >=19.0.0-rc.0", "react-dom": ">=18 || >=19.0.0-rc.0" diff --git a/packages/components/date-picker/src/use-date-picker-base.ts b/packages/components/date-picker/src/use-date-picker-base.ts index 2283a40610..8a88836d74 100644 --- a/packages/components/date-picker/src/use-date-picker-base.ts +++ b/packages/components/date-picker/src/use-date-picker-base.ts @@ -10,12 +10,7 @@ import type {ValueBase} from "@react-types/shared"; import {dataAttr} from "@nextui-org/shared-utils"; import {dateInput, DatePickerVariantProps} from "@nextui-org/theme"; import {useCallback} from "react"; -import { - HTMLNextUIProps, - mapPropsVariants, - useLabelPlacement, - useProviderContext, -} from "@nextui-org/system"; +import {HTMLNextUIProps, mapPropsVariants, useProviderContext} from "@nextui-org/system"; import {mergeProps} from "@react-aria/utils"; import {useDOMRef} from "@nextui-org/react-utils"; import {useLocalizedStringFormatter} from "@react-aria/i18n"; @@ -239,15 +234,10 @@ export function useDatePickerBase(originalProps: UseDatePic "data-invalid": dataAttr(originalProps?.isInvalid), } as DateInputProps; - const labelPlacement = useLabelPlacement({ - labelPlacement: originalProps.labelPlacement, - label, - }); - const timeInputProps = { ...userTimeInputProps, size: "sm", - labelPlacement, + labelPlacement: "outside-left", label: userTimeInputProps?.label || stringFormatter.format("time"), placeholderValue: timePlaceholder, hourCycle: props.hourCycle, diff --git a/packages/components/input/package.json b/packages/components/input/package.json index 5ad2742260..49805572a9 100644 --- a/packages/components/input/package.json +++ b/packages/components/input/package.json @@ -36,8 +36,8 @@ "peerDependencies": { "react": ">=18 || >=19.0.0-rc.0", "react-dom": ">=18 || >=19.0.0-rc.0", - "@nextui-org/theme": ">=2.4.0", - "@nextui-org/system": ">=2.4.0" + "@nextui-org/system": ">=2.4.3", + "@nextui-org/theme": ">=2.4.5" }, "dependencies": { "@nextui-org/form": "workspace:*", diff --git a/packages/components/select/package.json b/packages/components/select/package.json index 15b46ce305..4e9df4c346 100644 --- a/packages/components/select/package.json +++ b/packages/components/select/package.json @@ -34,8 +34,8 @@ "postpack": "clean-package restore" }, "peerDependencies": { - "@nextui-org/system": ">=2.4.0", - "@nextui-org/theme": ">=2.4.0", + "@nextui-org/system": ">=2.4.3", + "@nextui-org/theme": ">=2.4.5", "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1", "react": ">=18 || >=19.0.0-rc.0", "react-dom": ">=18 || >=19.0.0-rc.0" From 3ebb7fd01d61c99334b7e32806ba6107fda0cbd9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= Date: Sat, 18 Jan 2025 21:15:37 +0800 Subject: [PATCH 4/5] chore(changeset): update package name --- .changeset/chilly-dancers-switch.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/.changeset/chilly-dancers-switch.md b/.changeset/chilly-dancers-switch.md index 97fe3da37d..468180d55d 100644 --- a/.changeset/chilly-dancers-switch.md +++ b/.changeset/chilly-dancers-switch.md @@ -1,10 +1,10 @@ --- -"@nextui-org/date-picker": patch -"@nextui-org/date-input": patch -"@nextui-org/select": patch -"@nextui-org/input": patch -"@nextui-org/system": patch -"@nextui-org/theme": patch +"@heroui/date-picker": patch +"@heroui/date-input": patch +"@heroui/select": patch +"@heroui/input": patch +"@heroui/system": patch +"@heroui/theme": patch --- -Adding support for global labelPlacement prop.(ENG-1694) +Adding support for global labelPlacement prop. (ENG-1694) From 8523a5f7f66229ce83df4a72063f61b239e83f60 Mon Sep 17 00:00:00 2001 From: Maharshi Alpesh Date: Thu, 30 Jan 2025 16:38:40 +0530 Subject: [PATCH 5/5] chore: adding Marcus's suggestions --- packages/components/input/src/use-input.ts | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/components/input/src/use-input.ts b/packages/components/input/src/use-input.ts index cf30cfbffb..0eb3409e36 100644 --- a/packages/components/input/src/use-input.ts +++ b/packages/components/input/src/use-input.ts @@ -1,7 +1,13 @@ import type {InputVariantProps, SlotsToClasses, InputSlots} from "@heroui/theme"; import type {AriaTextFieldOptions} from "@react-aria/textfield"; -import {HTMLHeroUIProps, mapPropsVariants, PropGetter, useProviderContext} from "@heroui/system"; +import { + HTMLHeroUIProps, + mapPropsVariants, + PropGetter, + useLabelPlacement, + useProviderContext, +} from "@heroui/system"; import {useSafeLayoutEffect} from "@heroui/use-safe-layout-effect"; import {AriaTextFieldProps} from "@react-types/textfield"; import {useFocusRing} from "@react-aria/focus"; @@ -222,16 +228,10 @@ export function useInput(() => { - 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 errorMessage = typeof props.errorMessage === "function"