@seed-design/react 3.0.0 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/lib/components/TextField/TextField.cjs +4 -0
  2. package/lib/components/TextField/TextField.d.ts.map +1 -1
  3. package/lib/components/TextField/TextField.js +4 -0
  4. package/package.json +1 -1
  5. package/src/components/TextField/TextField.tsx +9 -0
package/lib/components/TextField/TextField.cjs CHANGED
@@ -57,11 +57,15 @@ var TextFieldTextarea = (0, react.forwardRef)(({ className, autoresize = true, .
57
57
  const prevAlignment = input.style.alignSelf;
58
58
  const prevOverflow = input.style.overflow;
59
59
  if (!("MozAppearance" in input.style)) input.style.overflow = "hidden";
60
+ const parent = input.parentElement;
61
+ const prevParentMinHeight = parent?.style.minHeight ?? "";
62
+ if (parent) parent.style.minHeight = getComputedStyle(parent).height;
60
63
  input.style.alignSelf = "start";
61
64
  input.style.height = "auto";
62
65
  input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;
63
66
  input.style.overflow = prevOverflow;
64
67
  input.style.alignSelf = prevAlignment;
68
+ if (parent) parent.style.minHeight = prevParentMinHeight;
65
69
  }, [
66
70
  inputRef,
67
71
  otherProps.style?.height,
package/lib/components/TextField/TextField.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAuB,MAAM,+BAA+B,CAAC;AAE/E,OAAO,EAAa,KAAK,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAE5F,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAcvE,MAAM,WAAW,kBAAmB,SAAQ,qBAAqB,EAAE,SAAS,CAAC,SAAS;CAAG;AAEzF,eAAO,MAAM,aAAa,2FAGzB,CAAC;AAIF,MAAM,WAAW,wBAAyB,SAAQ,iBAAiB;CAAG;AAEtE,eAAO,MAAM,mBAAmB,gGAG/B,CAAC;AAEF,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,mBAAmB,kGAG/B,CAAC;AAEF,MAAM,WAAW,wBAAyB,SAAQ,iBAAiB;CAAG;AAEtE,eAAO,MAAM,mBAAmB,gGAG/B,CAAC;AAEF,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,mBAAmB,kGAG/B,CAAC;AAIF,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,UAAU;CAAG;AAEpE,eAAO,MAAM,cAAc,8FA6B1B,CAAC;AAGF,MAAM,WAAW,sBAAuB,SAAQ,SAAS,CAAC,aAAa;IACrE;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,iBAAiB,oGAuE7B,CAAC"}
1
+ {"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAuB,MAAM,+BAA+B,CAAC;AAE/E,OAAO,EAAa,KAAK,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAE5F,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAcvE,MAAM,WAAW,kBAAmB,SAAQ,qBAAqB,EAAE,SAAS,CAAC,SAAS;CAAG;AAEzF,eAAO,MAAM,aAAa,2FAGzB,CAAC;AAIF,MAAM,WAAW,wBAAyB,SAAQ,iBAAiB;CAAG;AAEtE,eAAO,MAAM,mBAAmB,gGAG/B,CAAC;AAEF,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,mBAAmB,kGAG/B,CAAC;AAEF,MAAM,WAAW,wBAAyB,SAAQ,iBAAiB;CAAG;AAEtE,eAAO,MAAM,mBAAmB,gGAG/B,CAAC;AAEF,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,mBAAmB,kGAG/B,CAAC;AAIF,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,UAAU;CAAG;AAEpE,eAAO,MAAM,cAAc,8FA6B1B,CAAC;AAGF,MAAM,WAAW,sBAAuB,SAAQ,SAAS,CAAC,aAAa;IACrE;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,iBAAiB,oGAgF7B,CAAC"}
package/lib/components/TextField/TextField.js CHANGED
@@ -55,11 +55,15 @@ var TextFieldTextarea = forwardRef(({ className, autoresize = true, ...otherProp
55
55
  const prevAlignment = input.style.alignSelf;
56
56
  const prevOverflow = input.style.overflow;
57
57
  if (!("MozAppearance" in input.style)) input.style.overflow = "hidden";
58
+ const parent = input.parentElement;
59
+ const prevParentMinHeight = parent?.style.minHeight ?? "";
60
+ if (parent) parent.style.minHeight = getComputedStyle(parent).height;
58
61
  input.style.alignSelf = "start";
59
62
  input.style.height = "auto";
60
63
  input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;
61
64
  input.style.overflow = prevOverflow;
62
65
  input.style.alignSelf = prevAlignment;
66
+ if (parent) parent.style.minHeight = prevParentMinHeight;
63
67
  }, [
64
68
  inputRef,
65
69
  otherProps.style?.height,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/react",
3
- "version": "3.0.0",
3
+ "version": "3.0.1",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",
package/src/components/TextField/TextField.tsx CHANGED
@@ -154,6 +154,14 @@ export const TextFieldTextarea = forwardRef<HTMLTextAreaElement, TextFieldTextar
154
154
  input.style.overflow = "hidden";
155
155
  }
156
156
 
157
+ // `auto`로 줄인 채 scrollHeight를 읽으면 줄어든 레이아웃이 확정된다. 아래로 남은 스크롤
158
+ // 거리가 줄어든 양보다 작으면 조상(문서 포함)의 scrollTop이 줄어든 범위로 잘리고,
159
+ // 높이를 되돌려도 복원되지 않는다.
160
+ // 측정하는 동안 부모 높이를 고정해 바깥 레이아웃이 줄어들지 않게 한다.
161
+ const parent = input.parentElement;
162
+ const prevParentMinHeight = parent?.style.minHeight ?? "";
163
+ if (parent) parent.style.minHeight = getComputedStyle(parent).height;
164
+
157
165
  input.style.alignSelf = "start";
158
166
  input.style.height = "auto";
159
167
 
@@ -162,6 +170,7 @@ export const TextFieldTextarea = forwardRef<HTMLTextAreaElement, TextFieldTextar
162
170
 
163
171
  input.style.overflow = prevOverflow;
164
172
  input.style.alignSelf = prevAlignment;
173
+ if (parent) parent.style.minHeight = prevParentMinHeight;
165
174
  }, [inputRef, otherProps.style?.height, autoresize]);
166
175
 
167
176
  useLayoutEffect(() => {