ingred-ui 23.3.0 → 23.3.2

package/dist/components/Input/Input.d.ts

@@ -40,6 +40,10 @@ export type InputProps = (React.ComponentPropsWithoutRef<"input"> | React.Compon
      * エラーメッセージ（アクセシビリティ用）
      */
     errorMessage?: string;
+    /**
+     * 幅を明示的に指定
+     */
+    width?: string | number;
 };
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
 export default Input;

package/dist/components/Input/Input.stories.d.ts

@@ -20,4 +20,5 @@ export declare const Example: StoryObj<InputProps>;
 export declare const Sizes: StoryObj<InputProps>;
 export declare const Variants: StoryObj<InputProps>;
 export declare const FullWidth: StoryObj<InputProps>;
+export declare const WithWidth: StoryObj<InputProps>;
 export declare const Textarea: StoryObj<InputProps>;

package/dist/index.es.js

@@ -2933,7 +2933,7 @@ var ha=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
   color: ${N.basic[900]};
   background: transparent;
   cursor: pointer;
-`,gy=({isOpen:e,title:n,values:o,selectedIndex:l,selectOptions:s,onApply:c,onClose:u,menuIconSize:m})=>{const[g,h]=r(""),[f,b]=r(!1),[v,x]=r([]),[y,w]=r(0),[C,E]=r(!1),I=p((()=>s.map((e=>Object.assign(Object.assign({},e),{icon:t.cloneElement(e.icon,{size:m,color:N.basic[900]})})))),[s,m]),A=p((()=>I.reduce(((e,t)=>t.label.length>e.label.length?t:e),I[0])),[I]),k=i(null),M=d((e=>{w(e),E(!1)}),[]),H=d((()=>{var e;null===(e=k.current)||void 0===e||e.focus()}),[]),V=d((e=>{const t=[...v];t.splice(e,1),x(t)}),[v]),L=d((e=>{if(f)return;if(!(e.target instanceof HTMLInputElement))return;if("Backspace"===e.key&&0===e.target.selectionStart)return void x(v.slice(0,-1));const t=e.target.value.trim();""===t||v.includes(t)||"Enter"===e.key&&(x([...v,t]),h(""))}),[v,x,f]),D=d((()=>{x([]),h("")}),[]),Z=d((()=>{u()}),[u]),O=d((()=>{c(v,y),u()}),[v,y,c,u]),S=d((e=>{h(e.target.value)}),[]),$=d((()=>{b(!0)}),[]),R=d((()=>{b(!1)}),[]),z=d((()=>{h("")}),[]),T=p((()=>v.map(((e,n)=>t.createElement(Ox,{key:e,size:"medium",variant:"light",label:e,onRemove:()=>V(n)})))),[v,V]),B=p((()=>I.map((({label:e,icon:n},r)=>t.createElement(bl,{key:e,prepend:n,checked:y===r,onChange:()=>M(r)},e)))),[I,y,M]),G=p((()=>t.createElement(t.Fragment,null,t.cloneElement(I[y].icon,{size:m}),I[y].label)),[I,y,m]);return a((()=>{e&&(x(o),w(l))}),[e,l,o]),t.createElement(Cr,{isOpen:e,onClose:u},t.createElement(bt,{in:e},t.createElement(qx,null,t.createElement(ey,null,n),t.createElement(ty,null,t.createElement(ry,null,"条件"),t.createElement(kd,null,t.createElement(Ad,{open:C,trigger:t.createElement(iy,null,t.createElement(ay,{role:"presentation"},A.icon,A.label),t.createElement(oy,null,G),t.createElement(ly,null,t.createElement(X,{name:"arrow_down",color:"currentColor"}))),onOpenChange:E},B))),t.createElement(ny,null,t.createElement(ry,null,"値"),t.createElement(cy,null,t.createElement(dy,{type:"button",onClick:H}),T,t.createElement(uy,null,t.createElement("input",{ref:k,type:"text","aria-label":"フィルターする値",value:g,onChange:S,onCompositionStart:$,onCompositionEnd:R,onKeyDown:L,onBlur:z}),t.createElement(py,null,g)),t.createElement(my,{type:"button",onClick:D},t.createElement(X,{name:"close_circle",type:"fill",color:"currentColor"})))),t.createElement(sy,null,t.createElement("li",null,t.createElement(Pt,{size:"small",color:"clear",onClick:Z},"キャンセル")),t.createElement("li",null,t.createElement(Pt,{size:"small",onClick:O},"適用"))))))},hy=({title:e,values:n,selectedIndex:o,selectOptions:l,onChange:s,onSelectChange:c,size:u="medium",variant:m="dark",tagVariant:h,menuIconSize:f=22,disabled:b=!1,error:v=!1})=>{const{isSmall:x}=g(Zx),[y,w]=r(""),[C,E]=r(!1),[I,A]=r(!1),[k,M]=r(!1),[H,N]=r(!1),V=i(null),L=p((()=>h||("light"===m?"dark":"light")),[m,h]),D=i(null),Z=i(null),O=d((()=>{D.current&&E(D.current.clientWidth<D.current.scrollWidth)}),[E]),S=d((()=>{if(!D.current||!V.current)return;const e=V.current.getBoundingClientRect(),t=D.current.getBoundingClientRect(),n=Number(window.getComputedStyle(D.current).paddingRight.replace("px",""));return t.right-n-e.left}),[]),$=d((e=>{if(I)return;if(!(e.target instanceof HTMLInputElement))return;if("Backspace"===e.key&&0===e.target.selectionStart)return s(n.slice(0,-1),o),void requestAnimationFrame((()=>{O(),S()}));const t=e.target.value.trim();""===t||n.includes(t)||"Enter"===e.key&&(s([...n,t],o),w(""),requestAnimationFrame((()=>{O(),S()})))}),[n,s,w,I,o]),R=d((e=>{const t=[...n];t.splice(e,1),s(t,o),requestAnimationFrame((()=>{O(),S()}))}),[n,s,o]),z=d(((e,t)=>{s(e,t),c(t),requestAnimationFrame((()=>{O(),S()}))}),[s,c]),T=d((e=>{w(e.target.value)}),[]),B=d((()=>{A(!0)}),[]),G=d((()=>{A(!1)}),[]),W=d((()=>{M(!0)}),[]),P=d((()=>{M(!1)}),[]),j=d((()=>{b||N(!0)}),[b]),F=d((()=>{N(!1)}),[]),Y=d((()=>{F(),w("")}),[F]);a((()=>{if(!window.ResizeObserver)return;if(!D.current)return;const e=new window.ResizeObserver((()=>{D.current&&(O(),S())}));return e.observe(D.current),()=>{e.disconnect()}}),[O,S]);const J=p((()=>n.map(((e,n)=>t.createElement(Ox,{key:e,size:u,variant:L,label:e,onRemove:()=>R(n)})))),[n,u,L,R]),U={small:18,medium:20,large:22}[u];return t.createElement(t.Fragment,null,t.createElement(Sx,{variant:m,size:u,selectedIndex:o,selectOptions:l,disabled:b,error:v,isOpen:H,onSelectChange:c},t.createElement(Jx,{ref:D,$size:u,$variant:m},t.createElement(Ux,{ref:Z},J,t.createElement(_x,null,t.createElement("input",{ref:V,type:"text","aria-label":"フィルターする値",value:y,disabled:b,onChange:T,onKeyDown:$,onCompositionStart:B,onCompositionEnd:G,onFocus:j,onBlur:Y})))),t.createElement(Qx,{$size:u,$variant:m,"aria-label":"フィルター入力パネルを開く","data-overflowing":C,type:"button",disabled:b,onClick:W},t.createElement(X,{name:x?"filter":"expand_diagonal_s_fill",color:"currentColor",size:U}))),t.createElement(gy,{isOpen:k,menuIconSize:f,selectOptions:l,selectedIndex:o,title:e,values:n,onApply:z,onClose:P}))},fy=v.div`
+`,gy=({isOpen:e,title:n,values:o,selectedIndex:l,selectOptions:s,onApply:c,onClose:u,menuIconSize:m})=>{const[g,h]=r(""),[f,b]=r(!1),[v,x]=r([]),[y,w]=r(0),[C,E]=r(!1),I=p((()=>s.map((e=>Object.assign(Object.assign({},e),{icon:t.cloneElement(e.icon,{size:m,color:N.basic[900]})})))),[s,m]),A=p((()=>I.reduce(((e,t)=>t.label.length>e.label.length?t:e),I[0])),[I]),k=i(null),M=d((e=>{w(e),E(!1)}),[]),H=d((()=>{var e;null===(e=k.current)||void 0===e||e.focus()}),[]),V=d((e=>{const t=[...v];t.splice(e,1),x(t)}),[v]),L=d((e=>{if(f)return;if(!(e.target instanceof HTMLInputElement))return;if("Backspace"===e.key&&0===e.target.selectionStart)return void x(v.slice(0,-1));const t=e.target.value.trim();""===t||v.includes(t)||"Enter"===e.key&&(x([...v,t]),h(""))}),[v,x,f]),D=d((()=>{x([]),h("")}),[]),Z=d((()=>{u()}),[u]),O=d((()=>{c(v,y),u()}),[v,y,c,u]),S=d((e=>{h(e.target.value)}),[]),$=d((()=>{b(!0)}),[]),R=d((()=>{b(!1)}),[]),z=d((()=>{h("")}),[]),T=p((()=>v.map(((e,n)=>t.createElement(Ox,{key:e,size:"medium",variant:"light",label:e,onRemove:()=>V(n)})))),[v,V]),B=p((()=>I.map((({label:e,icon:n},r)=>t.createElement(bl,{key:e,prepend:n,checked:y===r,onChange:()=>M(r)},e)))),[I,y,M]),G=p((()=>t.createElement(t.Fragment,null,t.cloneElement(I[y].icon,{size:m}),I[y].label)),[I,y,m]);return a((()=>{e&&(x(o),w(l))}),[e,l,o]),t.createElement(Cr,{isOpen:e,onClose:u},t.createElement(bt,{in:e},t.createElement(qx,null,t.createElement(ey,null,n),t.createElement(ty,null,t.createElement(ry,null,"条件"),t.createElement(kd,null,t.createElement(Ad,{open:C,trigger:t.createElement(iy,null,t.createElement(ay,{role:"presentation"},A.icon,A.label),t.createElement(oy,null,G),t.createElement(ly,null,t.createElement(X,{name:"arrow_down",color:"currentColor"}))),onOpenChange:E},B))),t.createElement(ny,null,t.createElement(ry,null,"値"),t.createElement(cy,null,t.createElement(dy,{type:"button",onClick:H}),T,t.createElement(uy,null,t.createElement("input",{ref:k,type:"text","aria-label":"フィルターする値",value:g,onChange:S,onCompositionStart:$,onCompositionEnd:R,onKeyDown:L,onBlur:z}),t.createElement(py,null,g)),t.createElement(my,{type:"button",onClick:D},t.createElement(X,{name:"close_circle",type:"fill",color:"currentColor"})))),t.createElement(sy,null,t.createElement("li",null,t.createElement(Pt,{size:"small",color:"clear",onClick:Z},"キャンセル")),t.createElement("li",null,t.createElement(Pt,{size:"small",onClick:O},"適用"))))))},hy=({title:e,values:n,selectedIndex:o,selectOptions:l,onChange:s,onSelectChange:c,size:u="medium",variant:m="dark",tagVariant:h,menuIconSize:f=22,disabled:b=!1,error:v=!1})=>{const{isSmall:x}=g(Zx),[y,w]=r(""),[C,E]=r(!1),[I,A]=r(!1),[k,M]=r(!1),[H,N]=r(!1),V=i(null),L=p((()=>h||("light"===m?"dark":"light")),[m,h]),D=i(null),Z=i(null),O=d((()=>{D.current&&E(D.current.clientWidth<D.current.scrollWidth)}),[E]),S=d((()=>{if(!D.current||!V.current)return;const e=V.current.getBoundingClientRect(),t=D.current.getBoundingClientRect(),n=Number(window.getComputedStyle(D.current).paddingRight.replace("px",""));return t.right-n-e.left}),[]),$=d((e=>{if(I)return;if(!(e.target instanceof HTMLInputElement))return;if("Backspace"===e.key&&0===e.target.selectionStart)return s(n.slice(0,-1),o),void requestAnimationFrame((()=>{O(),S()}));const t=e.target.value.trim();""===t||n.includes(t)||"Enter"===e.key&&(s([...n,t],o),w(""),requestAnimationFrame((()=>{O(),S()})))}),[n,s,w,I,o]),R=d((e=>{const t=[...n];t.splice(e,1),s(t,o),requestAnimationFrame((()=>{O(),S()}))}),[n,s,o]),z=d(((e,t)=>{s(e,t),c(t),requestAnimationFrame((()=>{O(),S()}))}),[s,c]),T=d((e=>{w(e.target.value)}),[]),B=d((()=>{A(!0)}),[]),G=d((()=>{A(!1)}),[]),W=d((()=>{M(!0)}),[]),P=d((()=>{M(!1)}),[]),j=d((()=>{b||N(!0)}),[b]),F=d((()=>{N(!1)}),[]),Y=d((()=>{F(),w("")}),[F]);a((()=>{if(!window.ResizeObserver)return;if(!D.current)return;const e=new window.ResizeObserver((()=>{D.current&&(O(),S())}));return e.observe(D.current),()=>{e.disconnect()}}),[O,S]);const J=p((()=>n.map(((e,n)=>t.createElement(Ox,{key:e,size:u,variant:L,label:e,onRemove:()=>R(n)})))),[n,u,L,R]),U={small:18,medium:20,large:22}[u];return t.createElement(t.Fragment,null,t.createElement(Sx,{variant:m,size:u,selectedIndex:o,selectOptions:l,disabled:b,error:v,isOpen:H,onSelectChange:c},t.createElement(Jx,{ref:D,$size:u,$variant:m},t.createElement(Ux,{ref:Z},J,t.createElement(_x,null,t.createElement("input",{ref:V,type:"text","aria-label":"フィルターする値",value:y,disabled:b,enterKeyHint:"enter",onChange:T,onKeyDown:$,onCompositionStart:B,onCompositionEnd:G,onFocus:j,onBlur:Y})))),t.createElement(Qx,{$size:u,$variant:m,"aria-label":"フィルター入力パネルを開く","data-overflowing":C,type:"button",disabled:b,onClick:W},t.createElement(X,{name:x?"filter":"expand_diagonal_s_fill",color:"currentColor",size:U}))),t.createElement(gy,{isOpen:k,menuIconSize:f,selectOptions:l,selectedIndex:o,title:e,values:n,onApply:z,onClose:P}))},fy=v.div`
   position: fixed;
   ${({isOpen:e,height:t,offset:n,placement:r})=>`${r}: ${e?`${n}px`:""+(0!==t?`calc(${-t}px - 10px)`:"-100vh")}`};
   width: 100%;
@@ -3105,7 +3105,7 @@ var ha=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
     background-color: ${({theme:e})=>e.palette.gray.light};
     cursor: not-allowed;
   }
-`,zy=e.forwardRef((function(t,n){var{error:r=!1,multiline:i=!1,resize:a="both",size:o="medium",variant:l="light",fullWidth:s=!1,errorMessage:c,onFocus:d,onBlur:u}=t,p=M(t,["error","multiline","resize","size","variant","fullWidth","errorMessage","onFocus","onBlur"]);const[m,g]=e.useState(!1),h=i?"textarea":"input",f=e.useCallback((e=>{e.currentTarget.blur()}),[]),b=e.useCallback((()=>{g(!0)}),[]),v=e.useCallback((()=>{g(!1)}),[]),x=r?Object.assign({"aria-invalid":!0},c&&{"aria-errormessage":c}):{};return e.createElement(Ry,Object.assign({},p,x,{ref:n,as:h,$error:r,$isFocused:m,resize:a,$size:o,$variant:l,$fullWidth:s,onFocus:d?wr(b,d):b,onBlur:u?wr(v,u):v,onWheel:wr("number"===p.type?f:null,p.onWheel)}))})),Ty=w`
+`,zy=e.forwardRef((function(t,n){var{error:r=!1,multiline:i=!1,resize:a="both",size:o="medium",variant:l="light",fullWidth:s=!1,errorMessage:c,onFocus:d,onBlur:u}=t,p=M(t,["error","multiline","resize","size","variant","fullWidth","errorMessage","onFocus","onBlur"]);const[m,g]=e.useState(!1),h=i?"textarea":"input",f=e.useCallback((e=>{e.currentTarget.blur()}),[]),b=e.useCallback((()=>{g(!0)}),[]),v=e.useCallback((()=>{g(!1)}),[]),x=r?Object.assign({"aria-invalid":!0},c&&{"aria-errormessage":c}):{};return e.createElement(Ry,Object.assign({},p,x,{ref:n,as:h,$error:r,$isFocused:m,resize:a,$size:o,$variant:l,$fullWidth:s,onFocus:d?wr(b,d):b,onBlur:u?wr(v,u):v,onWheel:wr(!i&&"type"in p&&"number"===p.type?f:null,"onWheel"in p?p.onWheel:void 0)}))})),Ty=w`
   0% {
     right: 100%;
     left: -35%;