diff --git a/packages/admin/dashboard/src/components/common/icon-avatar/icon-avatar.tsx b/packages/admin/dashboard/src/components/common/icon-avatar/icon-avatar.tsx index 9d5cdc3e4e..d10216fc5a 100644 --- a/packages/admin/dashboard/src/components/common/icon-avatar/icon-avatar.tsx +++ b/packages/admin/dashboard/src/components/common/icon-avatar/icon-avatar.tsx @@ -4,6 +4,7 @@ import { PropsWithChildren } from "react" type IconAvatarProps = PropsWithChildren<{ className?: string size?: "small" | "large" | "xlarge" + variant?: "squared" | "rounded" }> /** @@ -13,6 +14,7 @@ type IconAvatarProps = PropsWithChildren<{ */ export const IconAvatar = ({ size = "small", + variant = "rounded", children, className, }: IconAvatarProps) => { @@ -20,6 +22,8 @@ export const IconAvatar = ({
div]:bg-ui-bg-field [&>div]:text-ui-fg-subtle [&>div]:flex [&>div]:size-6 [&>div]:items-center [&>div]:justify-center", { "size-7 rounded-md [&>div]:size-6 [&>div]:rounded-[4px]": diff --git a/packages/admin/dashboard/src/components/data-grid/components/data-grid-cell-container.tsx b/packages/admin/dashboard/src/components/data-grid/components/data-grid-cell-container.tsx index 3a4f81369b..a361e40416 100644 --- a/packages/admin/dashboard/src/components/data-grid/components/data-grid-cell-container.tsx +++ b/packages/admin/dashboard/src/components/data-grid/components/data-grid-cell-container.tsx @@ -20,16 +20,20 @@ export const DataGridCellContainer = ({ errors, rowErrors, outerComponent, -}: DataGridCellContainerProps & DataGridErrorRenderProps) => { + isMultiLine, +}: DataGridCellContainerProps & + DataGridErrorRenderProps & { isMultiLine?: boolean }) => { const error = get(errors, field) const hasError = !!error return ( -
+
-
+
{children} diff --git a/packages/admin/dashboard/src/components/data-grid/components/data-grid-multiline-cell.tsx b/packages/admin/dashboard/src/components/data-grid/components/data-grid-multiline-cell.tsx new file mode 100644 index 0000000000..ab2381f853 --- /dev/null +++ b/packages/admin/dashboard/src/components/data-grid/components/data-grid-multiline-cell.tsx @@ -0,0 +1,103 @@ +import { clx } from "@medusajs/ui" +import { useCallback, useEffect, useRef, useState } from "react" +import { Controller, ControllerRenderProps } from "react-hook-form" + +import { useCombinedRefs } from "../../../hooks/use-combined-refs" +import { useDataGridCell, useDataGridCellError } from "../hooks" +import { DataGridCellProps, InputProps } from "../types" +import { DataGridCellContainer } from "./data-grid-cell-container" + +export const DataGridMultilineCell = ({ + context, +}: DataGridCellProps) => { + const { field, control, renderProps } = useDataGridCell({ + context, + }) + const errorProps = useDataGridCellError({ context }) + + const { container, input } = renderProps + + return ( + { + return ( + + + + ) + }} + /> + ) +} + +const Inner = ({ + field, + inputProps, +}: { + field: ControllerRenderProps + inputProps: InputProps +}) => { + const { onChange: _, onBlur, ref, value, ...rest } = field + const { ref: inputRef, onBlur: onInputBlur, onChange, ...input } = inputProps + + const [localValue, setLocalValue] = useState(value) + const textareaRef = useRef(null) + + useEffect(() => { + setLocalValue(value) + }, [value]) + + const combinedRefs = useCombinedRefs(inputRef, ref, textareaRef) + + const adjustTextareaHeight = useCallback(() => { + const textarea = textareaRef.current + if (textarea) { + // Reset height to 0 to get accurate scrollHeight + textarea.style.height = "0px" + // Set the height to match content (minimum 24px for min visible height) + const newHeight = Math.max(textarea.scrollHeight, 24) + textarea.style.height = `${newHeight}px` + } + }, []) + + // Adjust height when value changes + useEffect(() => { + adjustTextareaHeight() + }, [localValue, adjustTextareaHeight]) + + useEffect(() => { + // Immediate adjustment + adjustTextareaHeight() + // Delayed adjustment to handle any layout shifts + const timeoutId = setTimeout(adjustTextareaHeight, 50) + return () => clearTimeout(timeoutId) + }, [adjustTextareaHeight]) + + return ( +