tgui-core 5.7.0 → 5.7.2

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.
@@ -1 +1 @@
1
- var t;import{Fragment as n,jsx as e,jsxs as o}from"react/jsx-runtime";import{KEY as r,isEscape as u}from"../common/keys.js";import{classes as i}from"../common/react.js";import{computeBoxClassName as l,computeBoxProps as c}from"../common/ui.js";import{createRef as a,useEffect as s,useRef as f,useState as m}from"react";import{Box as p}from"./Box.js";import{Icon as d}from"./Icon.js";import{Tooltip as B}from"./Tooltip.js";function h(t){let{captureKeys:n=!0,children:a,circular:s,className:f,color:m,compact:p,content:h,innerStyle:y,disabled:k,ellipsis:g,fluid:v,icon:x,iconColor:C,iconPosition:b,iconRotation:j,iconSize:N,iconSpin:_,onClick:w,selected:D,tooltip:I,tooltipPosition:T,verticalAlignContent:A,...$}=t,q=h||a,E=e(d,{className:"Button--icon",color:C,name:x||"",rotation:j,size:N,spin:_}),F=e("div",{className:i(["Button",v&&"Button--fluid",k&&"Button--disabled",D&&"Button--selected",s&&"Button--circular",p&&"Button--compact",!q&&"Button--empty",x&&"Button--hasIcon",b&&`Button--icon-${b}`,A&&"Button--flex",A&&v&&"Button--flex--fluid",A&&`Button--verticalAlignContent--${A}`,`Button--color--${m||"default"}`,f,l($)]),onClick:t=>{!k&&w&&w(t)},onKeyDown:t=>{if(n){if(t.key===r.Space||t.key===r.Enter){t.preventDefault(),!k&&w&&w(t);return}u(t.key)&&t.preventDefault()}},tabIndex:k?void 0:0,...c($),children:o("div",{className:"Button__content",style:y,children:[x&&"right"!==b&&E,g?e("span",{className:"Button--ellipsis",children:q}):q,x&&"right"===b&&E]})});return I&&(F=e(B,{content:I,position:T,children:F})),F}(t=h||(h={})).Checkbox=function(t){let{checked:n,...o}=t;return e(h,{color:"transparent",icon:n?"check-square-o":"square-o",selected:n,...o})},t.Confirm=function(t){let{children:n,color:o,confirmColor:r="bad",confirmContent:u="Confirm?",confirmIcon:i,ellipsis:l=!0,icon:c,onBlur:a,onClick:s,...f}=t,[p,d]=m(!1);return e(h,{color:p?r:o,icon:p?i:c,onBlur:function(t){d(!1),a?.(t)},onClick:function(t){p?(s?.(t),d(!1)):d(!0)},...f,children:p?u:n})},t.Input=function(t){let{buttonText:n,children:l,color:c="default",disabled:B,fluid:h,icon:y,iconRotation:k,iconSpin:g,maxLength:v,onCommit:x,ref:C,value:b="",...j}=t,[N,_]=m(b),[w,D]=m(!1),I=f(!1),T=a(),A=C??T;return s(()=>{w&&(A.current?.focus(),A.current?.select())},[w]),s(()=>{w||b===N||_(b)},[w,b]),o(p,{className:i(["Button","Button__content",h&&"Button--fluid",B&&"Button--disabled",`Button--color--${c}`]),onClick:()=>{B||D(!0)},...j,children:[y&&e(d,{name:y,rotation:k,spin:g}),n??N,e("input",{className:"NumberInput__input",disabled:!!B,maxLength:v,onBlur:function(){I.current||b===N||(x?.(N),I.current=!1),D(!1)},onChange:function(t){_(t.currentTarget.value)},onKeyDown:function(t){if(t.key===r.Enter){t.preventDefault(),t.currentTarget.blur();return}if(u(t.key)){t.preventDefault(),I.current=!0,t.currentTarget.blur();return}},ref:A,spellCheck:"false",style:{display:w?"":"none",textAlign:"left"},type:"text",value:N})]})},t.File=function(t){let{accept:r,multiple:u,onSelectFiles:i,...l}=t,c=f(null);async function a(t){let n=Array.from(t).map(t=>{let n=new FileReader;return new Promise(e=>{n.onload=()=>e(n.result),n.readAsText(t)})});return await Promise.all(n)}async function s(t){let n=t.target.files;if(n?.length){let t=await a(n);i(u?t:t[0])}}return o(n,{children:[e(h,{onClick:()=>c.current?.click(),...l}),e("input",{accept:r,hidden:!0,multiple:u,onChange:s,ref:c,type:"file"})]})};export{h as Button};
1
+ var t;import{Fragment as n,jsx as e,jsxs as o}from"react/jsx-runtime";import{KEY as r,isEscape as i}from"../common/keys.js";import{classes as u}from"../common/react.js";import{computeBoxClassName as l,computeBoxProps as c}from"../common/ui.js";import{createRef as a,useEffect as s,useRef as f,useState as m}from"react";import{Box as p}from"./Box.js";import{Icon as d}from"./Icon.js";import{Tooltip as B}from"./Tooltip.js";function h(t){let{captureKeys:n=!0,children:a,circular:s,className:f,color:m,compact:p,content:h,innerStyle:y,disabled:k,ellipsis:g,fluid:v,icon:x,iconColor:C,iconPosition:b,iconRotation:j,iconSize:N,iconSpin:_,onClick:w,selected:D,tooltip:I,tooltipPosition:T,verticalAlignContent:A,...$}=t,q=h||a,E=e(d,{className:"Button--icon",color:C,name:x||"",rotation:j,size:N,spin:_}),F=e("div",{className:u(["Button",v&&"Button--fluid",k&&"Button--disabled",D&&"Button--selected",s&&"Button--circular",p&&"Button--compact",!q&&"Button--empty",x&&"Button--hasIcon",b&&`Button--icon-${b}`,A&&"Button--flex",A&&v&&"Button--flex--fluid",A&&`Button--verticalAlignContent--${A}`,`Button--color--${m||"default"}`,f,l($)]),onClick:t=>{!k&&w&&w(t)},onKeyDown:t=>{if(n){if(t.key===r.Space||t.key===r.Enter){t.preventDefault(),!k&&w&&w(t);return}i(t.key)&&t.preventDefault()}},tabIndex:k?void 0:0,...c($),children:o("div",{className:u(["Button__content",g&&"Button__content--ellipsis"]),style:y,children:[x&&"right"!==b&&E,g?e("span",{className:"Button--ellipsis",children:q}):q,x&&"right"===b&&E]})});return I&&(F=e(B,{content:I,position:T,children:F})),F}(t=h||(h={})).Checkbox=function(t){let{checked:n,...o}=t;return e(h,{color:"transparent",icon:n?"check-square-o":"square-o",selected:n,...o})},t.Confirm=function(t){let{children:n,color:o,confirmColor:r="bad",confirmContent:i="Confirm?",confirmIcon:u,ellipsis:l=!0,icon:c,onBlur:a,onClick:s,...f}=t,[p,d]=m(!1);return e(h,{color:p?r:o,icon:p?u:c,onBlur:function(t){d(!1),a?.(t)},onClick:function(t){p?(s?.(t),d(!1)):d(!0)},...f,children:p?i:n})},t.Input=function(t){let{buttonText:n,children:l,color:c="default",disabled:B,fluid:h,icon:y,iconRotation:k,iconSpin:g,maxLength:v,onCommit:x,ref:C,value:b="",...j}=t,[N,_]=m(b),[w,D]=m(!1),I=f(!1),T=a(),A=C??T;return s(()=>{w&&(A.current?.focus(),A.current?.select())},[w]),s(()=>{w||b===N||_(b)},[w,b]),o(p,{className:u(["Button",h&&"Button--fluid",B&&"Button--disabled",`Button--color--${c}`]),onClick:()=>{B||D(!0)},...j,children:[y&&e(d,{name:y,rotation:k,spin:g}),n??N,e("input",{className:"NumberInput__input",disabled:!!B,maxLength:v,onBlur:function(){I.current||b===N||(x?.(N),I.current=!1),D(!1)},onChange:function(t){_(t.currentTarget.value)},onKeyDown:function(t){if(t.key===r.Enter){t.preventDefault(),t.currentTarget.blur();return}if(i(t.key)){t.preventDefault(),I.current=!0,t.currentTarget.blur();return}},ref:A,spellCheck:"false",style:{display:w?"":"none",textAlign:"left"},type:"text",value:N})]})},t.File=function(t){let{accept:r,multiple:i,onSelectFiles:u,...l}=t,c=f(null);async function a(t){let n=Array.from(t).map(t=>{let n=new FileReader;return new Promise(e=>{n.onload=()=>e(n.result),n.readAsText(t)})});return await Promise.all(n)}async function s(t){let n=t.target.files;if(n?.length){let t=await a(n);u(i?t:t[0])}}return o(n,{children:[e(h,{onClick:()=>c.current?.click(),...l}),e("input",{accept:r,hidden:!0,multiple:i,onChange:s,ref:c,type:"file"})]})};export{h as Button};
package/package.json CHANGED
@@ -6,7 +6,7 @@
6
6
  },
7
7
  "description": "TGUI core component library",
8
8
  "devDependencies": {
9
- "@biomejs/biome": "^2.3.10",
9
+ "@biomejs/biome": "2.3.11",
10
10
  "@happy-dom/global-registrator": "^20.0.11",
11
11
  "@rsbuild/core": "^1.7.1",
12
12
  "@rsbuild/plugin-react": "^1.4.2",
@@ -53,7 +53,7 @@
53
53
  ],
54
54
  "license": "MIT",
55
55
  "name": "tgui-core",
56
- "packageManager": "bun@1.2.17",
56
+ "packageManager": "bun@1.3.5",
57
57
  "peerDependencies": {
58
58
  "react": "^19.1.0",
59
59
  "react-dom": "^19.1.0"
@@ -71,5 +71,5 @@
71
71
  "test": "bun test"
72
72
  },
73
73
  "type": "module",
74
- "version": "5.7.0"
74
+ "version": "5.7.2"
75
75
  }
@@ -57,6 +57,7 @@
57
57
  position: relative;
58
58
  display: inline-block;
59
59
  white-space: nowrap;
60
+ line-height: var(--button-height);
60
61
  padding: 0 var(--space-m);
61
62
  margin-right: var(--space-xs);
62
63
  margin-bottom: var(--space-xs);
@@ -70,11 +71,13 @@
70
71
  }
71
72
 
72
73
  &__content {
73
- display: flex; // Inline flex will broke ellipsis, don't change it.
74
- align-items: center;
74
+ display: block;
75
75
  align-self: stretch;
76
- min-height: var(--button-height);
77
- width: 100%; // do not change to fit-content, it will break ellipsis
76
+
77
+ &--ellipsis {
78
+ display: flex; // Inline flex will broke ellipsis, don't change it.
79
+ align-items: center;
80
+ }
78
81
  }
79
82
 
80
83
  .Button--icon {
@@ -105,14 +108,11 @@
105
108
 
106
109
  &--compact {
107
110
  padding: 0 var(--space-s);
111
+ line-height: 1.333em;
108
112
 
109
113
  &.Button--hasIcon .Button--icon {
110
114
  margin: 0 var(--space-xxs);
111
115
  }
112
-
113
- .Button__content {
114
- min-height: calc(var(--button-height) * 0.8);
115
- }
116
116
  }
117
117
 
118
118
  &--circular {
@@ -129,12 +129,7 @@
129
129
  display: block;
130
130
  overflow: hidden;
131
131
  text-overflow: ellipsis;
132
- // margin-right: calc(-1 * var(--space-s));
133
-
134
- white-space: nowrap;
135
- .Button__content {
136
- overflow: hidden;
137
- }
132
+ margin-right: calc(-1 * var(--space-s));
138
133
  }
139
134
 
140
135
  // We don't need additional margin if button inside stack