@ehfuse/mui-form-controls 3.2.0 → 3.2.1

package/dist/components/ReadonlyDisplay.d.ts

@@ -11,6 +11,12 @@
  * 실제 입력 요소/IME/포커스 머신러리가 없어 렌더 비용이 크게 낮다.
  * 실제 <input> 이 꼭 필요하면 소비처가 `readonlyInput` prop 으로 예전 동작(진짜 입력칸)을 되살릴 수 있다.
  *
+ * ⚠️ 클래스 호환: 소비처 `sx` 에는 `& .MuiInputBase-input { textAlign }`, `& .MuiOutlinedInput-root { minHeight }`
+ * 같은 MUI 내부 셀렉터가 흔하다. 박스 렌더로 바뀌어도 그 스타일이 죽지 않도록 각 파트에 MUI 와 동일한
+ * 클래스명(MuiInputBase-root / MuiOutlinedInput-root / MuiInputBase-input / MuiOutlinedInput-input /
+ * MuiOutlinedInput-notchedOutline / MuiInputLabel-root / Mui-disabled)을 그대로 붙이고,
+ * 값 텍스트가 MUI input 과 같은 패딩을 갖게 해서 패딩/정렬 override 도 동일하게 먹도록 맞춘다.
+ *
  * @license MIT
  * @copyright 2025 김영진 (Kim Young Jin)
  * @author 김영진 (ehfuse@gmail.com)
@@ -36,6 +42,8 @@ export interface ReadonlyDisplayProps {
     dimmed?: boolean;
     /** true 면 값의 줄바꿈을 보존하고 여러 줄로 표시한다(말줄임 대신). */
     multiline?: boolean;
+    /** multiline 일 때 최소 줄 수(입력칸의 minRows 와 같은 높이를 유지한다). */
+    minRows?: number;
     /** 값 표시 영역 클릭 핸들러(읽기 전용 칸을 눌러 다이얼로그를 여는 패턴 지원). */
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     /** 네이티브 툴팁. */
@@ -45,4 +53,4 @@ export interface ReadonlyDisplayProps {
     sx?: SxProps<Theme>;
 }
 /** readonly/disabled 입력칸을 실제 input 없이 그리는 표시 컴포넌트. */
-export declare function ReadonlyDisplay({ label, value, prefix, suffix, startAdornment, endAdornment, showAffixOnlyWithValue, align, size, fullWidth, dimmed, multiline, onClick, title, className, id, sx, }: ReadonlyDisplayProps): import("react/jsx-runtime").JSX.Element;
+export declare function ReadonlyDisplay({ label, value, prefix, suffix, startAdornment, endAdornment, showAffixOnlyWithValue, align, size, fullWidth, dimmed, multiline, minRows, onClick, title, className, id, sx, }: ReadonlyDisplayProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ReadonlyField.d.ts

@@ -32,6 +32,17 @@ export type ReadonlyBoxFlags = {
  * readonly 든 disabled 든 "편집 불가" 이므로 둘 다 박스로 간다. 차이는 흐림(dimmed) 뿐이다.
  */
 export declare function shouldRenderReadonlyBox(props: ReadonlyBoxFlags): boolean;
+/**
+ * slotProps 에서 박스 렌더가 살릴 수 있는 것만 뽑는다.
+ * - `input.start/endAdornment` : 박스에도 그대로 붙인다(복사 버튼 등 클릭 가능한 요소 포함).
+ * - `htmlInput.style.textAlign` : 값 정렬로 옮긴다.
+ * 함수형 slotProps 는 ownerState 가 없어 해석할 수 없으므로 무시한다.
+ */
+export declare function pickSlotPropsForBox(slotProps: unknown): {
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    align?: "left" | "right" | "center";
+};
 /** 컨트롤 props 에서 박스 렌더에 필요한 공통 필드만 뽑는다(컴포넌트마다 반복되는 보일러플레이트 제거). */
 export declare function commonReadonlyBoxProps(props: {
     form?: FormLike | null;
@@ -45,7 +56,17 @@ export declare function commonReadonlyBoxProps(props: {
     id?: string;
     onClick?: unknown;
     sx?: ReadonlyDisplayProps["sx"];
+    slotProps?: unknown;
+    multiline?: boolean;
+    minRows?: number | string;
+    /** Select/LabelSelect 는 바깥 FormControl 에 레이아웃 sx 를 받는다 — 박스에도 함께 적용한다. */
+    formControlProps?: {
+        sx?: ReadonlyDisplayProps["sx"];
+    };
 }): {
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    align?: "left" | "right" | "center";
     form: FormLike | null | undefined;
     name: string | undefined;
     value: unknown;
@@ -56,6 +77,8 @@ export declare function commonReadonlyBoxProps(props: {
     className: string | undefined;
     id: string | undefined;
     onClick: React.MouseEventHandler<HTMLDivElement>;
+    multiline: boolean;
+    minRows: number | undefined;
     sx: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
 };
 type ReadonlyFieldProps = Omit<ReadonlyDisplayProps, "value" | "dimmed"> & {