@inntechcorp/it-design 2.2.89 → 3.1.0

package/dist/cjs/select/dropdown/styled.js

@@ -0,0 +1,239 @@
+"use strict";var e=require("styled-components"),t=require("../../tinyscrollbar/index.js"),i=require("../../enums/enum.js"),o=require("../style.settings.js"),r=require("../../helpers/theme/Color.js");const d=(t,d)=>{const l=o.getSelectSizeBySize(t),n=o.getImageSizeBySize(t),c=o.getOptionSizeBySize(t),a=o.getFontSizeBySize(t);return e.css`
+
+    &.itd-select-dropdown {
+
+      box-shadow                  : ${({theme:e})=>d===i.ComponentVariants.DEFAULT?"none":e.colorModalShadow};
+      background-color            : ${({theme:e})=>e.colorBackgroundSelect};
+      border-radius               : calc( ${({theme:e})=>e.borderRadius} - 0.125rem);
+      border                      : ${({theme:e})=>d===i.ComponentVariants.FILLED?"none":"1px solid "+e.colorBorder};
+
+      .itd-select-dropdown-body {
+        max-height: 18.75rem;
+      }
+
+      &.multi .itd-checkbox {
+        
+        width: 100%;
+        height: 100%;
+        
+        padding-right: 0.9375rem;
+        padding-left: 0.9375rem;
+
+        .itd-checkbox-inner-wrapper {
+          width: 100%;
+          height: 100%;
+        }
+
+      }
+
+      ${m=l.height,e.css`
+
+    &[data-position="bottom"] {
+      top: calc(${m} + 0.25rem);
+    }
+
+    &[data-position="top"] {
+      bottom: calc(${m} + 0.25rem);
+    }
+
+  `}
+      ${e.css`
+
+    &[data-direction="left"] {
+      left: 0;
+    }
+
+    &[data-direction="right"] {
+      right: 0;
+    }
+
+  `}
+
+      &.single {
+
+        .itd-select-item.itd-select-item-option {
+          
+          .itd-select-option-single {
+            padding-right     : ${c.paddingX};
+            padding-left      : ${c.paddingX};
+            height            : 100%;
+          }
+
+        }
+
+      }
+
+      .itd-select-item.itd-select-item-option {
+
+        padding-top       : 0;
+        padding-bottom    : 0;
+        height            : ${c.height};
+
+        /* Tüm durumlarda tipografi sabit kalsın (hover/selected değişmesin) */
+        span, label {
+          font-size       : ${a.fontSize};
+          line-height     : ${a.lineHeight};
+          font-weight     : ${a.fontWeight};
+        }
+
+        &.itd-item-single, &.itd-item-multi {
+          
+          background-color: ${({theme:e})=>e.colorBackgroundSelectItem};
+
+          span, label {
+            color         : ${({theme:e})=>e.colorTextNeutral};
+          }
+
+          &.itd-item-multi:not(&.itd-select-item-option-disabled) {
+            .itd-checkbox-default {
+              input {
+                border-color: ${({theme:e})=>r.withOpacity(e.colorTextNeutral,.25)};
+              }
+            }
+
+            .itd-checkbox-filled {
+              .itd-checkbox-checkmark {
+                background-color: ${({theme:e})=>r.withOpacity(e.colorTextNeutral,.1)};
+              }
+            }
+          }
+
+          .itd-image {
+
+            min-width     : ${n.width};
+            min-height    : ${n.height};
+            margin-right  : ${o.ICON_MARGIN_RIGHT};
+
+            .itd-select-option-image {
+              width       : ${n.width};
+              height      : ${n.height};
+            }
+
+            .itd-select-option-icon {
+              color       : ${({theme:e})=>e.colorIcon};
+              font-size   : ${n.width};
+            }
+
+          }
+
+        }
+
+        &.itd-select-item-option-active {
+          
+          &.itd-item-single, &.itd-item-multi {
+            
+            background-color: ${({theme:e})=>e.colorBackgroundSelectItemHover};
+            
+            span, label {
+              color: ${({theme:e})=>e.colorText};
+            }
+
+          }
+
+          &.itd-item-multi:not(&.itd-select-item-option-disabled) {
+
+            .itd-checkbox-default {
+              input {
+                border-color: ${({theme:e})=>r.withOpacity(e.colorTextNeutral,.5)};
+              }
+            }
+
+            .itd-checkbox-filled {
+              .itd-checkbox-checkmark {
+                background-color: ${({theme:e})=>r.withOpacity(e.colorTextNeutral,.15)};
+              }
+            }
+
+          }
+
+        }
+
+        &.itd-select-item-option-selected {
+
+          &.itd-item-single, &.itd-item-multi {
+              
+            background-color: ${({theme:e})=>e.colorBackgroundSelectItemSelected};
+
+            span, label {
+              color: ${({theme:e})=>e.colorText};
+            }
+
+          }
+
+          &.itd-item-multi:not(&.itd-select-item-option-disabled) {
+
+            .itd-checkbox-default {
+              input {
+                border-color: ${({theme:e})=>e.primary};
+              }
+            }
+
+            .itd-checkbox-filled {
+              .itd-checkbox-checkmark {
+                background-color: ${({theme:e})=>e.primary};
+              }
+            }
+
+          }
+
+        }
+
+        &.itd-select-item-option-disabled {
+
+          &.itd-item-single, &.itd-item-multi {
+            span, label {
+              color: ${({theme:e})=>e.colorDisabledText};
+            }
+          }
+
+        }
+        
+      }
+
+    }
+  `;var m},l=e.div`
+  
+  min-width: 100%;
+  min-height: 2.5rem;
+  overflow: hidden;
+  position: absolute;
+  z-index: 15;
+  transform-box: fill-box;
+  transform-origin: 50% 1%;
+  outline: none;
+  
+  /* Portal modunda fixed positioning */
+  &[data-portal="true"] {
+    position: fixed;
+    min-width: auto;
+    
+    /* TOP pozisyonunda animasyon yönü ters olmalı */
+    &[data-position="top"] {
+      transform-origin: 50% 100%;
+    }
+
+    /* ------------------------ */
+    // DROPDOWN MENU
+    /* ------------------------ */
+    ${({$size:e,$variant:t})=>d(e,t)}
+
+  }
+  
+  ul {
+    min-width: max-content;
+  }
+
+
+`,n=e(t.default)`
+  
+`,c=e.div`
+  /* Portal mode - document.body'de ama Select CSS'lerini inherit ediyor */
+  position: relative;
+  height: max-content;
+  
+  ul {
+    margin-block-start: 0;
+    margin-block-end: 0;
+    padding-inline-start: 0;
+  }
+`;exports.BodyWrapper=n,exports.PortalWrapper=c,exports.Wrapper=l;

package/dist/cjs/select/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),o=require("./option/Option.js"),s=require("./toggle/Toggle.js"),n=require("./dropdown/Dropdown.js"),r=require("../hooks/useOnClickOutside.js"),i=require("./styled.js"),l=require("react-i18next"),a=require("../enums/enum.js"),u=require("../utils/GetSizeSlugBySize.js"),c=require("../node_modules/uuid/dist/esm-browser/v4.js"),d=require("../hooks/useOnESCKeyDown.js");require("../logger/index.js"),require("react-router-dom"),require("axios");let m=null;const f=new Map,p=e=>{m===e&&(m=null)},g=t.forwardRef(({id:g,position:S=a.ComponentYPositions.BOTTOM,direction:y=a.ComponentXPositions.RIGHT,size:v=a.ComponentSizes.DEFAULT,variant:C=a.ComponentVariants.DEFAULT,placeholder:L="Please Select",className:h="",multi:E=!1,disabled:b=!1,showSearch:k=!1,locked:A=!1,options:w=[],value:z,defaultValue:T,label:q,prefix:j,icon:x,image:M,style:D,onChange:I,onUpdate:O},U)=>{const{t:F}=l.useTranslation("itd"),R=t.useRef(null),_=t.useMemo(()=>g||"itd-select-"+c.default(),[g]),G=t.useCallback(()=>{try{const e=document.getElementById(_);e&&e.focus({preventScroll:!0})}catch{const e=document.getElementById(_);e&&e.focus()}},[_]),[V,B]=t.useState(!1),[N,P]=t.useState(""),[X,$]=t.useState(void 0),[H,K]=t.useState(""),[W,Y]=t.useState(!1),[J,Q]=t.useState(!1),[Z,ee]=t.useState(!1),[te,oe]=t.useState(!1);t.useEffect(()=>{V||setTimeout(()=>{P("")},300)},[V]),t.useEffect(()=>{void 0!==T&&$(T)},[T]),t.useEffect(()=>{void 0!==z&&$(z)},[z]),t.useEffect(()=>{if(!W)return;const e=e=>{["ArrowDown","ArrowUp","Enter","Escape","Tab","Home","End"].includes(e.key)&&ee(!0)};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[W]),r.default(R,e=>{if(V){const t=document.getElementById("itd-select-portal-root");if(t&&t.contains(e.target))return;const o=R.current?.querySelector(".itd-select-selector");if(o&&o.contains(e.target))return;B(!1),te||Z?(G(),Y(!0),Q(!0)):(Y(!1),Q(!1),oe(!1),ee(!1))}}),d.default(()=>{V&&re(!1,"keyboard")}),t.useEffect(()=>{const e=R.current;if(!e)return;const t=t=>{Y(!0),t.relatedTarget&&e.contains(t.relatedTarget)||(oe(!0),Q(!0))},o=()=>{Y(!1),Q(!1),oe(!1),ee(!1)};e.addEventListener("focusin",t),e.addEventListener("focusout",o);return((e,t)=>{f.set(e,t)})(_,()=>{B(!1),Y(!1),Q(!1)}),()=>{e.removeEventListener("focusin",t),e.removeEventListener("focusout",o),(e=>{f.delete(e)})(_)}},[_]);const se=t.useCallback(e=>{A||B(e)},[A]),ne=t.useCallback(()=>{A||Y(!0)},[A]),re=t.useCallback((e,t)=>{A&&e||(e?((e=>{if(m&&m!==e){const e=f.get(m);e&&e()}m=e})(_),G()):(p(_),G(),Y(!0),"pointer"===t?(Q(!1),oe(!1),ee(!1)):"keyboard"===t?(Q(!0),ee(!0)):Q(!(!te&&!Z))),B(e))},[A,G,_,te,Z]),ie=t.useCallback(e=>{A||V&&P(e)},[V,A]),le=(e,t=!0,o=!0)=>{O&&O(e,t,o)};t.useImperativeHandle(U,()=>({reset(e=!0,t=!0){const o=T||(E?[]:void 0);$(o),K(""),le(o,e,t)},setValue(e,t=!0,o=!0){$(e),le(e,t,o)},getValue:()=>X||(E?[]:""),setError(e){K(e||"")},clear(){}}));const ae=t.useCallback(()=>{B(!1),G(),Y(!0),Z?Q(!0):(Q(!1),oe(!1),ee(!1))},[G,Z]),ue=t.useCallback(e=>{K(""),le(e),$(e),E||(p(_),B(!1),G(),Y(!0),Z?Q(!0):(Q(!1),oe(!1),ee(!1))),I&&I(e)},[E,I,le,_,G,Z]),ce=t.useMemo(()=>{let s=[];return w.forEach(e=>{if(""!==N&&"string"==typeof e.value&&("searchText"in e&&"string"==typeof e.searchText?!e.searchText.toLocaleLowerCase().includes(N.toLocaleLowerCase()):!e.value.toLocaleLowerCase().includes(N.toLocaleLowerCase())&&!(e=>{if("string"==typeof e)return e.toLocaleLowerCase();if(Array.isArray(e)){let t="";return e.forEach(e=>{"string"==typeof e&&(t+=e.toLocaleLowerCase())}),t}return""})(e.label).includes(N.toLocaleLowerCase())))return;let n={value:e.value,label:e.label,disabled:e.disabled||!1,variant:C,size:u.default(v)};e.icon&&(n={...n,icon:e.icon}),e.image&&(n={...n,image:e.image}),e.key&&(n={...n,customKey:e.key}),E&&X&&Array.isArray(X)&&(n={...n,multi:!0,checked:X.includes(e.value.toString())}),s.push(t.createElement(o.default,{...n,key:e.key?e.key:e.value.toString()}))}),0===s.length&&s.push(e.jsx("div",{className:"itd-select-not-found",style:{padding:"1.25rem",textAlign:"center"},children:"Not Found"},"not-found")),s},[w,N,E,X]),de=()=>v===a.ComponentSizes.X_SMALL?a.ComponentSizesSlug.X_SMALL:v===a.ComponentSizes.SMALL?a.ComponentSizesSlug.SMALL:v===a.ComponentSizes.MEDIUM?a.ComponentSizesSlug.MEDIUM:v===a.ComponentSizes.DEFAULT?a.ComponentSizesSlug.DEFAULT:v===a.ComponentSizes.LARGE?a.ComponentSizesSlug.LARGE:v===a.ComponentSizes.X_LARGE?a.ComponentSizesSlug.X_LARGE:a.ComponentSizesSlug.DEFAULT,me=t.useMemo(()=>({style:D,disabled:b,$hasImage:null!=M,$hasIcon:null!=x,$size:de(),$variant:C}),[D,b,M,x,v,C,X]),fe=t.useMemo(()=>{let e="itd-select";return e+=" itd-select-"+C,e+=" itd-select-"+(E?"multi":"single"),e+=" itd-select-"+y,e+=" itd-select-"+de(),!V&&J&&(e+=" keyboard-focus"),V&&(e+=" itd-select-open"),H&&(e+=" itd-select-status-error"),b&&(e+=" itd-select-disabled"),A&&(e+=" itd-select-locked"),k&&(e+=" itd-select-search"),x&&(e+=" itd-icon"),M&&(e+=" itd-image"),""!==h&&(e+=" "+h),e},[C,E,y,v,V,H,J,b,k,x,M,h,A]);return t.useEffect(()=>{if(V&&E&&X&&Array.isArray(X)&&X.length>0){const e=w.find(e=>X.includes(e.value.toString()));if(e){const t=document.querySelector(`[data-value="${e.value}"]`);t&&setTimeout(()=>{t.scrollIntoView({behavior:"instant",block:"nearest",inline:"start"})},50)}}},[V]),e.jsxs(i.Wrapper,{ref:R,className:fe,...me,children:[e.jsx(s.default,{id:_,placeholder:w.length>0?L:"",onChange:se,onFocus:ne,onShow:re,onFilter:ie,errorMessage:H,size:v,icon:x,prefix:j,image:M,label:(()=>{if(q)return q;if(void 0===X)return;let e="";if(E){const t=w.filter(e=>e.value===X[0])[0];Array.isArray(X)&&(1===X.length?t&&(e=t.label):X.length>1&&(e=F("placeholders.multipleSelection",{count:X.length})))}else{const t=w.filter(e=>e.value===X)[0];t&&(e=t.label)}return e})(),disabled:b,isOpen:V,multi:E,locked:A,showSearch:k}),e.jsx(n.default,{onClose:ae,onChange:ue,defaultValue:X,position:S,direction:y,variant:C,isOpen:V,multi:E,usePortal:!0,selectRef:R,size:v,children:ce})]})});g.displayName="ITD-Select",exports.default=g;

package/dist/cjs/select/option/Option.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("../../checkbox/index.js"),s=require("./styled.js"),a=require("../../enums/enum.js");const n=({multi:n=!1,checked:o=!1,variant:l=a.ComponentVariants.DEFAULT,size:c=a.ComponentSizesSlug.DEFAULT,icon:r="",image:d="",value:u="",customKey:m="",disabled:p=!1,isActive:h=!1,index:g=-1,onHover:v,onChange:b,label:x})=>{const j=t.useRef(null),[f,k]=t.useState(null);t.useEffect(()=>{o&&!n&&setTimeout(()=>j.current?.scrollIntoView({behavior:"instant",block:"nearest",inline:"start"}),50)},[o,n]);const N=e=>{e.stopPropagation(),b&&x&&b(u,!0,x)},y=e=>{e.stopPropagation(),b&&x&&b(u,e.checked,x)},S=e=>{k(e.touches[0].clientY)},T=e=>{if(null!==f){const t=e.changedTouches[0].clientY;Math.abs(t-f)<10&&N(e)}k(null)},C=t.useMemo(()=>{let e="itd-select-item itd-select-item-option";return n||(e+=" itd-item-single"),n&&(e+=" itd-item-multi"),o&&(e+=" itd-select-item-option-selected"),p&&(e+=" itd-select-item-option-disabled"),c&&(e+=" itd-select-item-option-"+c),l&&(e+=" itd-select-item-option-"+l),!h||o||p||(e+=" itd-select-item-option-active"),e},[n,o,h,p,c,l]);return e.jsx(s.Wrapper,{className:C,ref:j,"data-value":u.toString(),onMouseMove:()=>{if(g>=0&&v)if(p)v(-1);else{v(g);const e=document.activeElement;e&&"INPUT"===e.tagName&&"checkbox"===e.getAttribute("type")&&e.blur()}},onClick:n?e=>{n&&!p&&(e.stopPropagation(),y({checked:!o,value:u,className:"itd-checkbox",disabled:!1,target:null,stopPropagation:()=>{},preventDefault:()=>{}}))}:void 0,style:n?{cursor:"pointer"}:void 0,children:n?e.jsx("div",{onFocus:()=>{!p&&g>=0&&v&&v(g)},children:e.jsx(i.default,{className:"itd-select-option-multi"+(h?" itd-checkbox-keyboard-active":""),variant:l,checked:o,readOnly:!0,disabled:p,animated:!0,onChange:y,children:x})}):e.jsxs(s.Single,{className:"itd-select-option-single",onClick:N,onTouchStart:S,onTouchEnd:T,"data-disabled":p?"true":"false",children:[d?e.jsx(s.ImageWrapper,{className:"itd-image",children:e.jsx("img",{className:"itd-select-option-image",src:d,height:"20",alt:String(u)})}):r?e.jsx(s.ImageWrapper,{className:"itd-image",children:r}):null,e.jsx("span",{children:x})]})},m||u.toString())};var o=t.memo(n);n.displayName="Option",exports.default=o;

package/dist/cjs/select/option/styled.js

@@ -0,0 +1,36 @@
+"use strict";var e=require("styled-components");const t=e.li`
+
+  display: flex;
+  min-width: max-content;
+  align-items: center;
+  cursor: pointer;
+  
+  &:not(:last-child) {
+    margin-bottom: 0.0625rem;
+  }
+
+`,i=e.div`
+
+  img {
+    pointer-events: none;
+    display: block;
+  }
+
+`;e.div`
+
+`;const n=e.div`
+
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+
+  &[data-disabled="true"] {
+    cursor: not-allowed;
+  }
+
+  span {
+    white-space: nowrap;
+  }
+
+`;exports.ImageWrapper=i,exports.Single=n,exports.Wrapper=t;

package/dist/cjs/select/style.settings.js

@@ -0,0 +1 @@
+"use strict";var S=require("../enums/enum.js"),e=require("../helpers/theme/tokens.js");exports.ICON_MARGIN_RIGHT="0.4375rem",exports.ICON_SIZE_DEFAULT="1.25rem",exports.getArrowSizeBySize=E=>E===S.ComponentSizesSlug.X_SMALL?e.ICON_TOKENS.arrow.xs:E===S.ComponentSizesSlug.SMALL?e.ICON_TOKENS.arrow.sm:E===S.ComponentSizesSlug.MEDIUM?e.ICON_TOKENS.arrow.md:E===S.ComponentSizesSlug.DEFAULT?e.ICON_TOKENS.arrow.df:E===S.ComponentSizesSlug.LARGE?e.ICON_TOKENS.arrow.lg:E===S.ComponentSizesSlug.X_LARGE?e.ICON_TOKENS.arrow.xl:e.ICON_TOKENS.arrow.df,exports.getFontSizeBySize=E=>E===S.ComponentSizesSlug.X_SMALL?{fontSize:e.SELECT_SIZE_MAP.xs.fontSize,lineHeight:e.SELECT_SIZE_MAP.xs.lineHeight,fontWeight:e.SELECT_SIZE_MAP.xs.fontWeight}:E===S.ComponentSizesSlug.SMALL?{fontSize:e.SELECT_SIZE_MAP.sm.fontSize,lineHeight:e.SELECT_SIZE_MAP.sm.lineHeight,fontWeight:e.SELECT_SIZE_MAP.sm.fontWeight}:E===S.ComponentSizesSlug.MEDIUM?{fontSize:e.SELECT_SIZE_MAP.md.fontSize,lineHeight:e.SELECT_SIZE_MAP.md.lineHeight,fontWeight:e.SELECT_SIZE_MAP.md.fontWeight}:E===S.ComponentSizesSlug.DEFAULT?{fontSize:e.SELECT_SIZE_MAP.df.fontSize,lineHeight:e.SELECT_SIZE_MAP.df.lineHeight,fontWeight:e.SELECT_SIZE_MAP.df.fontWeight}:E===S.ComponentSizesSlug.LARGE?{fontSize:e.SELECT_SIZE_MAP.lg.fontSize,lineHeight:e.SELECT_SIZE_MAP.lg.lineHeight,fontWeight:e.SELECT_SIZE_MAP.lg.fontWeight}:E===S.ComponentSizesSlug.X_LARGE?{fontSize:e.SELECT_SIZE_MAP.xlg.fontSize,lineHeight:e.SELECT_SIZE_MAP.xlg.lineHeight,fontWeight:e.SELECT_SIZE_MAP.xlg.fontWeight}:{fontSize:e.SELECT_SIZE_MAP.df.fontSize,lineHeight:e.SELECT_SIZE_MAP.df.lineHeight,fontWeight:e.SELECT_SIZE_MAP.df.fontWeight},exports.getImageSizeBySize=E=>E===S.ComponentSizesSlug.X_SMALL?e.ICON_TOKENS.image.xs:E===S.ComponentSizesSlug.SMALL?e.ICON_TOKENS.image.sm:E===S.ComponentSizesSlug.MEDIUM?e.ICON_TOKENS.image.md:E===S.ComponentSizesSlug.DEFAULT?e.ICON_TOKENS.image.df:E===S.ComponentSizesSlug.LARGE?e.ICON_TOKENS.image.lg:E===S.ComponentSizesSlug.X_LARGE?e.ICON_TOKENS.image.xl:e.ICON_TOKENS.image.df,exports.getOptionSizeBySize=E=>E===S.ComponentSizesSlug.X_SMALL?{paddingX:e.SELECT_SIZE_MAP.xs.paddingX,height:e.SELECT_SIZE_MAP.xs.height}:E===S.ComponentSizesSlug.SMALL?{paddingX:e.SELECT_SIZE_MAP.sm.paddingX,height:e.SELECT_SIZE_MAP.sm.height}:E===S.ComponentSizesSlug.MEDIUM?{paddingX:e.SELECT_SIZE_MAP.md.paddingX,height:e.SELECT_SIZE_MAP.md.height}:E===S.ComponentSizesSlug.DEFAULT?{paddingX:e.SELECT_SIZE_MAP.df.paddingX,height:e.SELECT_SIZE_MAP.df.height}:E===S.ComponentSizesSlug.LARGE?{paddingX:e.SELECT_SIZE_MAP.lg.paddingX,height:e.SELECT_SIZE_MAP.lg.height}:E===S.ComponentSizesSlug.X_LARGE?{paddingX:e.SELECT_SIZE_MAP.xlg.paddingX,height:e.SELECT_SIZE_MAP.xlg.height}:{paddingX:e.SELECT_SIZE_MAP.df.paddingX,height:e.SELECT_SIZE_MAP.df.height},exports.getSelectSizeBySize=E=>E===S.ComponentSizesSlug.X_SMALL?{paddingX:e.SELECT_SIZE_MAP.xs.paddingX,height:e.SELECT_SIZE_MAP.xs.height}:E===S.ComponentSizesSlug.SMALL?{paddingX:e.SELECT_SIZE_MAP.sm.paddingX,height:e.SELECT_SIZE_MAP.sm.height}:E===S.ComponentSizesSlug.MEDIUM?{paddingX:e.SELECT_SIZE_MAP.md.paddingX,height:e.SELECT_SIZE_MAP.md.height}:E===S.ComponentSizesSlug.DEFAULT?{paddingX:e.SELECT_SIZE_MAP.df.paddingX,height:e.SELECT_SIZE_MAP.df.height}:E===S.ComponentSizesSlug.LARGE?{paddingX:e.SELECT_SIZE_MAP.lg.paddingX,height:e.SELECT_SIZE_MAP.lg.height}:E===S.ComponentSizesSlug.X_LARGE?{paddingX:e.SELECT_SIZE_MAP.xlg.paddingX,height:e.SELECT_SIZE_MAP.xlg.height}:{paddingX:e.SELECT_SIZE_MAP.df.paddingX,height:e.SELECT_SIZE_MAP.df.height};

package/dist/cjs/select/styled.js

@@ -0,0 +1,331 @@
+"use strict";var e=require("styled-components"),t=require("../helpers/theme/Color.js"),o=require("./style.settings.js"),r=require("../enums/enum.js");const i=e.div`
+
+  position: relative;
+  height: max-content;
+
+  ul {
+    margin-block-start: 0;
+    margin-block-end: 0;
+    padding-inline-start: 0;
+  }
+
+  /* ------------------------ */
+  // TOGGLE
+  /* ------------------------ */
+  ${t=>(t=>{const r=o.getArrowSizeBySize(t),i=o.getImageSizeBySize(t),n=o.getFontSizeBySize(t);return e.css`
+    .itd-select-selector {
+
+      border-radius               : calc( ${({theme:e})=>e.borderRadius} - 0.125rem);
+      transition-property         : border-color;
+      transition-duration         : ${({theme:e})=>e.transitionDuration};
+      transition-timing-function  : ${({theme:e})=>e.transitionTimingFunction};
+
+      .itd-image.itd-svg {
+        display         : flex;
+        align-items     : center;
+        margin-right    : ${o.ICON_MARGIN_RIGHT};
+        min-width       : ${i.width};
+        min-height      : ${i.height};
+      }
+
+      img, .itd-svg svg {
+        width           : ${i.width};
+        height          : ${i.height};
+      }
+
+      .itd-select-arrow {
+        transition-property         : transform;
+        transition-duration         : ${({theme:e})=>e.transitionDuration};
+        transition-timing-function  : ${({theme:e})=>e.transitionTimingFunction};
+
+        svg {
+          width   : ${r.width};
+          height  : ${r.height};
+          color   : ${({theme:e})=>e.colorIcon};
+        }
+      }
+
+      .itd-icon {
+        color: ${({theme:e})=>e.colorIcon};
+        font-size: ${o.ICON_SIZE_DEFAULT};
+      }
+
+      .itd-select-status-error {
+        border: 1px solid ${({theme:e})=>e.colorErrorBorder};
+        border-radius: calc( ${({theme:e})=>e.borderRadius} - 0.125rem);
+      }
+
+      .itd-select-selection-item {
+
+        .itd-select-selection-label {
+
+          &.itd-select-selection-item-single {
+
+            border-radius               : calc( ${({theme:e})=>e.borderRadius} - 0.125rem);
+            transition-property         : background-color;
+            transition-duration         : ${({theme:e})=>e.transitionDuration};
+            transition-timing-function  : ${({theme:e})=>e.transitionTimingFunction};
+
+            input, input::placeholder {
+              font-weight: ${n.fontWeight};
+            }
+
+            input {
+          
+              font-size: ${n.fontSize};
+              color: ${({theme:e})=>e.colorText};
+              &::placeholder {
+                color: ${({theme:e})=>e.colorPlaceholder};
+              }
+            }
+
+          }
+
+          border-radius               : calc( ${({theme:e})=>e.borderRadius} - 0.125rem);
+          transition-property         : background-color;
+          transition-duration         : ${({theme:e})=>e.transitionDuration};
+          transition-timing-function  : ${({theme:e})=>e.transitionTimingFunction};
+
+          [type=text] {
+            font-size: ${n.fontSize};
+            color: ${({theme:e})=>e.colorText};
+            caret-color: ${({theme:e})=>e.colorText};
+
+            &::placeholder {
+              color: rgba(0, 0, 0, 0);
+            }
+          }
+
+          span, label {
+            
+            color: ${({theme:e})=>e.colorText};
+            font-weight: ${n.fontWeight};
+
+            &::before {
+              color                       : ${({theme:e})=>e.colorTextMuted};
+              transition-property         : transform;
+              transition-duration         : ${({theme:e})=>e.transitionDuration};
+              transition-timing-function  : ${({theme:e})=>e.transitionTimingFunction};
+            }
+
+          }
+
+        }
+
+      }
+    }
+  `})(t.$size)}
+  
+  /* ------------------------ */
+  // SIZE
+  /* ------------------------ */
+  ${t=>(t=>{const r=o.getSelectSizeBySize(t);return e.css`
+
+    .itd-select-selector {
+
+      /* debug border removed */
+      height        : ${r.height}; 
+      padding-right : ${r.paddingX};
+      padding-left  : ${r.paddingX};
+
+    }
+    
+  `})(t.$size)}
+
+  /* ------------------------ */
+  // TYPE
+  /* ------------------------ */
+  ${()=>e.css`
+
+    &.itd-select-default {
+
+      .itd-select-selector {
+
+        box-shadow        : ${({theme:e})=>e.boxShadow};
+        outline           : 0 solid transparent;
+        outline-offset    : ${({theme:e})=>e.ringOffset};
+        border            : 1px solid transparent;
+        border-color      : ${({theme:e})=>e.colorBorder};
+        
+        transition      : outline 100ms linear,
+                          border-color ${({theme:e})=>e.transitionDuration} ${({theme:e})=>e.transitionTimingFunction};
+
+      }
+
+      &.itd-select-open {
+        .itd-select-selector {
+          /* Default varyant açıkken border seçili görünür */
+          border-color: ${({theme:e})=>e.primaryScale[e.appearance===r.ThemeAppearances.LIGHT?400:900]};
+        }
+        &.itd-select-status-error {
+          .itd-select-selector {
+            border-color: ${({theme:e})=>e.colorErrorBorder};
+          }
+        }
+      }
+
+      /* Keyboard/pointer focus: gösterilebilir outline. TAB ile outline görünür, pointer ile de tutarlı davranır */
+      &.keyboard-focus {
+        .itd-select-selector {
+          border-color: ${({theme:e})=>e.primaryScale[e.appearance===r.ThemeAppearances.LIGHT?400:900]};
+          outline: ${({theme:e})=>e.ringWidth} solid ${({theme:e})=>t.withOpacity(e.primaryScale[e.appearance===r.ThemeAppearances.LIGHT?400:900],.5)};
+        }
+      }
+
+      &.keyboard-focus.itd-select-status-error {
+        .itd-select-selector {
+          border-color: ${({theme:e})=>e.colorErrorBorder};
+          outline: ${({theme:e})=>e.ringWidth} solid ${({theme:e})=>t.withOpacity(e.colorErrorBorder,.5)};
+        }
+      }
+
+      &:not(.itd-select-open):not(.itd-select-disabled):not(.keyboard-focus) {
+        .itd-select-selector:hover {
+          border-color: ${({theme:e})=>e.colorBorderHover};
+        }
+      }
+
+      /* Mouse basılı tutulduğunda (açılma anında) border seçili görünsün */
+      &:not(.itd-select-disabled):not(.itd-select-open) {
+        .itd-select-selector:active {
+          border-color: ${({theme:e})=>e.primaryScale[e.appearance===r.ThemeAppearances.LIGHT?400:900]};
+        }
+      }
+
+      /* Error durumunda active state */
+      &.itd-select-status-error:not(.itd-select-disabled):not(.itd-select-open) {
+        .itd-select-selector:active {
+          border-color: ${({theme:e})=>e.colorErrorBorder};
+        }
+      }
+
+    }
+
+    &.itd-select-filled {
+
+      &.itd-select-open {
+        .itd-select-selector {
+          background-color: ${({theme:e})=>e.colorBackgroundAltHover};
+        }
+      }
+
+      .itd-select-selector {
+
+        border            : none;
+        background-color  : ${({theme:e})=>e.colorBackgroundAlt};
+        outline           : 0 solid transparent;
+        outline-offset    : ${({theme:e})=>e.ringOffset};
+        
+        transition        : outline 100ms linear,
+                            background-color ${({theme:e})=>e.transitionDuration} ${({theme:e})=>e.transitionTimingFunction};
+                          
+        
+      }
+
+      &.keyboard-focus {
+        .itd-select-selector {
+          outline: ${({theme:e})=>e.ringWidth} solid ${({theme:e})=>t.withOpacity(e.primaryScale[e.appearance===r.ThemeAppearances.LIGHT?400:900],.5)};
+        }
+      }
+
+      &.keyboard-focus.itd-select-status-error {
+        .itd-select-selector {
+          outline: ${({theme:e})=>e.ringWidth} solid ${({theme:e})=>t.withOpacity(e.colorErrorBorder,.5)};
+        }
+      }
+
+      &:not(.itd-select-open):not(.itd-select-disabled):not(.keyboard-focus) {
+        .itd-select-selector:hover {
+          background-color: ${({theme:e})=>e.colorBackgroundAltHover};
+        }
+      }
+
+      /* Mouse basılı tutulduğunda (açılma anında) background seçili görünsün */
+      &:not(.itd-select-disabled):not(.itd-select-open) {
+        .itd-select-selector:active {
+          background-color: ${({theme:e})=>e.colorBackgroundAltHover};
+        }
+      }
+
+    }
+
+  `}
+
+  /* ------------------------ */
+  // LABEL SIZE
+  /* ------------------------ */
+  ${t=>(t=>{const r=o.getImageSizeBySize(t),i=o.getSelectSizeBySize(t),n=o.getFontSizeBySize(t);return e.css`
+      
+    .itd-select-selector {
+      .itd-icon {
+        font-size: ${r.height};
+      }
+    }
+
+    .itd-select-selection-item {
+      .itd-select-selection-label {
+
+        [type=text] {
+          height: ${i.height};
+        }
+
+        &.itd-select-selection-item-single {
+          span, label {
+            font-size   : ${n.fontSize};
+            line-height : ${n.lineHeight};
+            font-weight : ${n.fontWeight};
+          }
+        }
+
+      }
+    }
+    
+  `})(t.$size)}
+
+  /* ------------------------ */
+  // DISABLED
+  /* ------------------------ */
+  ${()=>e.css`
+    &[disabled] {
+
+      .itd-select-selector {
+
+        background-color: ${({theme:e})=>e.colorDisabledBg};
+        border: 1px solid ${({theme:e})=>e.colorDisabledBorder};
+        border-radius: calc( ${({theme:e})=>e.borderRadius} - 0.125rem);
+        cursor: not-allowed;
+
+        .itd-select-selection-item input[disabled] {
+          color: ${({theme:e})=>e.colorDisabledText};
+          &::placeholder {
+            color: ${({theme:e})=>e.colorDisabledText};
+          }
+        }
+        
+        .itd-select-arrow {
+          svg {
+            fill: ${({theme:e})=>e.colorDisabledText};
+          }
+        }
+
+        .itd-image {
+          filter: grayscale(100%);
+          opacity: 0.5;
+        }
+        
+      }
+
+    } 
+  `}
+
+  /* ------------------------ */
+  // LOCKED
+  /* ------------------------ */
+  ${()=>e.css`
+
+    &.itd-select-locked .itd-select-selector {
+      cursor: not-allowed;
+    }
+  `}
+
+`;exports.Wrapper=i;

package/dist/cjs/select/toggle/Toggle.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("react"),r=require("./label/Label.js"),i=require("../../image/index.js"),t=require("./styled.js"),o=require("../../utils/CommonStyledComponents.js"),l=require("../../utils/InlineSVGCached.js"),a=require("../../enums/enum.js"),n=require("../../node_modules/lucide-react/dist/esm/icons/chevron-down.js");exports.default=({id:c,errorMessage:d="",isOpen:u=!1,locked:m=!1,disabled:f=!1,showSearch:h=!1,size:x=a.ComponentSizes.DEFAULT,placeholder:j,label:p,prefix:g,icon:b,image:N,onFocus:S,onShow:v,onFilter:q})=>{const w=s.useRef(null),[z,F]=s.useState(!1);s.useEffect(()=>{F(u)},[u]);const I=()=>{if(m)return e.jsx(t.LockIconWrapper,{className:"itd-svg",width:"16",height:"16"})},P=()=>{if(""!==d&&!f)return e.jsx(o.ErrorIcon,{message:d,className:"itd-select-failed itd-error-icon",tooltipPosition:"top-right"})};return e.jsxs(t.Wrapper,{$showSearch:h,className:"itd-select-selector",onPointerDown:f||m?void 0:e=>{0===e.button&&(e.preventDefault(),S(),v(!z,"pointer"))},children:[(()=>{if(g)return e.jsx(t.Prefix,{className:"itd-select-prefix",children:g})})(),b?e.jsx(t.PreIcon,{className:"itd-icon "+b}):N?N.indexOf(".svg")>-1?e.jsx(l.default,{src:N,className:"itd-image itd-svg"}):e.jsx(i.default,{src:N,height:"20",brokenHeight:"20",className:"itd-image"}):void 0,e.jsx(t.LabelWrapper,{className:"itd-select-selection-item",children:e.jsx(r.default,{id:c,placeholder:j,label:p||void 0,size:x,isOpen:z,showSearch:h,disabled:f,onFocus:S,onFilter:q,onShow:v,ref:w})}),(()=>{if(""!==d&&!f)return e.jsx(o.ErrorBorder,{$fullSize:!0,className:"itd-error-border"})})(),e.jsxs(t.Suffix,{className:"itd-select-suffix",children:[P(),I(),e.jsx(t.Icon,{$open:z,className:"itd-select-arrow",children:e.jsx(n.default,{size:16})})]})]})};

package/dist/cjs/select/toggle/label/Label.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("./styled.js"),l=require("../../../node_modules/uuid/dist/esm-browser/v4.js");const n=t.forwardRef(({id:n="",isOpen:a=!1,showSearch:s=!1,disabled:o=!1,label:u,placeholder:i,onFocus:c,onFilter:d,onShow:p},f)=>{const m=t.useRef(null),[v,g]=t.useState(null),[h,y]=t.useState(!1),b=t.useMemo(()=>n||"itd-select-toggle-single-"+l.default(),[n]);t.useEffect(()=>{if(!a)return g(null),void y(!1);w(),v===u&&g(null)},[a]),t.useEffect(()=>{g(void 0!==u?u:null)},[u]);const w=()=>{s&&(m.current?.focus(),m.current?.select())};t.useImperativeHandle(f,()=>({setFocus(){w()}}));const D=t.useCallback(e=>{if(h)return;let t="";t=e.target.defaultValue!==v&&""!==e.target.defaultValue?e.target.value.replace(e.target.defaultValue,""):e.target.value,g(t),d(t)},[v,d,h]),E=t.useMemo(()=>{if(void 0!==u)return"string"!=typeof u&&"number"!=typeof u?"type mismatch! please define custom label parameter.":u.toString();let e="";return a?null!==v?e=v:void 0===u&&void 0!==i&&(e=i):void 0!==i&&(e=i),"string"!=typeof e&&"number"!=typeof e?"type mismatch! please define custom label parameter.":e.toString()},[u,a,v,i]),M=t.useMemo(()=>{let e="";return a?null!==v&&(e=v):void 0!==u&&(e=u),"string"!=typeof e&&"number"!=typeof e?"type mismatch! please define custom label parameter.":e},[a,v,u]),S=t.useCallback(e=>{const t=e.key;if("Escape"===t)return e.preventDefault(),void p(!1);if("Tab"!==t){if(a||!s||1!==t.length&&"Backspace"!==t&&"Delete"!==t){if(a&&s){if("ArrowDown"===t||"ArrowUp"===t||"Home"===t||"End"===t)return e.preventDefault(),void y(!0);if("Enter"===t)return void(h&&e.preventDefault());1!==t.length&&"Backspace"!==t&&"Delete"!==t||y(!1)}return a||" "!==t&&"Enter"!==t&&"ArrowDown"!==t&&"ArrowUp"!==t?void 0:(p(!0),void e.preventDefault())}p(!0)}},[a,p,s]),j=t.useCallback(()=>{c();try{const e=m.current;e&&!a&&e.setSelectionRange(e.value.length,e.value.length)}catch{}},[c,a]),k=t.useMemo(()=>({type:"text",readOnly:!s,autoComplete:"off"}),[s]),x=t.useMemo(()=>{let e="itd-select-selection-input";return s||(e+=" itd-select-no-interactions"),e},[s]),C=t.useMemo(()=>({width:"100%",pointerEvents:"none",caretColor:s?"inherit":"transparent"}),[s]);return e.jsx(r.Wrapper,{className:"itd-select-selection-label itd-select-selection-item-single",children:e.jsx("input",{id:b,className:x,value:M,disabled:o,placeholder:E,onChange:D,onKeyDown:S,onFocus:j,ref:m,style:C,...k})})});exports.default=n;

package/dist/cjs/select/toggle/label/styled.js

@@ -0,0 +1,5 @@
+"use strict";const e=require("styled-components").div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+`;exports.Wrapper=e;