@dktunited-techoff/techoff-suite-ui 1.7.0 → 1.7.4

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.
Files changed (9) hide show
  1. package/esm/components/TsTabs/TsTabs.css +8 -2
  2. package/esm/components/TsTabs/TsTabs.js +6 -5
  3. package/esm/components/TsTabs/TsTabs.js.map +1 -1
  4. package/lib/components/TsTabs/TsTabs.css +8 -2
  5. package/lib/components/TsTabs/TsTabs.js +6 -5
  6. package/lib/components/TsTabs/TsTabs.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/TsTabs/TsTabs.css +8 -2
  9. package/src/components/TsTabs/TsTabs.tsx +18 -16
package/esm/components/TsTabs/TsTabs.css CHANGED
@@ -10,18 +10,23 @@
10
10
  height: 64px;
11
11
  border-bottom: 1px solid #d9dde1;
12
12
  }
13
+ .ts-tabs-items-container {
14
+ flex: 1;
15
+ height: 100%;
16
+ padding: 0 20px;
17
+ overflow: auto;
18
+ }
13
19
  .ts-tabs-items {
14
20
  display: flex;
15
- flex: 1;
16
21
  align-items: center;
17
22
  height: 100%;
18
- padding: 0 20px;
19
23
  }
20
24
  .ts-tabs-item {
21
25
  display: flex;
22
26
  align-items: center;
23
27
  margin-right: 20px;
24
28
  padding: 4px 0;
29
+ white-space: nowrap;
25
30
  cursor: pointer;
26
31
  }
27
32
  .ts-tabs-item--selected {
@@ -38,6 +43,7 @@
38
43
  .ts-tabs-actions {
39
44
  display: flex;
40
45
  align-items: center;
46
+ padding: 0 16px;
41
47
  }
42
48
  .ts-tabs-actions > * {
43
49
  margin-left: 10px;
package/esm/components/TsTabs/TsTabs.js CHANGED
@@ -8,11 +8,12 @@ export const TsTabs = ({ defaultSelectedTabId, tabs }) => {
8
8
  // Rendering
9
9
  return (React.createElement("div", { className: "ts-tabs" },
10
10
  React.createElement("div", { className: "ts-tabs-header" },
11
- React.createElement("div", { className: "ts-tabs-items" }, tabs.map(tab => (React.createElement("div", { key: tab.id, className: `ts-tabs-item ${tab.id === selectedTab.id ? 'ts-tabs-item--selected' : ''}`, onClick: () => setSelectedTab(tab) },
12
- tab.icon && (React.createElement("div", { className: "ts-tabs-item--icon" },
13
- React.createElement(TsIcon, { name: tab.icon }))),
14
- React.createElement("div", { className: "ts-tabs-item--label" }, tab.label),
15
- tab.id === selectedTab.id && React.createElement("div", { className: "ts-tabs-item--selected-pin" }))))),
11
+ React.createElement("div", { className: "ts-tabs-items-container" },
12
+ React.createElement("div", { className: "ts-tabs-items" }, tabs.map(tab => (React.createElement("div", { key: tab.id, className: `ts-tabs-item ${tab.id === selectedTab.id ? 'ts-tabs-item--selected' : ''}`, onClick: () => setSelectedTab(tab) },
13
+ tab.icon && (React.createElement("div", { className: "ts-tabs-item--icon" },
14
+ React.createElement(TsIcon, { name: tab.icon }))),
15
+ React.createElement("div", { className: "ts-tabs-item--label" }, tab.label),
16
+ tab.id === selectedTab.id && React.createElement("div", { className: "ts-tabs-item--selected-pin" })))))),
16
17
  selectedTab?.actions && React.createElement("div", { className: "ts-tabs-actions" }, selectedTab?.actions)),
17
18
  React.createElement("div", { className: "ts-tabs-container" }, selectedTab?.element)));
18
19
  };
package/esm/components/TsTabs/TsTabs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TsTabs.js","sourceRoot":"","sources":["../../../src/components/TsTabs/TsTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,oBAAoB,EAAE,IAAI,EAAe,EAAE,EAAE;IACpE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,oBAAoB,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAElH,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,SAAS;QACtB,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,6BAAK,SAAS,EAAC,eAAe,IAC3B,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,6BACE,GAAG,EAAE,GAAG,CAAC,EAAE,EACX,SAAS,EAAE,gBAAgB,GAAG,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,EAAE,EACtF,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,CAAC;gBAEjC,GAAG,CAAC,IAAI,IAAI,CACX,6BAAK,SAAS,EAAC,oBAAoB;oBACjC,oBAAC,MAAM,IAAC,IAAI,EAAE,GAAG,CAAC,IAAI,GAAI,CACtB,CACP;gBACD,6BAAK,SAAS,EAAC,qBAAqB,IAAE,GAAG,CAAC,KAAK,CAAO;gBACrD,GAAG,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE,IAAI,6BAAK,SAAS,EAAC,4BAA4B,GAAG,CACxE,CACP,CAAC,CACE;YAEL,WAAW,EAAE,OAAO,IAAI,6BAAK,SAAS,EAAC,iBAAiB,IAAE,WAAW,EAAE,OAAO,CAAO,CAClF;QAEN,6BAAK,SAAS,EAAC,mBAAmB,IAAE,WAAW,EAAE,OAAO,CAAO,CAC3D,CACP,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"TsTabs.js","sourceRoot":"","sources":["../../../src/components/TsTabs/TsTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,oBAAoB,EAAE,IAAI,EAAe,EAAE,EAAE;IACpE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,oBAAoB,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAElH,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,SAAS;QACtB,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,6BAAK,SAAS,EAAC,yBAAyB;gBACtC,6BAAK,SAAS,EAAC,eAAe,IAC3B,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,6BACE,GAAG,EAAE,GAAG,CAAC,EAAE,EACX,SAAS,EAAE,gBAAgB,GAAG,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,EAAE,EACtF,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,CAAC;oBAEjC,GAAG,CAAC,IAAI,IAAI,CACX,6BAAK,SAAS,EAAC,oBAAoB;wBACjC,oBAAC,MAAM,IAAC,IAAI,EAAE,GAAG,CAAC,IAAI,GAAI,CACtB,CACP;oBACD,6BAAK,SAAS,EAAC,qBAAqB,IAAE,GAAG,CAAC,KAAK,CAAO;oBACrD,GAAG,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE,IAAI,6BAAK,SAAS,EAAC,4BAA4B,GAAG,CACxE,CACP,CAAC,CACE,CACF;YAEL,WAAW,EAAE,OAAO,IAAI,6BAAK,SAAS,EAAC,iBAAiB,IAAE,WAAW,EAAE,OAAO,CAAO,CAClF;QAEN,6BAAK,SAAS,EAAC,mBAAmB,IAAE,WAAW,EAAE,OAAO,CAAO,CAC3D,CACP,CAAC;AACJ,CAAC,CAAC"}
package/lib/components/TsTabs/TsTabs.css CHANGED
@@ -10,18 +10,23 @@
10
10
  height: 64px;
11
11
  border-bottom: 1px solid #d9dde1;
12
12
  }
13
+ .ts-tabs-items-container {
14
+ flex: 1;
15
+ height: 100%;
16
+ padding: 0 20px;
17
+ overflow: auto;
18
+ }
13
19
  .ts-tabs-items {
14
20
  display: flex;
15
- flex: 1;
16
21
  align-items: center;
17
22
  height: 100%;
18
- padding: 0 20px;
19
23
  }
20
24
  .ts-tabs-item {
21
25
  display: flex;
22
26
  align-items: center;
23
27
  margin-right: 20px;
24
28
  padding: 4px 0;
29
+ white-space: nowrap;
25
30
  cursor: pointer;
26
31
  }
27
32
  .ts-tabs-item--selected {
@@ -38,6 +43,7 @@
38
43
  .ts-tabs-actions {
39
44
  display: flex;
40
45
  align-items: center;
46
+ padding: 0 16px;
41
47
  }
42
48
  .ts-tabs-actions > * {
43
49
  margin-left: 10px;
package/lib/components/TsTabs/TsTabs.js CHANGED
@@ -11,11 +11,12 @@ const TsTabs = ({ defaultSelectedTabId, tabs }) => {
11
11
  // Rendering
12
12
  return (React.createElement("div", { className: "ts-tabs" },
13
13
  React.createElement("div", { className: "ts-tabs-header" },
14
- React.createElement("div", { className: "ts-tabs-items" }, tabs.map(tab => (React.createElement("div", { key: tab.id, className: `ts-tabs-item ${tab.id === selectedTab.id ? 'ts-tabs-item--selected' : ''}`, onClick: () => setSelectedTab(tab) },
15
- tab.icon && (React.createElement("div", { className: "ts-tabs-item--icon" },
16
- React.createElement(TsIcon_1.TsIcon, { name: tab.icon }))),
17
- React.createElement("div", { className: "ts-tabs-item--label" }, tab.label),
18
- tab.id === selectedTab.id && React.createElement("div", { className: "ts-tabs-item--selected-pin" }))))),
14
+ React.createElement("div", { className: "ts-tabs-items-container" },
15
+ React.createElement("div", { className: "ts-tabs-items" }, tabs.map(tab => (React.createElement("div", { key: tab.id, className: `ts-tabs-item ${tab.id === selectedTab.id ? 'ts-tabs-item--selected' : ''}`, onClick: () => setSelectedTab(tab) },
16
+ tab.icon && (React.createElement("div", { className: "ts-tabs-item--icon" },
17
+ React.createElement(TsIcon_1.TsIcon, { name: tab.icon }))),
18
+ React.createElement("div", { className: "ts-tabs-item--label" }, tab.label),
19
+ tab.id === selectedTab.id && React.createElement("div", { className: "ts-tabs-item--selected-pin" })))))),
19
20
  selectedTab?.actions && React.createElement("div", { className: "ts-tabs-actions" }, selectedTab?.actions)),
20
21
  React.createElement("div", { className: "ts-tabs-container" }, selectedTab?.element)));
21
22
  };
package/lib/components/TsTabs/TsTabs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TsTabs.js","sourceRoot":"","sources":["../../../src/components/TsTabs/TsTabs.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAiC;AACjC,6CAA0C;AAE1C,wBAAsB;AAEf,MAAM,MAAM,GAAG,CAAC,EAAE,oBAAoB,EAAE,IAAI,EAAe,EAAE,EAAE;IACpE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAU,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,oBAAoB,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAElH,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,SAAS;QACtB,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,6BAAK,SAAS,EAAC,eAAe,IAC3B,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,6BACE,GAAG,EAAE,GAAG,CAAC,EAAE,EACX,SAAS,EAAE,gBAAgB,GAAG,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,EAAE,EACtF,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,CAAC;gBAEjC,GAAG,CAAC,IAAI,IAAI,CACX,6BAAK,SAAS,EAAC,oBAAoB;oBACjC,oBAAC,eAAM,IAAC,IAAI,EAAE,GAAG,CAAC,IAAI,GAAI,CACtB,CACP;gBACD,6BAAK,SAAS,EAAC,qBAAqB,IAAE,GAAG,CAAC,KAAK,CAAO;gBACrD,GAAG,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE,IAAI,6BAAK,SAAS,EAAC,4BAA4B,GAAG,CACxE,CACP,CAAC,CACE;YAEL,WAAW,EAAE,OAAO,IAAI,6BAAK,SAAS,EAAC,iBAAiB,IAAE,WAAW,EAAE,OAAO,CAAO,CAClF;QAEN,6BAAK,SAAS,EAAC,mBAAmB,IAAE,WAAW,EAAE,OAAO,CAAO,CAC3D,CACP,CAAC;AACJ,CAAC,CAAC;AAhCW,QAAA,MAAM,UAgCjB"}
1
+ {"version":3,"file":"TsTabs.js","sourceRoot":"","sources":["../../../src/components/TsTabs/TsTabs.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAiC;AACjC,6CAA0C;AAE1C,wBAAsB;AAEf,MAAM,MAAM,GAAG,CAAC,EAAE,oBAAoB,EAAE,IAAI,EAAe,EAAE,EAAE;IACpE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAU,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,oBAAoB,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAElH,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,SAAS;QACtB,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,6BAAK,SAAS,EAAC,yBAAyB;gBACtC,6BAAK,SAAS,EAAC,eAAe,IAC3B,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,6BACE,GAAG,EAAE,GAAG,CAAC,EAAE,EACX,SAAS,EAAE,gBAAgB,GAAG,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,EAAE,EACtF,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,CAAC;oBAEjC,GAAG,CAAC,IAAI,IAAI,CACX,6BAAK,SAAS,EAAC,oBAAoB;wBACjC,oBAAC,eAAM,IAAC,IAAI,EAAE,GAAG,CAAC,IAAI,GAAI,CACtB,CACP;oBACD,6BAAK,SAAS,EAAC,qBAAqB,IAAE,GAAG,CAAC,KAAK,CAAO;oBACrD,GAAG,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE,IAAI,6BAAK,SAAS,EAAC,4BAA4B,GAAG,CACxE,CACP,CAAC,CACE,CACF;YAEL,WAAW,EAAE,OAAO,IAAI,6BAAK,SAAS,EAAC,iBAAiB,IAAE,WAAW,EAAE,OAAO,CAAO,CAClF;QAEN,6BAAK,SAAS,EAAC,mBAAmB,IAAE,WAAW,EAAE,OAAO,CAAO,CAC3D,CACP,CAAC;AACJ,CAAC,CAAC;AAlCW,QAAA,MAAM,UAkCjB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dktunited-techoff/techoff-suite-ui",
3
- "version": "1.7.0",
3
+ "version": "1.7.4",
4
4
  "main": "lib/index.js",
5
5
  "types": "./lib",
6
6
  "module": "esm/index.js",
package/src/components/TsTabs/TsTabs.css CHANGED
@@ -10,18 +10,23 @@
10
10
  height: 64px;
11
11
  border-bottom: 1px solid #d9dde1;
12
12
  }
13
+ .ts-tabs-items-container {
14
+ flex: 1;
15
+ height: 100%;
16
+ padding: 0 20px;
17
+ overflow: auto;
18
+ }
13
19
  .ts-tabs-items {
14
20
  display: flex;
15
- flex: 1;
16
21
  align-items: center;
17
22
  height: 100%;
18
- padding: 0 20px;
19
23
  }
20
24
  .ts-tabs-item {
21
25
  display: flex;
22
26
  align-items: center;
23
27
  margin-right: 20px;
24
28
  padding: 4px 0;
29
+ white-space: nowrap;
25
30
  cursor: pointer;
26
31
  }
27
32
  .ts-tabs-item--selected {
@@ -38,6 +43,7 @@
38
43
  .ts-tabs-actions {
39
44
  display: flex;
40
45
  align-items: center;
46
+ padding: 0 16px;
41
47
  }
42
48
  .ts-tabs-actions > * {
43
49
  margin-left: 10px;
package/src/components/TsTabs/TsTabs.tsx CHANGED
@@ -12,22 +12,24 @@ export const TsTabs = ({ defaultSelectedTabId, tabs }: TsTabsProps) => {
12
12
  return (
13
13
  <div className="ts-tabs">
14
14
  <div className="ts-tabs-header">
15
- <div className="ts-tabs-items">
16
- {tabs.map(tab => (
17
- <div
18
- key={tab.id}
19
- className={`ts-tabs-item ${tab.id === selectedTab.id ? 'ts-tabs-item--selected' : ''}`}
20
- onClick={() => setSelectedTab(tab)}
21
- >
22
- {tab.icon && (
23
- <div className="ts-tabs-item--icon">
24
- <TsIcon name={tab.icon} />
25
- </div>
26
- )}
27
- <div className="ts-tabs-item--label">{tab.label}</div>
28
- {tab.id === selectedTab.id && <div className="ts-tabs-item--selected-pin" />}
29
- </div>
30
- ))}
15
+ <div className="ts-tabs-items-container">
16
+ <div className="ts-tabs-items">
17
+ {tabs.map(tab => (
18
+ <div
19
+ key={tab.id}
20
+ className={`ts-tabs-item ${tab.id === selectedTab.id ? 'ts-tabs-item--selected' : ''}`}
21
+ onClick={() => setSelectedTab(tab)}
22
+ >
23
+ {tab.icon && (
24
+ <div className="ts-tabs-item--icon">
25
+ <TsIcon name={tab.icon} />
26
+ </div>
27
+ )}
28
+ <div className="ts-tabs-item--label">{tab.label}</div>
29
+ {tab.id === selectedTab.id && <div className="ts-tabs-item--selected-pin" />}
30
+ </div>
31
+ ))}
32
+ </div>
31
33
  </div>
32
34
 
33
35
  {selectedTab?.actions && <div className="ts-tabs-actions">{selectedTab?.actions}</div>}