@xfers/design-system 7.1.0-dev.b56f42c59c → 7.1.0-dev.eac3d1330c

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.
@@ -56,15 +56,21 @@ const Tabs = (_a) => {
56
56
  background-color: ${brand.primary.default};
57
57
  }
58
58
  `;
59
- // Support legacy children (Tabs.TabPane) by converting to items
59
+ // Support legacy children (Tabs.TabPane) by converting to items.
60
+ // Use React.Children.forEach instead of toArray to avoid the .$-prefix
61
+ // that toArray adds to keys, which would break controlled activeKey usage.
60
62
  const resolvedItems = items !== null && items !== void 0 ? items : (children
61
- ? react_1.default.Children.toArray(children)
62
- .filter(react_1.default.isValidElement)
63
- .map((child) => {
64
- var _a, _b;
65
- const _c = child.props, { tab, key, children: childContent } = _c, paneRest = __rest(_c, ["tab", "key", "children"]);
66
- return Object.assign({ key: String((_b = (_a = child.key) !== null && _a !== void 0 ? _a : key) !== null && _b !== void 0 ? _b : ''), label: tab, children: childContent }, paneRest);
67
- })
63
+ ? (() => {
64
+ const result = [];
65
+ react_1.default.Children.forEach(children, (child) => {
66
+ var _a, _b;
67
+ if (!react_1.default.isValidElement(child))
68
+ return;
69
+ const _c = child.props, { tab, key: propKey, children: childContent } = _c, paneRest = __rest(_c, ["tab", "key", "children"]);
70
+ result.push(Object.assign({ key: String((_b = (_a = child.key) !== null && _a !== void 0 ? _a : propKey) !== null && _b !== void 0 ? _b : ''), label: tab, children: childContent }, paneRest));
71
+ });
72
+ return result;
73
+ })()
68
74
  : undefined);
69
75
  return react_1.default.createElement(antd_1.Tabs, Object.assign({ className: `${(0, emotion_1.css)(style)}`, items: resolvedItems }, rest));
70
76
  };
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tabs/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAAyB;AACzB,qCAA6B;AAE7B,+BAAsC;AAGtC,oEAAyE;AACzE,2DAAmD;AAWnD,MAAM,IAAI,GAAG,CAAC,EAAmC,EAAE,EAAE;QAAvC,EAAE,QAAQ,EAAE,KAAK,OAAkB,EAAb,IAAI,cAA1B,qBAA4B,CAAF;IACtC,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAQ,GAAE,CAAA;IAC5B,MAAM,KAAK,GAAG;mBACG,4BAAS;;;;;;;;;;;;;;;;;;;;eAoBb,KAAK,CAAC,OAAO,CAAC,OAAO;;;;;;qBAMf,iCAAc;;;;0BAIT,KAAK,CAAC,OAAO,CAAC,OAAO;;KAE1C,CAAA;IAEH,gEAAgE;IAChE,MAAM,aAAa,GACjB,KAAK,aAAL,KAAK,cAAL,KAAK,GACL,CAAC,QAAQ;QACP,CAAC,CAAC,eAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC;aAC7B,MAAM,CAAC,eAAK,CAAC,cAAc,CAAC;aAC5B,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;;YACb,MAAM,KAKF,KAAK,CAAC,KAKT,EAVK,EACJ,GAAG,EACH,GAAG,EACH,QAAQ,EAAE,YAAY,OAOvB,EANI,QAAQ,cAJP,0BAKL,CAKA,CAAA;YACD,uBACE,GAAG,EAAE,MAAM,CAAC,MAAA,MAAA,KAAK,CAAC,GAAG,mCAAI,GAAG,mCAAI,EAAE,CAAC,EACnC,KAAK,EAAE,GAAG,EACV,QAAQ,EAAE,YAAY,IACnB,QAAQ,EACZ;QACH,CAAC,CAAC;QACN,CAAC,CAAC,SAAS,CAAC,CAAA;IAEhB,OAAO,8BAAC,WAAO,kBAAC,SAAS,EAAE,GAAG,IAAA,aAAG,EAAC,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,aAAa,IAAM,IAAI,EAAI,CAAA;AAChF,CAAC,CAAA;AAED,6EAA6E;AAC7E,kFAAkF;AAClF,6EAA6E;AAC7E,IAAI,CAAC,OAAO,GAAG,WAAO,CAAC,OAAO,CAAA;AAE9B,kBAAe,IAAI,CAAA"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tabs/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAAyB;AACzB,qCAA6B;AAE7B,+BAAsC;AAGtC,oEAAyE;AACzE,2DAAmD;AAWnD,MAAM,IAAI,GAAG,CAAC,EAAmC,EAAE,EAAE;QAAvC,EAAE,QAAQ,EAAE,KAAK,OAAkB,EAAb,IAAI,cAA1B,qBAA4B,CAAF;IACtC,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAQ,GAAE,CAAA;IAC5B,MAAM,KAAK,GAAG;mBACG,4BAAS;;;;;;;;;;;;;;;;;;;;eAoBb,KAAK,CAAC,OAAO,CAAC,OAAO;;;;;;qBAMf,iCAAc;;;;0BAIT,KAAK,CAAC,OAAO,CAAC,OAAO;;KAE1C,CAAA;IAEH,iEAAiE;IACjE,uEAAuE;IACvE,2EAA2E;IAC3E,MAAM,aAAa,GACjB,KAAK,aAAL,KAAK,cAAL,KAAK,GACL,CAAC,QAAQ;QACP,CAAC,CAAC,CAAC,GAAG,EAAE;YACJ,MAAM,MAAM,GAAoC,EAAE,CAAA;YAClD,eAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;;gBACzC,IAAI,CAAC,eAAK,CAAC,cAAc,CAAC,KAAK,CAAC;oBAAE,OAAM;gBACxC,MAAM,KAKF,KAAK,CAAC,KAKT,EAVK,EACJ,GAAG,EACH,GAAG,EAAE,OAAO,EACZ,QAAQ,EAAE,YAAY,OAOvB,EANI,QAAQ,cAJP,0BAKL,CAKA,CAAA;gBACD,MAAM,CAAC,IAAI,iBACT,GAAG,EAAE,MAAM,CAAC,MAAA,MAAA,KAAK,CAAC,GAAG,mCAAI,OAAO,mCAAI,EAAE,CAAC,EACvC,KAAK,EAAE,GAAG,EACV,QAAQ,EAAE,YAAY,IACnB,QAAQ,EACX,CAAA;YACJ,CAAC,CAAC,CAAA;YACF,OAAO,MAAM,CAAA;QACf,CAAC,CAAC,EAAE;QACN,CAAC,CAAC,SAAS,CAAC,CAAA;IAEhB,OAAO,8BAAC,WAAO,kBAAC,SAAS,EAAE,GAAG,IAAA,aAAG,EAAC,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,aAAa,IAAM,IAAI,EAAI,CAAA;AAChF,CAAC,CAAA;AAED,6EAA6E;AAC7E,kFAAkF;AAClF,6EAA6E;AAC7E,IAAI,CAAC,OAAO,GAAG,WAAO,CAAC,OAAO,CAAA;AAE9B,kBAAe,IAAI,CAAA"}
package/es/index.js CHANGED
@@ -1012,7 +1012,7 @@ padding-top:
1012
1012
  .ant-table-tbody > tr:hover > td {
1013
1013
  background: ${We.HOVER_SURFACE};
1014
1014
  }
1015
- `,Zp=t=>{var{className:e,emptyText:n}=t,i=jt(t,["className","emptyText"]);return et.createElement(Dt,Object.assign({className:qe(qp,e),locale:{emptyText:n}},i))},Kp=t=>{var{children:e,items:n}=t,i=jt(t,["children","items"]);const{brand:o}=$i(),r=`\n font-family: ${Vi};\n font-size: 16px;\n font-weight: 400;\n\n &.ant-tabs {\n width: 100%;\n }\n\n .ant-tabs-ink-bar {\n z-index: 0;\n }\n\n .ant-tabs-nav .ant-tabs-tab {\n margin-right: 20px;\n padding-top: 8px;\n padding-bottom: 8px;\n }\n\n .ant-tabs-nav .ant-tabs-tab:hover,\n .ant-tabs-nav .ant-tabs-tab-active .ant-tabs-tab-btn {\n color: ${o.primary.default};\n }\n\n .ant-tabs-nav .ant-tabs-tab-active {\n font-weight: 700;\n font-size: 16px;\n font-family: Red Hat Display;\n }\n \n .ant-tabs-ink-bar {\n background-color: ${o.primary.default}; \n }\n `,a=null!=n?n:e?et.Children.toArray(e).filter(et.isValidElement).map(t=>{var e,n;const i=t.props,{tab:o,key:r,children:a}=i,s=jt(i,["tab","key","children"]);return Object.assign({key:String(null!==(n=null!==(e=t.key)&&void 0!==e?e:r)&&void 0!==n?n:""),label:o,children:a},s)}):void 0;return et.createElement(bt,Object.assign({className:`${Ze(r)}`,items:a},i))};Kp.TabPane=bt.TabPane;const Jp=({initialSeconds:t,blinkActivationSeconds:e,shouldRepeat:n,onTimesUp:i,children:o})=>{const[r,a]=lt(!1),[s,l]=lt(t),[c,d]=lt(void 0),[h,u]=lt(!0),p=Date.now()+1e3*s;return dt(()=>{h&&(d(setInterval(()=>{const t=(new Date).getTime(),n=p-t,i=Math.ceil(n/1e3);i>=0&&l(i),e&&i<=e&&a(!0)},1e3)),u(!1))},[h]),dt(()=>{s<=0&&void 0!==c&&(clearInterval(c),d(void 0),a(!1),i&&i(),n&&(l(t),u(!0)))},[c,s]),o(r,s)};function Qp(t){var{disabled:e=!1,label:n,required:i=!1,optional:o=!1,size:r="large",error:a=!1,helperText:s,showInfoIcon:l,onInfoClick:c}=t,d=jt(t,["disabled","label","required","optional","size","error","helperText","showInfoIcon","onInfoClick"]);const h=$i(),{height:u,borderRadius:p,padding:f}=Ui[r],m=`\n -webkit-font-smoothing: antialiased;\n height: ${u} !important;\n width: 100% !important;\n\n ${e?"\n pointer-events: none !important;\n ":""}\n\n &.ant-picker {\n border-radius: ${p} !important;\n border-color: ${a?h.color.status.critical:h.color.base.line} !important;\n padding: ${f} !important;\n transition: 0.3s all ease !important;\n\n &:hover {\n border-color: ${h.color.base.primary2} !important;\n }\n\n &.ant-picker-focused {\n border-color: ${h.color.base.primary2} !important;\n box-shadow: none !important;\n -webkit-box-shadow: none !important;\n }\n }\n\n &.ant-picker > .ant-picker-input {\n font-family: ${Vi} !important;\n font-style: normal !important;\n font-weight: normal !important;\n font-size: 14px !important;\n line-height: 22px !important;\n color: ${h.color.base.onNeutral} !important;\n }\n\n & .ant-picker-input > input {\n font-size: 14px !important;\n color: ${h.color.base.onNeutral} !important;\n }\n\n & .ant-picker-input > input::placeholder {\n font-size: 14px !important;\n color: ${h.color.component.placeholderInput} !important;\n }\n\n &.ant-picker.ant-picker-disabled {\n background: ${h.color.surface.disabledSurface} !important;\n border: 1px solid ${h.color.base.line} !important;\n }\n\n & .ant-picker-input > input[disabled] {\n color: ${h.color.base.onNeutral} !important;\n -webkit-text-fill-color: ${h.color.base.onNeutral} !important;\n }\n\n & .ant-picker-cell-in-view {\n &.ant-picker-cell-today .ant-picker-cell-inner {\n &:before {\n border-color: ${h.color.base.primary2} !important;\n }\n }\n\n &ant-picker-cell-range-end .ant-picker-cell-inner,\n &ant-picker-cell-range-start .ant-picker-cell-inner,\n &ant-picker-cell-selected .ant-picker-cell-inner {\n background: ${h.color.base.primary2} !important;\n }\n }\n `,g=`\n .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner {\n background-color: ${h.color.base.primary2} !important;\n }\n `,b=et.createElement(Hh,{icon:"date_range",size:"m",color:h.color.base.onNeutral});return et.createElement("div",null,et.createElement(Cu,{label:n,required:i,optional:o,showInfoIcon:l,onInfoClick:c}),et.createElement(Et,Object.assign({className:`${Ze(m)}`,popupClassName:Ze(g),disabled:e,suffixIcon:b,format:"DD-MM-YYYY"},d)),et.createElement(Du,{text:s,error:a}))}var tf={Group:function(t){var{className:e=""}=t,n=jt(t,["className"]);const i=`\n &.ant-checkbox-group {\n width: 100% !important;\n }\n\n & .ant-checkbox-group-item {\n display: flex !important;\n align-items: flex-start !important;\n\n border: 1px solid ${Ei.brand.line.base} !important;\n border-radius: 5px !important;\n\n &:hover {\n border: 1px solid ${Ei.brand.primary.default} !important;\n }\n\n &:focus-within {\n border: 1px solid ${Ei.brand.primary.default} !important;\n }\n\n &:not(:last-child) {\n margin-bottom: 10px !important;\n width: 100% !important;\n }\n }\n\n & .ant-checkbox-wrapper-checked {\n border: 1px solid ${Ei.brand.primary.default} !important;\n }\n\n & .ant-checkbox-wrapper {\n padding-left: 16px !important;\n padding-top: 11px !important;\n padding-bottom: 11px !important;\n line-height: 1.6 !important;\n color: ${Rn.BLACK} !important;\n font-family: ${Vi} !important;\n }\n\n & .ant-checkbox {\n margin-top: 4px !important;\n }\n\n & .ant-checkbox + span {\n padding-left: 10px !important;\n padding-right: 10px !important;\n }\n\n & .ant-checkbox-checked .ant-checkbox-inner {\n background-color: ${Ei.brand.primary.illustration} !important;\n border-color: ${Ei.brand.primary.default} !important;\n }\n\n & .ant-checkbox-inner {\n border-radius: 5px !important;\n border: 1px solid ${Ei.brand.primary.default} !important;\n }\n `;return et.createElement(Ct.Group,Object.assign({className:`${Ze(i)} ${e}`},n))}};const ef=({title:t="No results found",subtitle:e,info:n,svgUniqueId:i="randomString"})=>et.createElement(nf,null,et.createElement(Ot,{image:et.createElement(It,{id:i,height:80,width:130}),imageStyle:{marginBottom:10,display:"block",margin:"auto"},description:!1}),t&&et.createElement(of,null,t),e&&et.createElement(rf,null,e),n&&et.createElement(sf,null,n)),nf=Vn.div`
1015
+ `,Zp=t=>{var{className:e,emptyText:n}=t,i=jt(t,["className","emptyText"]);return et.createElement(Dt,Object.assign({className:qe(qp,e),locale:{emptyText:n}},i))},Kp=t=>{var{children:e,items:n}=t,i=jt(t,["children","items"]);const{brand:o}=$i(),r=`\n font-family: ${Vi};\n font-size: 16px;\n font-weight: 400;\n\n &.ant-tabs {\n width: 100%;\n }\n\n .ant-tabs-ink-bar {\n z-index: 0;\n }\n\n .ant-tabs-nav .ant-tabs-tab {\n margin-right: 20px;\n padding-top: 8px;\n padding-bottom: 8px;\n }\n\n .ant-tabs-nav .ant-tabs-tab:hover,\n .ant-tabs-nav .ant-tabs-tab-active .ant-tabs-tab-btn {\n color: ${o.primary.default};\n }\n\n .ant-tabs-nav .ant-tabs-tab-active {\n font-weight: 700;\n font-size: 16px;\n font-family: Red Hat Display;\n }\n \n .ant-tabs-ink-bar {\n background-color: ${o.primary.default}; \n }\n `,a=null!=n?n:e?(()=>{const t=[];return et.Children.forEach(e,e=>{var n,i;if(!et.isValidElement(e))return;const o=e.props,{tab:r,key:a,children:s}=o,l=jt(o,["tab","key","children"]);t.push(Object.assign({key:String(null!==(i=null!==(n=e.key)&&void 0!==n?n:a)&&void 0!==i?i:""),label:r,children:s},l))}),t})():void 0;return et.createElement(bt,Object.assign({className:`${Ze(r)}`,items:a},i))};Kp.TabPane=bt.TabPane;const Jp=({initialSeconds:t,blinkActivationSeconds:e,shouldRepeat:n,onTimesUp:i,children:o})=>{const[r,a]=lt(!1),[s,l]=lt(t),[c,d]=lt(void 0),[h,u]=lt(!0),p=Date.now()+1e3*s;return dt(()=>{h&&(d(setInterval(()=>{const t=(new Date).getTime(),n=p-t,i=Math.ceil(n/1e3);i>=0&&l(i),e&&i<=e&&a(!0)},1e3)),u(!1))},[h]),dt(()=>{s<=0&&void 0!==c&&(clearInterval(c),d(void 0),a(!1),i&&i(),n&&(l(t),u(!0)))},[c,s]),o(r,s)};function Qp(t){var{disabled:e=!1,label:n,required:i=!1,optional:o=!1,size:r="large",error:a=!1,helperText:s,showInfoIcon:l,onInfoClick:c}=t,d=jt(t,["disabled","label","required","optional","size","error","helperText","showInfoIcon","onInfoClick"]);const h=$i(),{height:u,borderRadius:p,padding:f}=Ui[r],m=`\n -webkit-font-smoothing: antialiased;\n height: ${u} !important;\n width: 100% !important;\n\n ${e?"\n pointer-events: none !important;\n ":""}\n\n &.ant-picker {\n border-radius: ${p} !important;\n border-color: ${a?h.color.status.critical:h.color.base.line} !important;\n padding: ${f} !important;\n transition: 0.3s all ease !important;\n\n &:hover {\n border-color: ${h.color.base.primary2} !important;\n }\n\n &.ant-picker-focused {\n border-color: ${h.color.base.primary2} !important;\n box-shadow: none !important;\n -webkit-box-shadow: none !important;\n }\n }\n\n &.ant-picker > .ant-picker-input {\n font-family: ${Vi} !important;\n font-style: normal !important;\n font-weight: normal !important;\n font-size: 14px !important;\n line-height: 22px !important;\n color: ${h.color.base.onNeutral} !important;\n }\n\n & .ant-picker-input > input {\n font-size: 14px !important;\n color: ${h.color.base.onNeutral} !important;\n }\n\n & .ant-picker-input > input::placeholder {\n font-size: 14px !important;\n color: ${h.color.component.placeholderInput} !important;\n }\n\n &.ant-picker.ant-picker-disabled {\n background: ${h.color.surface.disabledSurface} !important;\n border: 1px solid ${h.color.base.line} !important;\n }\n\n & .ant-picker-input > input[disabled] {\n color: ${h.color.base.onNeutral} !important;\n -webkit-text-fill-color: ${h.color.base.onNeutral} !important;\n }\n\n & .ant-picker-cell-in-view {\n &.ant-picker-cell-today .ant-picker-cell-inner {\n &:before {\n border-color: ${h.color.base.primary2} !important;\n }\n }\n\n &ant-picker-cell-range-end .ant-picker-cell-inner,\n &ant-picker-cell-range-start .ant-picker-cell-inner,\n &ant-picker-cell-selected .ant-picker-cell-inner {\n background: ${h.color.base.primary2} !important;\n }\n }\n `,g=`\n .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner {\n background-color: ${h.color.base.primary2} !important;\n }\n `,b=et.createElement(Hh,{icon:"date_range",size:"m",color:h.color.base.onNeutral});return et.createElement("div",null,et.createElement(Cu,{label:n,required:i,optional:o,showInfoIcon:l,onInfoClick:c}),et.createElement(Et,Object.assign({className:`${Ze(m)}`,popupClassName:Ze(g),disabled:e,suffixIcon:b,format:"DD-MM-YYYY"},d)),et.createElement(Du,{text:s,error:a}))}var tf={Group:function(t){var{className:e=""}=t,n=jt(t,["className"]);const i=`\n &.ant-checkbox-group {\n width: 100% !important;\n }\n\n & .ant-checkbox-group-item {\n display: flex !important;\n align-items: flex-start !important;\n\n border: 1px solid ${Ei.brand.line.base} !important;\n border-radius: 5px !important;\n\n &:hover {\n border: 1px solid ${Ei.brand.primary.default} !important;\n }\n\n &:focus-within {\n border: 1px solid ${Ei.brand.primary.default} !important;\n }\n\n &:not(:last-child) {\n margin-bottom: 10px !important;\n width: 100% !important;\n }\n }\n\n & .ant-checkbox-wrapper-checked {\n border: 1px solid ${Ei.brand.primary.default} !important;\n }\n\n & .ant-checkbox-wrapper {\n padding-left: 16px !important;\n padding-top: 11px !important;\n padding-bottom: 11px !important;\n line-height: 1.6 !important;\n color: ${Rn.BLACK} !important;\n font-family: ${Vi} !important;\n }\n\n & .ant-checkbox {\n margin-top: 4px !important;\n }\n\n & .ant-checkbox + span {\n padding-left: 10px !important;\n padding-right: 10px !important;\n }\n\n & .ant-checkbox-checked .ant-checkbox-inner {\n background-color: ${Ei.brand.primary.illustration} !important;\n border-color: ${Ei.brand.primary.default} !important;\n }\n\n & .ant-checkbox-inner {\n border-radius: 5px !important;\n border: 1px solid ${Ei.brand.primary.default} !important;\n }\n `;return et.createElement(Ct.Group,Object.assign({className:`${Ze(i)} ${e}`},n))}};const ef=({title:t="No results found",subtitle:e,info:n,svgUniqueId:i="randomString"})=>et.createElement(nf,null,et.createElement(Ot,{image:et.createElement(It,{id:i,height:80,width:130}),imageStyle:{marginBottom:10,display:"block",margin:"auto"},description:!1}),t&&et.createElement(of,null,t),e&&et.createElement(rf,null,e),n&&et.createElement(sf,null,n)),nf=Vn.div`
1016
1016
  width: 100%;
1017
1017
  padding-top: 4px;
1018
1018
  display: block;