next-helios-fe 1.8.108 → 1.8.109

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 (5) hide show
  1. package/dist/components/content-container/tab/index.d.ts +6 -2
  2. package/dist/index.js +1 -1
  3. package/package.json +1 -1
  4. package/src/components/content-container/tab/index.tsx +30 -16
  5. package/src/components/form/other/multipleSelect.tsx +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-helios-fe",
3
- "version": "1.8.108",
3
+ "version": "1.8.109",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/components/content-container/tab/index.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- import React, { useState } from "react";
2
+ import React, { useState, useEffect } from "react";
3
3
  import { Icon } from "@iconify/react";
4
4
  import { Window, type WindowProps } from "./window";
5
5
 
@@ -15,8 +15,9 @@ interface TabProps {
15
15
  disablePadding?: boolean;
16
16
  };
17
17
  cornerComponent?: React.ReactNode;
18
- onChangeTab?: (tab: any) => void;
19
- onCloseTab?: (tab: any) => void;
18
+ activeTab?: number;
19
+ onChangeTab?: (tab: { index: number; title: string }) => void;
20
+ onCloseTab?: (tab: number) => void;
20
21
  }
21
22
 
22
23
  interface TabComponent extends React.FC<TabProps> {
@@ -28,6 +29,7 @@ export const Tab: TabComponent = ({
28
29
  tabs,
29
30
  options,
30
31
  cornerComponent,
32
+ activeTab,
31
33
  onChangeTab,
32
34
  onCloseTab,
33
35
  }) => {
@@ -35,7 +37,13 @@ export const Tab: TabComponent = ({
35
37
  const windowList = childrenList.filter((child) => {
36
38
  return (child as React.ReactElement).type === Tab.Window;
37
39
  });
38
- const [activeTab, setActiveTab] = useState(0);
40
+ const [tempActiveTab, setTempActiveTab] = useState(0);
41
+
42
+ useEffect(() => {
43
+ if (activeTab !== undefined) {
44
+ setTempActiveTab(activeTab);
45
+ }
46
+ }, [activeTab]);
39
47
 
40
48
  return (
41
49
  <div
@@ -54,7 +62,7 @@ export const Tab: TabComponent = ({
54
62
  <button
55
63
  type="button"
56
64
  className={`flex select-none items-center gap-2 whitespace-nowrap border-b-2 pb-1.5 pt-2 duration-300 ${
57
- activeTab === index
65
+ tempActiveTab === index
58
66
  ? "border-primary text-primary"
59
67
  : "border-transparent hover:border-primary-transparent hover:text-primary"
60
68
  } ${
@@ -63,7 +71,9 @@ export const Tab: TabComponent = ({
63
71
  : "px-6"
64
72
  }`}
65
73
  onClick={() => {
66
- setActiveTab(index);
74
+ if (activeTab === undefined) {
75
+ setTempActiveTab(index);
76
+ }
67
77
 
68
78
  if (onChangeTab) {
69
79
  onChangeTab({
@@ -81,13 +91,15 @@ export const Tab: TabComponent = ({
81
91
  type="button"
82
92
  className="absolute right-2 rounded-full p-0.5 hover:text-warning"
83
93
  onClick={() => {
84
- setActiveTab(
85
- activeTab === index
86
- ? index === 0
87
- ? index
88
- : index - 1
89
- : activeTab
90
- );
94
+ if (activeTab === undefined) {
95
+ setTempActiveTab(
96
+ tempActiveTab === index
97
+ ? index === 0
98
+ ? index
99
+ : index - 1
100
+ : tempActiveTab
101
+ );
102
+ }
91
103
 
92
104
  onCloseTab(index);
93
105
  }}
@@ -114,12 +126,14 @@ export const Tab: TabComponent = ({
114
126
  key={index}
115
127
  type="button"
116
128
  className={`flex select-none items-center gap-2 whitespace-nowrap border-b-2 border-r-0 px-6 pb-1.5 pt-2 text-left duration-300 lg:border-b-0 lg:border-r-2 ${
117
- activeTab === index
129
+ tempActiveTab === index
118
130
  ? "border-primary text-primary"
119
131
  : "border-transparent hover:border-primary-transparent hover:text-primary"
120
132
  }`}
121
133
  onClick={() => {
122
- setActiveTab(index);
134
+ if (activeTab === undefined) {
135
+ setTempActiveTab(index);
136
+ }
123
137
 
124
138
  if (onChangeTab) {
125
139
  onChangeTab({
@@ -149,7 +163,7 @@ export const Tab: TabComponent = ({
149
163
  : ""
150
164
  }`}
151
165
  >
152
- {windowList[activeTab]}
166
+ {windowList[tempActiveTab]}
153
167
  </div>
154
168
  </div>
155
169
  );
package/src/components/form/other/multipleSelect.tsx CHANGED
@@ -155,7 +155,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
155
155
  <input
156
156
  ref={inputRef}
157
157
  type="text"
158
- className="w-full ps-4 pe-14 border border-default rounded-md bg-secondary-bg text-transparent cursor-pointer caret-transparent duration-150 placeholder:duration-300 placeholder:text-silent focus:placeholder:translate-x-1 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled disabled:cursor-default"
158
+ className="w-full ps-4 pe-14 border border-default rounded-md bg-secondary-bg text-transparent cursor-pointer caret-transparent duration-150 placeholder:duration-300 placeholder:text-silent focus:placeholder:translate-x-1 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:cursor-default"
159
159
  style={{
160
160
  height:
161
161
  tempValue.length !== 0