@ehfuse/mui-form-controls 3.2.0 → 3.2.2

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"> & {

package/dist/devDebug.d.ts

@@ -0,0 +1,35 @@
+/**
+ * 패키지 전역 개발용 콘솔 로그 스위치.
+ * 앱 진입 시 `setMuiFormControlsDebug(true)` 한 번이면
+ * DateTextField / TimeTextField / DateTimeTextField 등에서 value 동기화 로그가 출력된다.
+ * 필드가 많으면 `nameIncludes` / `nameMatch`, 컴포넌트만 골라서는 `scopes`로 범위를 줄일 수 있다.
+ *
+ * @license MIT
+ */
+/** value 동기화 로그를 낼 수 있는 컴포넌트 scope (muiFormControlsDevLog 첫 인자와 동일) */
+export type MuiFormControlsDebugScope = "DateTextField" | "TimeTextField" | "DateTimeTextField";
+export type MuiFormControlsDebugOptions = {
+    /** `name` prop에 이 부분 문자열이 있을 때만 로그 (여러 필드일 때 노이즈 감소) */
+    nameIncludes?: string;
+    /** `name` prop이 이 정규식과 맞을 때만 로그 */
+    nameMatch?: RegExp;
+    /**
+     * 한 개 이상이면 **이 컴포넌트(scope)에서만** 로그.
+     * 생략 또는 빈 배열이면 scope 제한 없음(이름 필터만 적용).
+     */
+    scopes?: MuiFormControlsDebugScope[];
+};
+/**
+ * @param enabled 로그 출력 여부
+ * @param options `scopes` / `nameIncludes` / `nameMatch`로 범위 축소 (조건은 AND)
+ */
+export declare function setMuiFormControlsDebug(enabled: boolean, options?: MuiFormControlsDebugOptions): void;
+export declare function getMuiFormControlsDebug(): boolean;
+export declare function getMuiFormControlsDebugOptions(): Readonly<MuiFormControlsDebugOptions & {
+    enabled: boolean;
+}>;
+/**
+ * 컴포넌트 내부 전용.
+ * @param scope 예: "DateTextField"
+ */
+export declare function muiFormControlsDevLog(scope: string, payload: Record<string, unknown>): void;