@dotss/ui 0.0.10 → 0.0.12

package/TextArea/TextArea.es.js

@@ -1,7 +1,13 @@
-import { jsxs as g, jsx as p } from "@emotion/react/jsx-runtime";
-import { forwardRef as A, useRef as m, useState as j, useId as F, useEffect as M } from "react";
-import l from "@emotion/styled";
-const T = l.div`
+import { jsxs as u, jsx as a } from "@emotion/react/jsx-runtime";
+import { forwardRef as F, useRef as v, useState as q, useId as h, useEffect as B } from "react";
+import s from "@emotion/styled";
+import y from "../Typography/Typography.es.js";
+const E = s.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  ${({ fullWidth: t }) => t ? { width: "100%" } : null};
+`, D = s.div`
   position: relative;
   border-radius: 12px;
   height: auto;
@@ -9,12 +15,12 @@ const T = l.div`
 
   ${({
   theme: {
-    palette: { brand: t, background: i, grey: n }
+    palette: { brand: t, background: e, grey: n }
   },
   variant: c,
   isFocused: r
 }) => c === "filled" ? {
-  backgroundColor: i.primary,
+  backgroundColor: e.primary,
   border: "1px solid transparent"
 } : c === "outlined" ? r ? {
   backgroundColor: n.white,
@@ -28,9 +34,9 @@ const T = l.div`
   theme: {
     palette: { etc: t }
   },
-  variant: i,
+  variant: e,
   helper: n
-}) => i === "outlined" && ((n == null ? void 0 : n.severity) === "error" || n != null && n.message) ? {
+}) => e === "outlined" && ((n == null ? void 0 : n.severity) === "error" || n != null && n.message) ? {
   borderColor: t.red
 } : {}}
 
@@ -38,9 +44,9 @@ const T = l.div`
   theme: {
     palette: { grey: t }
   },
-  variant: i,
+  variant: e,
   disabled: n
-}) => i === "outlined" && n ? {
+}) => e === "outlined" && n ? {
   backgroundColor: t[10],
   borderColor: t[30]
 } : {}}
@@ -48,7 +54,7 @@ const T = l.div`
   ${({ fullWidth: t }) => t ? {
   width: "100%"
 } : {}}
-`, q = l.textarea`
+`, G = s.textarea`
   width: 100%;
   overflow: hidden;
   resize: none;
@@ -82,7 +88,10 @@ const T = l.div`
 })};
   }
 
-  &::placeholder {
+  &::placeholder,
+  &::-webkit-input-placeholder,
+  &::-ms-input-placeholder,
+  &::-moz-placeholder {
     color: ${({ theme: t }) => t.palette.grey[50]};
     text-align: justify;
   }
@@ -95,8 +104,8 @@ const T = l.div`
   &[disabled]::placeholder {
     color: ${({ theme: t }) => t.palette.grey[30]};
   }
-`, B = l.div`
-  color: ${({ theme: t, disabled: i }) => i ? t.palette.grey[30] : t.palette.grey[50]};
+`, J = s.div`
+  color: ${({ theme: t, disabled: e }) => e ? t.palette.grey[30] : t.palette.grey[50]};
   text-align: right;
   padding-right: ${({ theme: t }) => t.spacing.content(4)}px;
   padding-bottom: ${({ theme: t }) => t.spacing.content(3)}px;
@@ -113,10 +122,19 @@ const T = l.div`
 })};
 
   & > span {
-    color: ${({ theme: t, disabled: i }) => i ? t.palette.grey[30] : t.palette.grey[100]};
+    color: ${({ theme: t, disabled: e }) => e ? t.palette.grey[30] : t.palette.grey[100]};
+  }
+`, K = s.p`
+  position: absolute;
+  left: 0;
+  bottom: calc(
+    ${({ theme: { spacing: t } }) => -t.content(1)}px -
+      ${({
+  theme: {
+    typography: { c3R: t }
   }
-`, I = l.p`
-  margin-top: ${({ theme: { spacing: t } }) => t.content(1)}px;
+}) => t.lineHeight}
+  );
   color: ${({ theme: t }) => t.palette.etc.red};
 
   ${({
@@ -129,94 +147,110 @@ const T = l.div`
   lineHeight: t.lineHeight,
   letterSpacing: t.letterSpacing
 })};
-`, E = l.p`
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-`, J = A(
+
+  &:empty {
+    display: none;
+  }
+`, V = F(
   ({
     onChange: t,
-    value: i,
+    value: e,
     variant: n = "filled",
     size: c = "large",
     maxLength: r = 290,
-    onFocus: h,
-    onBlur: y,
+    onFocus: $,
+    onBlur: x,
     helper: o,
-    disabled: s = !1,
-    wrapperProps: d,
-    ...S
-  }, H) => {
-    const f = m(null), u = m(c === "large" ? 112.5 : 57.5), [v, x] = j(!1), $ = F(), w = (e) => {
-      e.target.value.length > r && (e.target.value = e.target.value.slice(0, r)), typeof t == "function" && t(e);
-    }, C = (e) => {
-      x(!0), typeof h == "function" && h(e);
-    }, z = (e) => {
-      x(!1), typeof y == "function" && y(e);
-    }, b = () => {
-      var a;
-      const e = (a = f.current) == null ? void 0 : a.querySelector("textarea");
-      e && e.focus();
+    disabled: d = !1,
+    fullWidth: w,
+    wrapperProps: g,
+    ...z
+  }, C) => {
+    const f = v(null), p = v(c === "large" ? 112.5 : 57.5), [b, m] = q(!1), S = h(), k = h(), H = h(), W = (i) => {
+      i.target.value.length > r && (i.target.value = i.target.value.slice(0, r)), typeof t == "function" && t(i);
+    }, A = (i) => {
+      m(!0), typeof $ == "function" && $(i);
+    }, I = (i) => {
+      m(!1), typeof x == "function" && x(i);
+    }, M = () => {
+      var l;
+      const i = (l = f.current) == null ? void 0 : l.querySelector("textarea");
+      i && i.focus();
     };
-    return M(() => {
-      var a;
-      const e = (a = f.current) == null ? void 0 : a.querySelector("textarea");
-      if (e) {
-        e.style.height = "auto";
-        const { scrollHeight: k, clientHeight: W } = e;
-        e.style.height = `${u.current}px`, e.style.height = `${Math.max(k, u.current, W)}px`;
+    return B(() => {
+      var l;
+      const i = (l = f.current) == null ? void 0 : l.querySelector("textarea");
+      if (i) {
+        i.style.height = "auto";
+        const { scrollHeight: T, clientHeight: j } = i;
+        i.style.height = `${p.current}px`, i.style.height = `${Math.max(T, p.current, j)}px`;
       }
-    }, [i]), /* @__PURE__ */ g("div", { children: [
-      /* @__PURE__ */ g(
-        T,
+    }, [e]), /* @__PURE__ */ u(E, { fullWidth: w, children: [
+      /* @__PURE__ */ u(
+        D,
         {
           ref: f,
-          isFocused: v,
+          isFocused: b,
           variant: n,
           helper: o,
-          disabled: s,
-          ...d,
-          css: d == null ? void 0 : d.inlineCSS,
+          disabled: d,
+          ...g,
+          css: g == null ? void 0 : g.inlineCSS,
           children: [
-            /* @__PURE__ */ p(
-              q,
+            /* @__PURE__ */ a(
+              G,
               {
-                ref: H,
-                onChange: w,
-                onFocus: C,
-                onBlur: z,
-                value: i,
-                disabled: s,
+                ref: C,
+                id: k,
+                onChange: W,
+                onFocus: A,
+                onBlur: I,
+                value: e,
+                disabled: d,
                 "aria-invalid": (o == null ? void 0 : o.severity) === "error",
-                "aria-describedby": o != null && o.message ? $ : void 0,
-                minHeight: u.current,
-                ...S
+                "aria-describedby": o != null && o.message ? S : H,
+                minHeight: p.current,
+                ...z
               }
             ),
-            /* @__PURE__ */ g(B, { disabled: s, onClick: b, children: [
-              "(",
-              /* @__PURE__ */ p("span", { children: i.length }),
-              " / ",
-              r,
-              ")"
-            ] })
+            /* @__PURE__ */ u(
+              J,
+              {
+                disabled: d,
+                onClick: M,
+                "aria-label": `현재 ${e.length}자 입력됨, 최대 ${r}자까지 입력 가능`,
+                children: [
+                  "(",
+                  /* @__PURE__ */ a("span", { children: e.length }),
+                  " / ",
+                  r,
+                  ")"
+                ]
+              }
+            )
           ]
         }
       ),
-      (o == null ? void 0 : o.message) && !s && /* @__PURE__ */ p(I, { id: $, helper: o, children: o.message }),
-      i.length >= r && /* @__PURE__ */ g(E, { "aria-live": "assertive", role: "alert", children: [
-        "최대 입력 글자 수에 도달하였습니다. ",
+      /* @__PURE__ */ a(
+        K,
+        {
+          id: S,
+          helper: o,
+          "aria-live": "assertive",
+          role: "alert",
+          children: !d && (o == null ? void 0 : o.message)
+        }
+      ),
+      /* @__PURE__ */ u(y, { visuallyHidden: !0, id: H, children: [
+        "최대 ",
         r,
-        " 자까지 입력이 가능합니다."
-      ] })
+        "까지 입력 가능"
+      ] }),
+      /* @__PURE__ */ a(y, { visuallyHidden: !0, "aria-live": "assertive", role: "alert", children: e.length >= r && `최대 입력 글자 수에 도달하였습니다. ${r} 자까지 입력이 가능합니다.` }),
+      /* @__PURE__ */ a(y, { visuallyHidden: !0, role: "status", children: e.length >= r * 0.8 && e.length < r && `최대 입력 가능한 글자 수의 80퍼센트에 도달했습니다. ${r * 0.8}자 입력됨.` })
     ] });
   }
 );
 export {
-  J as default
+  V as default
 };

package/TextArea/TextArea.stories.d.ts

@@ -21,5 +21,5 @@ export declare const Outlined: Story;
 export declare const Filled: Story;
 export declare const FullWidth: Story;
 export declare const Small: Story;
-export declare const Success: Story;
 export declare const Error: Story;
+export declare const WithScreenReaderSupport: Story;

package/TextField/TextField.cjs

@@ -1,34 +1,34 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("@emotion/react/jsx-runtime"),g=require("react"),x=require("../Icon/Icon.cjs"),z=require("@emotion/styled"),F=t=>t&&t.__esModule?t:{default:t},d=F(z),O=d.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("@emotion/react/jsx-runtime"),u=require("react"),b=require("../Icon/Icon.cjs"),O=require("@emotion/styled"),_=t=>t&&t.__esModule?t:{default:t},f=_(O),T=f.default.div`
   position: relative;
   display: flex;
   flex-direction: column;
   ${({fullWidth:t})=>t?{width:"100%"}:null};
-`,_=d.default.div`
+`,V=f.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: ${({theme:{spacing:t}})=>t.content(2)}px;
   border: 1px solid transparent;
 
-  ${({theme:{palette:{green:t,grey:e,background:i,etc:o}},variant:f,helper:s})=>{let r={backgroundColor:e.white,borderColor:e[50],color:e[100]};switch(f){case"outlined":(s==null?void 0:s.severity)==="success"&&(r={...r,borderColor:`${t[70]} !important`}),(s==null?void 0:s.severity)==="error"&&(r={...r,borderColor:`${o.red} !important`});break;case"filled":r={backgroundColor:i.primary};break}return r}};
+  ${({theme:{palette:{green:t,grey:e,background:o,etc:n}},variant:g,helper:s})=>{let r={backgroundColor:e.white,borderColor:e[50],color:e[100]};switch(g){case"outlined":(s==null?void 0:s.severity)==="success"&&(r={...r,borderColor:`${t[70]} !important`}),(s==null?void 0:s.severity)==="error"&&(r={...r,borderColor:`${n.red} !important`});break;case"filled":r={backgroundColor:o.primary};break}return r}};
 
-  ${({theme:{spacing:t},size:e})=>{let i={maxHeight:48,padding:`${t.content(3)}px ${t.content(4)}px`,borderRadius:10};switch(e){case"2xLarge":i={maxHeight:80,padding:`${t.content(4)}px ${t.content(5)}px`,borderRadius:12,"& svg":{width:48,height:48}};break;case"xLarge":i={maxHeight:56,padding:t.content(4),borderRadius:12};break}return i}};
+  ${({theme:{spacing:t},size:e})=>{let o={maxHeight:48,padding:`${t.content(3)}px ${t.content(4)}px`,borderRadius:10};switch(e){case"2xLarge":o={maxHeight:80,padding:`${t.content(4)}px ${t.content(5)}px`,borderRadius:12,"& svg":{width:48,height:48}};break;case"xLarge":o={maxHeight:56,padding:t.content(4),borderRadius:12};break}return o}};
 
-  ${({theme:{palette:{brand:t}},variant:e,focus:i})=>e==="outlined"&&i?{borderColor:t.primary.line}:null};
+  ${({theme:{palette:{brand:t}},variant:e,focus:o})=>e==="outlined"&&o?{borderColor:t.primary.line}:null};
 
   ${({fullWidth:t})=>t?{width:"100%"}:null};
 
-  ${({theme:{palette:{grey:t}},variant:e,disabled:i})=>{if(!i)return null;let o={backgroundColor:t[10],borderColor:t[30]};switch(e){case"filled":o={backgroundColor:t[10]};break}return o}}
-`,T=d.default.input`
+  ${({theme:{palette:{grey:t}},variant:e,disabled:o})=>{if(!o)return null;let n={backgroundColor:t[10],borderColor:t[30]};switch(e){case"filled":n={backgroundColor:t[10]};break}return n}}
+`,M=f.default.input`
   width: inherit;
   flex-grow: 1;
   border: none;
   background-color: transparent;
   outline: 0;
 
-  ${({theme:{typography:{b2R:t,h0R:e}},inputSize:i})=>i==="2xLarge"?{fontSize:e.size,fontWeight:e.weight,lineHeight:e.lineHeight,letterSpacing:e.letterSpacing}:{fontSize:t.size,fontWeight:t.weight,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing}};
+  ${({theme:{typography:{b2R:t,h0R:e}},inputSize:o})=>o==="2xLarge"?{fontSize:e.size,fontWeight:e.weight,lineHeight:e.lineHeight,letterSpacing:e.letterSpacing}:{fontSize:t.size,fontWeight:t.weight,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing}};
 
-  &::placeholder {
+  &::placeholder, &::-webkit-input-placeholder, &::-ms-input-placeholder, &::-moz-placeholder {
     ${({theme:{palette:{grey:t}},variant:e})=>({color:t[50]})};
   }
 
@@ -36,12 +36,28 @@
     cursor: not-allowed;
     
     ${({theme:{palette:{grey:t}}})=>({color:t[30],"&::placeholder":{color:t[30]}})}
-`,I=d.default.div`
+
+    &:focus {
+      outline: 'none';
+    }
+
+    &[type='password']::-ms-reveal {
+      display: none;
+    }
+`,q=f.default.button`
+  &:empty {
+    display: none;
+  }
+`,E=f.default.div`
   position: absolute;
   left: 0;
   bottom: ${({inputSize:t})=>t==="2xLarge"?"-26px":"-16px"};
   white-space: nowrap;
-  ${({theme:{typography:{c3R:t,b1R:e}},inputSize:i})=>i==="2xLarge"?{fontSize:e.size,fontWeight:e.weight,lineHeight:e.lineHeight,letterSpacing:e.letterSpacing}:{fontSize:t.size,fontWeight:t.weight,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing}};
+  ${({theme:{typography:{c3R:t,b1R:e}},inputSize:o})=>o==="2xLarge"?{fontSize:e.size,fontWeight:e.weight,lineHeight:e.lineHeight,letterSpacing:e.letterSpacing}:{fontSize:t.size,fontWeight:t.weight,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing}};
 
-  ${({theme:{palette:{etc:t,grey:e}},helper:i})=>{const o={color:e[100]};return(i==null?void 0:i.severity)==="error"?{color:t.red}:o}}
-`,V=g.forwardRef(function({type:e,variant:i="outlined",size:o="large",startAdornment:f,endAdornment:s,fullWidth:r,helper:n,disabled:b,inlineCSS:w,onFocus:m,onBlur:p,disablePasswordVisibility:$,...j},h){const[v,S]=g.useState(!1),[l,C]=g.useState(!1),u=!$&&!s&&e==="password"&&(n==null?void 0:n.severity)!=="success",k=c=>{S(!0),typeof m=="function"&&m(c)},H=c=>{S(!1),typeof p=="function"&&p(c)},y=()=>C(c=>!c),L=()=>u&&l?"text":u&&!l?"password":e;return a.jsxs(O,{fullWidth:r,children:[a.jsxs(_,{variant:i,size:o,focus:v,fullWidth:r,helper:n,disabled:b,css:w,children:[f,a.jsx(T,{ref:h,type:L(),variant:i,inputSize:o,disabled:b,...j,onFocus:k,onBlur:H}),s,!s&&(n==null?void 0:n.severity)==="success"&&a.jsx(x.default,{name:"CheckLine",color:"green.70"}),u&&l&&a.jsx(x.default,{name:"EyeVisibleLine","data-testid":"EyeVisibleLine",onClick:y,inlineCSS:{cursor:"pointer"}}),u&&!l&&a.jsx(x.default,{name:"EyeInvisibleLine","data-testid":"EyeInvisibleLine",onClick:y,inlineCSS:{cursor:"pointer"}})]}),(n==null?void 0:n.message)&&a.jsx(I,{helper:n,inputSize:o,"data-testid":"helper",children:n==null?void 0:n.message})]})});exports.default=V;
+  ${({theme:{palette:{etc:t,grey:e}},helper:o})=>{const n={color:e[100]};return(o==null?void 0:o.severity)==="error"?{color:t.red}:n}}
+
+  &:empty {
+    display: none;
+  }
+`,W=u.forwardRef(function({type:e="text",variant:o="outlined",size:n="large",startAdornment:g,endAdornment:s,fullWidth:r,helper:i,disabled:x,inlineCSS:w,onFocus:y,onBlur:m,disablePasswordVisibility:S,helperProps:$,...j},k){const C=u.useId(),p=u.useId(),[H,v]=u.useState(!1),[d,I]=u.useState(!1),a=!S&&!s&&e==="password"&&(i==null?void 0:i.severity)!=="success",L=l=>{v(!0),typeof y=="function"&&y(l)},z=l=>{v(!1),typeof m=="function"&&m(l)},F=()=>I(l=>!l),h=()=>a&&d?"text":a&&!d?"password":e;return c.jsxs(T,{fullWidth:r,children:[c.jsxs(V,{variant:o,size:n,focus:H,fullWidth:r,helper:i,disabled:x,css:w,children:[g,c.jsx(M,{ref:k,id:C,type:h(),variant:o,inputSize:n,disabled:x,"aria-invalid":(i==null?void 0:i.severity)==="error","aria-describedby":i!=null&&i.message?p:void 0,...j,onFocus:L,onBlur:z}),s,!s&&(i==null?void 0:i.severity)==="success"&&c.jsx(b.default,{name:"CheckLine",color:"green.70","aria-label":"성공",role:"img"}),c.jsxs(q,{type:"button",tabIndex:a?0:-1,"aria-pressed":a?d:void 0,onClick:F,"aria-hidden":!a,"aria-label":a&&d?"비밀번호 표시됨":"비밀번호 숨김됨",children:[a&&d&&c.jsx(b.default,{name:"EyeVisibleLine","data-testid":"EyeVisibleLine",inlineCSS:{cursor:"pointer"}}),a&&!d&&c.jsx(b.default,{name:"EyeInvisibleLine","data-testid":"EyeInvisibleLine",inlineCSS:{cursor:"pointer"}})]})]}),c.jsx(E,{id:p,className:"textfield-helper","aria-live":(i==null?void 0:i.severity)==="error"?"assertive":"off",role:(i==null?void 0:i.severity)==="error"?"alert":"status",helper:i,inputSize:n,"data-testid":"helper",...$,children:i==null?void 0:i.message})]})});exports.default=W;

package/TextField/TextField.d.ts

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
 import { GeneralComponentProps, Size, Variant } from '../typings/component';
 
 export interface TextFieldProps extends GeneralComponentProps<Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>> {
@@ -12,6 +12,7 @@ export interface TextFieldProps extends GeneralComponentProps<Omit<InputHTMLAttr
     };
     fullWidth?: boolean;
     disablePasswordVisibility?: boolean;
+    helperProps?: HTMLAttributes<HTMLDivElement>;
 }
 declare const TextField: import('react').ForwardRefExoticComponent<TextFieldProps & import('react').RefAttributes<HTMLInputElement>>;
 export default TextField;