design-zystem 1.0.301 → 1.0.303
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.
- package/dist/index.d.mts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +6 -3
- package/dist/index.mjs +6 -3
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -962,11 +962,12 @@ interface IconTabItem {
|
|
|
962
962
|
interface IconTabsProps extends HTMLAttributes<HTMLDivElement> {
|
|
963
963
|
items: IconTabItem[];
|
|
964
964
|
selectedColor?: string;
|
|
965
|
+
selectedIconColor?: string;
|
|
965
966
|
onTabChange?: (index: number) => void;
|
|
966
967
|
disabledTabs?: number[];
|
|
967
968
|
defaultTabIndex?: number;
|
|
968
969
|
}
|
|
969
|
-
declare const IconTabs: ({ items, selectedColor, onTabChange, disabledTabs, defaultTabIndex, }: IconTabsProps) => react_jsx_runtime.JSX.Element;
|
|
970
|
+
declare const IconTabs: ({ items, selectedColor, selectedIconColor, onTabChange, disabledTabs, defaultTabIndex, }: IconTabsProps) => react_jsx_runtime.JSX.Element;
|
|
970
971
|
|
|
971
972
|
interface PopoverItem {
|
|
972
973
|
label: string | ReactNode;
|
package/dist/index.d.ts
CHANGED
|
@@ -962,11 +962,12 @@ interface IconTabItem {
|
|
|
962
962
|
interface IconTabsProps extends HTMLAttributes<HTMLDivElement> {
|
|
963
963
|
items: IconTabItem[];
|
|
964
964
|
selectedColor?: string;
|
|
965
|
+
selectedIconColor?: string;
|
|
965
966
|
onTabChange?: (index: number) => void;
|
|
966
967
|
disabledTabs?: number[];
|
|
967
968
|
defaultTabIndex?: number;
|
|
968
969
|
}
|
|
969
|
-
declare const IconTabs: ({ items, selectedColor, onTabChange, disabledTabs, defaultTabIndex, }: IconTabsProps) => react_jsx_runtime.JSX.Element;
|
|
970
|
+
declare const IconTabs: ({ items, selectedColor, selectedIconColor, onTabChange, disabledTabs, defaultTabIndex, }: IconTabsProps) => react_jsx_runtime.JSX.Element;
|
|
970
971
|
|
|
971
972
|
interface PopoverItem {
|
|
972
973
|
label: string | ReactNode;
|
package/dist/index.js
CHANGED
|
@@ -5164,6 +5164,7 @@ var TabSlider = import_styled_components42.default.div`
|
|
|
5164
5164
|
var IconTabs = ({
|
|
5165
5165
|
items,
|
|
5166
5166
|
selectedColor = "blue_50",
|
|
5167
|
+
selectedIconColor = "blue_950",
|
|
5167
5168
|
onTabChange,
|
|
5168
5169
|
disabledTabs = [],
|
|
5169
5170
|
defaultTabIndex = 0
|
|
@@ -5208,7 +5209,7 @@ var IconTabs = ({
|
|
|
5208
5209
|
{
|
|
5209
5210
|
name: item.icon,
|
|
5210
5211
|
size: "s",
|
|
5211
|
-
color: selectedTab === index ?
|
|
5212
|
+
color: selectedTab === index ? selectedIconColor : "grey_500",
|
|
5212
5213
|
family: "regular"
|
|
5213
5214
|
}
|
|
5214
5215
|
)
|
|
@@ -5301,10 +5302,11 @@ var Popover = ({
|
|
|
5301
5302
|
viewportPadding,
|
|
5302
5303
|
Math.min(top, window.innerHeight - menuHeight - viewportPadding)
|
|
5303
5304
|
),
|
|
5304
|
-
left: align === "left" ? rect.left : rect.right
|
|
5305
|
+
left: align === "left" ? rect.left : rect.right,
|
|
5306
|
+
width: fullWidth ? rect.width : void 0
|
|
5305
5307
|
});
|
|
5306
5308
|
}
|
|
5307
|
-
}, [items.length, anchorRef, offsetY, align]);
|
|
5309
|
+
}, [items.length, anchorRef, offsetY, align, fullWidth]);
|
|
5308
5310
|
(0, import_react28.useEffect)(() => {
|
|
5309
5311
|
const handleClickOutside = (event) => {
|
|
5310
5312
|
var _a, _b;
|
|
@@ -5336,6 +5338,7 @@ var Popover = ({
|
|
|
5336
5338
|
top: menuPosition.top,
|
|
5337
5339
|
bottom: "auto",
|
|
5338
5340
|
left: menuPosition.left,
|
|
5341
|
+
width: menuPosition.width,
|
|
5339
5342
|
transform: align === "left" ? "none" : "translateX(-100%)"
|
|
5340
5343
|
};
|
|
5341
5344
|
return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(PopoverWrapper, { ref, $fullWidth: fullWidth, children: [
|
package/dist/index.mjs
CHANGED
|
@@ -5038,6 +5038,7 @@ var TabSlider = styled42.div`
|
|
|
5038
5038
|
var IconTabs = ({
|
|
5039
5039
|
items,
|
|
5040
5040
|
selectedColor = "blue_50",
|
|
5041
|
+
selectedIconColor = "blue_950",
|
|
5041
5042
|
onTabChange,
|
|
5042
5043
|
disabledTabs = [],
|
|
5043
5044
|
defaultTabIndex = 0
|
|
@@ -5082,7 +5083,7 @@ var IconTabs = ({
|
|
|
5082
5083
|
{
|
|
5083
5084
|
name: item.icon,
|
|
5084
5085
|
size: "s",
|
|
5085
|
-
color: selectedTab === index ?
|
|
5086
|
+
color: selectedTab === index ? selectedIconColor : "grey_500",
|
|
5086
5087
|
family: "regular"
|
|
5087
5088
|
}
|
|
5088
5089
|
)
|
|
@@ -5180,10 +5181,11 @@ var Popover = ({
|
|
|
5180
5181
|
viewportPadding,
|
|
5181
5182
|
Math.min(top, window.innerHeight - menuHeight - viewportPadding)
|
|
5182
5183
|
),
|
|
5183
|
-
left: align === "left" ? rect.left : rect.right
|
|
5184
|
+
left: align === "left" ? rect.left : rect.right,
|
|
5185
|
+
width: fullWidth ? rect.width : void 0
|
|
5184
5186
|
});
|
|
5185
5187
|
}
|
|
5186
|
-
}, [items.length, anchorRef, offsetY, align]);
|
|
5188
|
+
}, [items.length, anchorRef, offsetY, align, fullWidth]);
|
|
5187
5189
|
useEffect14(() => {
|
|
5188
5190
|
const handleClickOutside = (event) => {
|
|
5189
5191
|
var _a, _b;
|
|
@@ -5215,6 +5217,7 @@ var Popover = ({
|
|
|
5215
5217
|
top: menuPosition.top,
|
|
5216
5218
|
bottom: "auto",
|
|
5217
5219
|
left: menuPosition.left,
|
|
5220
|
+
width: menuPosition.width,
|
|
5218
5221
|
transform: align === "left" ? "none" : "translateX(-100%)"
|
|
5219
5222
|
};
|
|
5220
5223
|
return /* @__PURE__ */ jsxs26(PopoverWrapper, { ref, $fullWidth: fullWidth, children: [
|