pixelize-design-library 2.2.97 → 2.2.99

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 (10) hide show
  1. package/dist/Components/Input/PhoneNumberInput.d.ts +1 -1
  2. package/dist/Components/Input/PhoneNumberInput.js +6 -6
  3. package/dist/Components/Input/PhoneNumberInputProps.d.ts +1 -0
  4. package/dist/Components/NavigationBar/NavigationBar.js +29 -34
  5. package/dist/Components/ProductDetails/ProductImageSlider.js +31 -28
  6. package/dist/Components/SideBar/SideBar.js +1 -1
  7. package/dist/Components/SideBar/components/MenuItemBox.d.ts +2 -0
  8. package/dist/Components/SideBar/components/MenuItemBox.js +17 -35
  9. package/dist/Components/SideBar/components/MenuItems.js +120 -2
  10. package/package.json +1 -1
package/dist/Components/Input/PhoneNumberInput.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import { PhoneNumberInputProps } from "./PhoneNumberInputProps";
3
- declare const PhoneNumberInput: ({ size, value, country, countries, placeholder, onChange, inputId, selectId, error, errorMessage, helperText, label, id, width, isInformation, informationMessage, isRequired, onBlur, onFocus, isReadOnly, height, autoComplete, showCountrySelect, ref, name, minW, maxW, ...rest }: PhoneNumberInputProps) => React.JSX.Element;
3
+ declare const PhoneNumberInput: ({ size, value, codeValueReturn, country, countries, placeholder, onChange, inputId, selectId, error, errorMessage, helperText, label, id, width, isInformation, informationMessage, isRequired, onBlur, onFocus, isReadOnly, height, autoComplete, showCountrySelect, ref, name, minW, maxW, ...rest }: PhoneNumberInputProps) => React.JSX.Element;
4
4
  export default PhoneNumberInput;
package/dist/Components/Input/PhoneNumberInput.js CHANGED
@@ -63,7 +63,7 @@ var getFlagEmoji = function (countryCode) {
63
63
  });
64
64
  };
65
65
  var PhoneNumberInput = function (_a) {
66
- var _b = _a.size, size = _b === void 0 ? "md" : _b, value = _a.value, country = _a.country, countries = _a.countries, _c = _a.placeholder, placeholder = _c === void 0 ? "Enter phone number" : _c, onChange = _a.onChange, inputId = _a.inputId, selectId = _a.selectId, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, label = _a.label, id = _a.id, _d = _a.width, width = _d === void 0 ? "100%" : _d, isInformation = _a.isInformation, informationMessage = _a.informationMessage, isRequired = _a.isRequired, onBlur = _a.onBlur, onFocus = _a.onFocus, isReadOnly = _a.isReadOnly, height = _a.height, autoComplete = _a.autoComplete, _e = _a.showCountrySelect, showCountrySelect = _e === void 0 ? true : _e, ref = _a.ref, name = _a.name, minW = _a.minW, maxW = _a.maxW, rest = __rest(_a, ["size", "value", "country", "countries", "placeholder", "onChange", "inputId", "selectId", "error", "errorMessage", "helperText", "label", "id", "width", "isInformation", "informationMessage", "isRequired", "onBlur", "onFocus", "isReadOnly", "height", "autoComplete", "showCountrySelect", "ref", "name", "minW", "maxW"]);
66
+ var _b = _a.size, size = _b === void 0 ? "md" : _b, value = _a.value, _c = _a.codeValueReturn, codeValueReturn = _c === void 0 ? true : _c, country = _a.country, countries = _a.countries, _d = _a.placeholder, placeholder = _d === void 0 ? "Enter phone number" : _d, onChange = _a.onChange, inputId = _a.inputId, selectId = _a.selectId, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, label = _a.label, id = _a.id, _e = _a.width, width = _e === void 0 ? "100%" : _e, isInformation = _a.isInformation, informationMessage = _a.informationMessage, isRequired = _a.isRequired, onBlur = _a.onBlur, onFocus = _a.onFocus, isReadOnly = _a.isReadOnly, height = _a.height, autoComplete = _a.autoComplete, _f = _a.showCountrySelect, showCountrySelect = _f === void 0 ? true : _f, ref = _a.ref, name = _a.name, minW = _a.minW, maxW = _a.maxW, rest = __rest(_a, ["size", "value", "codeValueReturn", "country", "countries", "placeholder", "onChange", "inputId", "selectId", "error", "errorMessage", "helperText", "label", "id", "width", "isInformation", "informationMessage", "isRequired", "onBlur", "onFocus", "isReadOnly", "height", "autoComplete", "showCountrySelect", "ref", "name", "minW", "maxW"]);
67
67
  var getCountryTelCode = (0, react_1.useCallback)(function (countryCode) {
68
68
  var _a;
69
69
  if (!countryCode)
@@ -73,9 +73,9 @@ var PhoneNumberInput = function (_a) {
73
73
  return countryCode === code;
74
74
  })) === null || _a === void 0 ? void 0 : _a.dial_code;
75
75
  }, [countries]);
76
- var _f = (0, react_1.useState)(value), number = _f[0], setNumber = _f[1];
77
- var _g = (0, react_1.useState)(country), selectedCountry = _g[0], setSelectedCountry = _g[1];
78
- var _h = (0, react_1.useState)(country), countryCode = _h[0], setCountryCode = _h[1];
76
+ var _g = (0, react_1.useState)(value), number = _g[0], setNumber = _g[1];
77
+ var _h = (0, react_1.useState)(country), selectedCountry = _h[0], setSelectedCountry = _h[1];
78
+ var _j = (0, react_1.useState)(country), countryCode = _j[0], setCountryCode = _j[1];
79
79
  (0, react_1.useEffect)(function () {
80
80
  if (country) {
81
81
  var code = getCountryTelCode(country);
@@ -95,14 +95,14 @@ var PhoneNumberInput = function (_a) {
95
95
  var code = getCountryTelCode(selected) || "";
96
96
  setSelectedCountry(selected);
97
97
  setCountryCode(code);
98
- onChange("".concat(code).concat(number));
98
+ onChange(codeValueReturn ? "".concat(code, " ").concat(number).trim() : "".concat(number));
99
99
  };
100
100
  var handleNumberChange = function (e) {
101
101
  if (countryCode) {
102
102
  var numValue = e.target.value;
103
103
  numValue = numValue.replace(/[^+\d\s]/g, "");
104
104
  setNumber(numValue);
105
- onChange("".concat(countryCode, " ").concat(numValue));
105
+ onChange(codeValueReturn ? "".concat(countryCode, " ").concat(numValue).trim() : "".concat(numValue));
106
106
  }
107
107
  else {
108
108
  return;
package/dist/Components/Input/PhoneNumberInputProps.d.ts CHANGED
@@ -10,6 +10,7 @@ export type PhoneNumberInputProps = {
10
10
  id?: string;
11
11
  size?: string;
12
12
  value?: string;
13
+ codeValueReturn?: boolean;
13
14
  country?: string;
14
15
  placeholder?: string;
15
16
  onChange: (value: string) => void;
package/dist/Components/NavigationBar/NavigationBar.js CHANGED
@@ -24,39 +24,34 @@ function NavBar(_a) {
24
24
  react_1.default.createElement(react_2.Box, { cursor: "pointer" }, moreIcon),
25
25
  react_1.default.createElement(react_2.MenuButton, { as: react_2.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0 },
26
26
  react_1.default.createElement(react_2.Avatar, { size: "sm", name: userName, src: userAvathar })),
27
- react_1.default.createElement(react_2.MenuList, { alignItems: "center", zIndex: 5 },
28
- react_1.default.createElement(react_2.Center, { py: 4 },
29
- react_1.default.createElement(react_2.Avatar, { size: "xl", name: userName, src: userAvathar })),
30
- react_1.default.createElement(react_2.Center, null,
31
- react_1.default.createElement(react_2.Text, { fontWeight: 500 }, userName)),
32
- react_1.default.createElement(react_2.MenuDivider, null), navMenu === null || navMenu === void 0 ? void 0 :
33
- navMenu.map(function (menu) { return (react_1.default.createElement(react_2.MenuItem, { onClick: function () { return handleNavOnClick(menu.url); }, key: menu.title, sx: {
34
- fontWeight: 500,
35
- gap: theme.space["2"],
36
- },
37
- // _hover={{
38
- // backgroundColor: theme.colors.primary["50"],
39
- // }}
40
- _focus: {
41
- backgroundColor: "transparent", // remove focus highlight
42
- // boxShadow: "none",
43
- },
44
- // _active={{
45
- // backgroundColor: "transparent", // remove click highlight
46
- // }}
47
- _hover: {
48
- backgroundColor: theme.colors.primary["50"],
49
- } },
50
- menu.icon && react_1.default.createElement(react_2.Box, null, menu === null || menu === void 0 ? void 0 : menu.icon),
51
- react_1.default.createElement(react_2.Box, null, menu.title))); }),
52
- react_1.default.createElement(react_2.MenuDivider, null),
53
- react_1.default.createElement(react_2.MenuItem, { onClick: handleLogout, sx: {
54
- fontWeight: 500,
55
- gap: theme.space["2"],
56
- }, _hover: {
57
- backgroundColor: theme.colors.primary["50"],
58
- } },
59
- react_1.default.createElement(react_2.Box, null, react_1.default.createElement(lucide_react_1.LogOut, { size: 16 })),
60
- react_1.default.createElement(react_2.Box, null, logoutText)))))))));
27
+ react_1.default.createElement(react_2.MenuList, { alignItems: "center", zIndex: 5, p: 0 },
28
+ react_1.default.createElement(react_2.Box, { display: "flex", flexDirection: "column", maxH: "90vh" },
29
+ react_1.default.createElement(react_2.Center, { py: 4 },
30
+ react_1.default.createElement(react_2.Avatar, { size: "xl", name: userName, src: userAvathar })),
31
+ react_1.default.createElement(react_2.Center, null,
32
+ react_1.default.createElement(react_2.Text, { fontWeight: 500 }, userName)),
33
+ react_1.default.createElement(react_2.MenuDivider, null),
34
+ react_1.default.createElement(react_2.Box, { flex: 1, overflowY: "auto" }, navMenu === null || navMenu === void 0 ? void 0 : navMenu.map(function (menu, idx) {
35
+ var _a, _b, _c;
36
+ return (react_1.default.createElement(react_2.MenuItem, { onClick: function () { return handleNavOnClick(menu.url); }, key: "".concat(String((_c = (_b = (_a = menu.id) !== null && _a !== void 0 ? _a : menu.url) !== null && _b !== void 0 ? _b : menu.title) !== null && _c !== void 0 ? _c : idx), "-").concat(idx), sx: {
37
+ fontWeight: 500,
38
+ gap: theme.space["2"],
39
+ }, _focus: {
40
+ backgroundColor: "transparent",
41
+ }, _hover: {
42
+ backgroundColor: theme.colors.primary["50"],
43
+ } },
44
+ menu.icon && react_1.default.createElement(react_2.Box, null, menu === null || menu === void 0 ? void 0 : menu.icon),
45
+ react_1.default.createElement(react_2.Box, null, menu.title)));
46
+ })),
47
+ react_1.default.createElement(react_2.MenuDivider, null),
48
+ react_1.default.createElement(react_2.MenuItem, { onClick: handleLogout, sx: {
49
+ fontWeight: 500,
50
+ gap: theme.space["2"],
51
+ }, _hover: {
52
+ backgroundColor: theme.colors.primary["50"],
53
+ } },
54
+ react_1.default.createElement(react_2.Box, null, react_1.default.createElement(lucide_react_1.LogOut, { size: 16 })),
55
+ react_1.default.createElement(react_2.Box, null, logoutText))))))))));
61
56
  }
62
57
  exports.default = NavBar;
package/dist/Components/ProductDetails/ProductImageSlider.js CHANGED
@@ -37,6 +37,7 @@ function ProductImageSlider(_a) {
37
37
  var theme = (0, useCustomTheme_1.useCustomTheme)();
38
38
  var isMobile = (0, react_1.useBreakpointValue)({ base: true, md: false });
39
39
  var totalThumbs = (images === null || images === void 0 ? void 0 : images.length) || 0;
40
+ var hasMultiple = totalThumbs > 1;
40
41
  var visibleThumbnails = images === null || images === void 0 ? void 0 : images.slice(thumbStartIndex, thumbStartIndex + thumbnailsToShow);
41
42
  var canScrollUp = thumbStartIndex > 0;
42
43
  var canScrollDown = thumbStartIndex + thumbnailsToShow < totalThumbs;
@@ -83,19 +84,20 @@ function ProductImageSlider(_a) {
83
84
  react_2.default.createElement(react_1.Box, { position: "absolute", top: "2", left: "2", zIndex: "1" },
84
85
  react_2.default.createElement(react_1.Badge, { colorScheme: batch === null || batch === void 0 ? void 0 : batch.color, variant: "solid" }, batch === null || batch === void 0 ? void 0 : batch.label)),
85
86
  react_2.default.createElement(react_1.Image, { src: (_b = images === null || images === void 0 ? void 0 : images[activeIndex].imageUrl) !== null && _b !== void 0 ? _b : "", w: "100%", h: "100%", objectFit: "cover", transformOrigin: transformOrigin, transform: !isMobile && isHovered ? "scale(1.6)" : "scale(1)", transition: "transform 0.3s ease" }),
86
- react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronLeft, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Previous", onClick: function () {
87
- var _a;
88
- var max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
89
- var newIndex = activeIndex === 0 ? max - 1 : activeIndex - 1;
90
- updateActiveIndex(newIndex);
91
- }, position: "absolute", left: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" }),
92
- react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronRight, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Next", onClick: function () {
93
- var _a;
94
- var max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
95
- var newIndex = activeIndex === max - 1 ? 0 : activeIndex + 1;
96
- updateActiveIndex(newIndex);
97
- }, position: "absolute", right: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" })),
98
- react_2.default.createElement(react_1.HStack, { spacing: 2, align: "center", justify: "center" },
87
+ hasMultiple && (react_2.default.createElement(react_2.default.Fragment, null,
88
+ react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronLeft, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Previous", onClick: function () {
89
+ var _a;
90
+ var max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
91
+ var newIndex = activeIndex === 0 ? max - 1 : activeIndex - 1;
92
+ updateActiveIndex(newIndex);
93
+ }, position: "absolute", left: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" }),
94
+ react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronRight, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Next", onClick: function () {
95
+ var _a;
96
+ var max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
97
+ var newIndex = activeIndex === max - 1 ? 0 : activeIndex + 1;
98
+ updateActiveIndex(newIndex);
99
+ }, position: "absolute", right: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" })))),
100
+ hasMultiple && (react_2.default.createElement(react_1.HStack, { spacing: 2, align: "center", justify: "center" },
99
101
  react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronLeft, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Left", onClick: function () { return handleThumbScroll("up"); }, isDisabled: !canScrollUp, variant: "ghost", size: "sm" }), visibleThumbnails === null || visibleThumbnails === void 0 ? void 0 :
100
102
  visibleThumbnails.map(function (src, index) {
101
103
  var actualIndex = thumbStartIndex + index;
@@ -104,8 +106,8 @@ function ProductImageSlider(_a) {
104
106
  : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: function () { return setActiveIndex(actualIndex); }, _hover: { opacity: 1 }, transition: "all 0.2s" },
105
107
  react_2.default.createElement(react_1.Image, { src: src.imageUrl, w: "100%", h: "100%", objectFit: "cover" })));
106
108
  }),
107
- react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronRight, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Right", onClick: function () { return handleThumbScroll("down"); }, isDisabled: !canScrollDown, variant: "ghost", size: "sm" })))) : (react_2.default.createElement(react_2.default.Fragment, null,
108
- react_2.default.createElement(react_1.Box, { w: "".concat(thumbHeight, "px"), h: "".concat(thumbHeight * thumbnailsToShow, "px"), display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "space-between", borderRadius: "md", overflow: "hidden" },
109
+ react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronRight, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Right", onClick: function () { return handleThumbScroll("down"); }, isDisabled: !canScrollDown, variant: "ghost", size: "sm" }))))) : (react_2.default.createElement(react_2.default.Fragment, null,
110
+ hasMultiple && (react_2.default.createElement(react_1.Box, { w: "".concat(thumbHeight, "px"), h: "".concat(thumbHeight * thumbnailsToShow, "px"), display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "space-between", borderRadius: "md", overflow: "hidden" },
109
111
  react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronUp, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Up", onClick: function () { return handleThumbScroll("up"); }, isDisabled: !canScrollUp, variant: "ghost", size: "sm", m: 1 }),
110
112
  react_2.default.createElement(react_1.VStack, { spacing: 2, flex: "1", overflow: "hidden" }, visibleThumbnails === null || visibleThumbnails === void 0 ? void 0 : visibleThumbnails.map(function (src, index) {
111
113
  var actualIndex = thumbStartIndex + index;
@@ -114,7 +116,7 @@ function ProductImageSlider(_a) {
114
116
  : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: function () { return setActiveIndex(actualIndex); }, _hover: { opacity: 1 }, transition: "all 0.2s" },
115
117
  react_2.default.createElement(react_1.Image, { src: src.imageUrl, w: "100%", h: "100%", objectFit: "cover", alt: "Thumb ".concat(actualIndex) })));
116
118
  })),
117
- react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronDown, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Down", onClick: function () { return handleThumbScroll("down"); }, isDisabled: !canScrollDown, variant: "ghost", size: "sm", m: 1 })),
119
+ react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronDown, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Down", onClick: function () { return handleThumbScroll("down"); }, isDisabled: !canScrollDown, variant: "ghost", size: "sm", m: 1 }))),
118
120
  react_2.default.createElement(react_1.Box, { w: "".concat(imageSize, "px"), h: "".concat(imageSize, "px"), position: "relative", overflow: "hidden", borderRadius: "md", boxShadow: "md", onMouseMove: function (e) {
119
121
  var bounds = e.currentTarget.getBoundingClientRect();
120
122
  var x = ((e.clientX - bounds.left) / bounds.width) * 100;
@@ -127,17 +129,18 @@ function ProductImageSlider(_a) {
127
129
  react_2.default.createElement(react_1.Box, { position: "absolute", top: "2", left: "2", zIndex: "1" },
128
130
  react_2.default.createElement(react_1.Badge, { colorScheme: batch === null || batch === void 0 ? void 0 : batch.color, variant: "solid" }, batch === null || batch === void 0 ? void 0 : batch.label)),
129
131
  react_2.default.createElement(react_1.Image, { src: (_c = images === null || images === void 0 ? void 0 : images[activeIndex].imageUrl) !== null && _c !== void 0 ? _c : "", w: "100%", h: "100%", objectFit: "cover", transformOrigin: transformOrigin, transform: isHovered ? "scale(1.6)" : "scale(1)", transition: "transform 0.3s ease", cursor: isHovered ? "zoom-in" : "default" }),
130
- react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronLeft, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Previous", onClick: function () {
131
- var _a;
132
- var max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
133
- var newIndex = activeIndex === 0 ? max - 1 : activeIndex - 1;
134
- updateActiveIndex(newIndex);
135
- }, position: "absolute", left: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" }),
136
- react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronRight, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Next", onClick: function () {
137
- var _a;
138
- var max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
139
- var newIndex = activeIndex === max - 1 ? 0 : activeIndex + 1;
140
- updateActiveIndex(newIndex);
141
- }, position: "absolute", right: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" }))))));
132
+ hasMultiple && (react_2.default.createElement(react_2.default.Fragment, null,
133
+ react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronLeft, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Previous", onClick: function () {
134
+ var _a;
135
+ var max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
136
+ var newIndex = activeIndex === 0 ? max - 1 : activeIndex - 1;
137
+ updateActiveIndex(newIndex);
138
+ }, position: "absolute", left: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" }),
139
+ react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronRight, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Next", onClick: function () {
140
+ var _a;
141
+ var max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
142
+ var newIndex = activeIndex === max - 1 ? 0 : activeIndex + 1;
143
+ updateActiveIndex(newIndex);
144
+ }, position: "absolute", right: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" }))))))));
142
145
  }
143
146
  exports.default = ProductImageSlider;
package/dist/Components/SideBar/SideBar.js CHANGED
@@ -40,7 +40,7 @@ function Sidebar(_a) {
40
40
  react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right" }, companyName)))))),
41
41
  react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[200] }),
42
42
  react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", h: "100vh", overflow: "auto", css: Sidebar_1.FlexCss, overflowX: "hidden" },
43
- react_1.default.createElement(react_2.Box, { width: "100%", flex: "1", overflowY: "auto", overflowX: "hidden", alignItems: toggle ? "center" : "flex-start", css: __assign(__assign({}, Sidebar_1.FlexCss), { transition: "all 0.3s ease" }) }, isLoading ? (Array.from({ length: loadingLines ? loadingLines : 15 }).map(function (_, i) { return (react_1.default.createElement(react_2.Box, { key: i, w: "100%", px: toggle ? 2 : 4, py: 3 }, toggle ? (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4, justifyContent: "center" },
43
+ react_1.default.createElement(react_2.Box, { id: "sidebar-scroll-container", width: "100%", flex: "1", overflowY: "auto", overflowX: "hidden", alignItems: toggle ? "center" : "flex-start", css: __assign(__assign({}, Sidebar_1.FlexCss), { transition: "all 0.3s ease" }) }, isLoading ? (Array.from({ length: loadingLines ? loadingLines : 15 }).map(function (_, i) { return (react_1.default.createElement(react_2.Box, { key: i, w: "100%", px: toggle ? 2 : 4, py: 3 }, toggle ? (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4, justifyContent: "center" },
44
44
  react_1.default.createElement(react_2.Skeleton, { w: "30px", h: "30px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }))) : (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 5 },
45
45
  react_1.default.createElement(react_2.Skeleton, { w: "20px", h: "20px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }),
46
46
  react_1.default.createElement(react_2.Skeleton, { h: "1rem", w: "85%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }))))); })) : (react_1.default.createElement(MenuItems_1.default, { activeMenu: activeMenu, menus: menus, handleMenuClick: handleMenuClick !== null && handleMenuClick !== void 0 ? handleMenuClick : (function () { }), toggle: toggle, selectedSubMenu: selectedSubMenu }))),
package/dist/Components/SideBar/components/MenuItemBox.d.ts CHANGED
@@ -6,6 +6,8 @@ interface Props {
6
6
  toggle: boolean;
7
7
  handleClick?: (menu: MenuProps) => void;
8
8
  selectedSubMenu?: string | null;
9
+ isOpen?: boolean;
10
+ onToggle?: (menu: MenuProps, clickY?: number) => void;
9
11
  }
10
12
  declare const MenuItemBox: React.FC<Props>;
11
13
  export default MenuItemBox;
package/dist/Components/SideBar/components/MenuItemBox.js CHANGED
@@ -10,55 +10,32 @@ var __assign = (this && this.__assign) || function () {
10
10
  };
11
11
  return __assign.apply(this, arguments);
12
12
  };
13
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
14
- if (k2 === undefined) k2 = k;
15
- var desc = Object.getOwnPropertyDescriptor(m, k);
16
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
17
- desc = { enumerable: true, get: function() { return m[k]; } };
18
- }
19
- Object.defineProperty(o, k2, desc);
20
- }) : (function(o, m, k, k2) {
21
- if (k2 === undefined) k2 = k;
22
- o[k2] = m[k];
23
- }));
24
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
25
- Object.defineProperty(o, "default", { enumerable: true, value: v });
26
- }) : function(o, v) {
27
- o["default"] = v;
28
- });
29
- var __importStar = (this && this.__importStar) || function (mod) {
30
- if (mod && mod.__esModule) return mod;
31
- var result = {};
32
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
33
- __setModuleDefault(result, mod);
34
- return result;
35
- };
36
13
  var __importDefault = (this && this.__importDefault) || function (mod) {
37
14
  return (mod && mod.__esModule) ? mod : { "default": mod };
38
15
  };
39
16
  Object.defineProperty(exports, "__esModule", { value: true });
40
- var react_1 = __importStar(require("react"));
17
+ var react_1 = __importDefault(require("react"));
41
18
  var react_2 = require("@chakra-ui/react");
42
19
  var MenuPopoverContent_1 = __importDefault(require("./MenuPopoverContent"));
43
20
  var lucide_react_1 = require("lucide-react");
44
21
  var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
45
22
  var TextTruncation_1 = __importDefault(require("./TextTruncation"));
46
23
  var MenuItemBox = function (_a) {
47
- var menu = _a.menu, activeMenu = _a.activeMenu, toggle = _a.toggle, handleClick = _a.handleClick;
24
+ var _b, _c, _d;
25
+ var menu = _a.menu, activeMenu = _a.activeMenu, toggle = _a.toggle, handleClick = _a.handleClick, isOpen = _a.isOpen, onToggle = _a.onToggle;
48
26
  var theme = (0, useCustomTheme_1.useCustomTheme)();
49
27
  var title = menu.title, icon = menu.icon, disabled = menu.disabled, locked = menu.locked, badge = menu.badge, subMenu = menu.subMenu;
50
28
  var hasSubMenu = !!(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length);
51
- var _b = (0, react_1.useState)(false), isOpen = _b[0], setIsOpen = _b[1];
52
29
  var isChildActive = subMenu === null || subMenu === void 0 ? void 0 : subMenu.some(function (sub) { return sub.id === activeMenu; });
53
30
  var isParentActive = activeMenu === menu.id;
54
31
  var isAnyActive = isParentActive || isChildActive;
55
- var handleToggleSubMenu = function () {
32
+ var handleToggleSubMenu = function (e) {
56
33
  if (!disabled && hasSubMenu) {
57
- setIsOpen(!isOpen);
34
+ onToggle === null || onToggle === void 0 ? void 0 : onToggle(menu, e === null || e === void 0 ? void 0 : e.clientY);
35
+ return;
58
36
  }
59
- else if (!disabled) {
37
+ if (!disabled)
60
38
  handleClick === null || handleClick === void 0 ? void 0 : handleClick(menu);
61
- }
62
39
  };
63
40
  var commonStyles = {
64
41
  w: "100%",
@@ -85,24 +62,29 @@ var MenuItemBox = function (_a) {
85
62
  locked && react_1.default.createElement(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem" }),
86
63
  hasSubMenu && (react_1.default.createElement(react_2.Icon, { as: isOpen ? lucide_react_1.ChevronDown : lucide_react_1.ChevronRight, fontSize: "1rem", onClick: function (e) {
87
64
  e.stopPropagation();
88
- handleToggleSubMenu();
65
+ handleToggleSubMenu(e);
89
66
  } }))))));
90
67
  if (toggle) {
91
68
  // Collapsed sidebar: show Popover
92
69
  return (react_1.default.createElement(react_2.Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true },
93
70
  react_1.default.createElement(react_2.PopoverTrigger, null,
94
- react_1.default.createElement(react_2.Box, __assign({}, commonStyles, { onClick: handleToggleSubMenu }), buttonContent)),
71
+ react_1.default.createElement(react_2.Box, __assign({}, commonStyles, { onClick: function (e) { return handleToggleSubMenu(e); }, "data-menu-id": String((_b = menu.id) !== null && _b !== void 0 ? _b : title) }), buttonContent)),
95
72
  react_1.default.createElement(react_2.Portal, null,
96
73
  react_1.default.createElement(react_2.PopoverContent, { borderRadius: "0.063rem", bg: theme.colors.primary[isAnyActive ? 500 : 700], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.313rem", cursor: disabled ? "not-allowed" : "pointer", zIndex: 1500 },
97
74
  react_1.default.createElement(react_2.PopoverBody, { p: "0.5rem", color: "white" },
98
75
  react_1.default.createElement(MenuPopoverContent_1.default, { menu: menu, handleMenuClick: handleClick, activeMenu: activeMenu }))))));
99
76
  }
100
77
  return (react_1.default.createElement(react_1.default.Fragment, null,
101
- react_1.default.createElement(react_2.Box, __assign({}, commonStyles, { onClick: handleToggleSubMenu }), buttonContent),
78
+ react_1.default.createElement(react_2.Box, __assign({}, commonStyles, { onClick: function (e) { return handleToggleSubMenu(e); }, "data-menu-id": String((_c = menu.id) !== null && _c !== void 0 ? _c : title) }), buttonContent),
102
79
  hasSubMenu && (react_1.default.createElement(react_2.Collapse, { in: isOpen, animateOpacity: true },
103
- react_1.default.createElement(react_2.Box, null, subMenu.map(function (sub) {
80
+ react_1.default.createElement(react_2.Box, { "data-collapse": "true", "data-menu-id": String((_d = menu.id) !== null && _d !== void 0 ? _d : title), "data-open": isOpen ? "true" : "false", sx: {
81
+ transition: "opacity 0.28s ease, transform 0.28s ease",
82
+ opacity: isOpen ? 1 : 0,
83
+ transform: isOpen ? "translateY(0)" : "translateY(-6px)",
84
+ } }, subMenu.map(function (sub, sIdx) {
85
+ var _a, _b;
104
86
  var isSubActive = activeMenu === sub.id;
105
- return (react_1.default.createElement(react_2.Box, { key: sub.id || sub.title, py: "0.5rem", px: "1.25rem", pl: "3.3rem", fontSize: "0.875rem", backgroundColor: isAnyActive ? theme.colors.primary[500] : "transparent", borderLeft: isSubActive
87
+ return (react_1.default.createElement(react_2.Box, { key: "".concat(String((_b = (_a = sub.id) !== null && _a !== void 0 ? _a : sub.title) !== null && _b !== void 0 ? _b : sIdx), "-").concat(sIdx), py: "0.5rem", px: "1.25rem", pl: "3.3rem", fontSize: "0.875rem", backgroundColor: isAnyActive ? theme.colors.primary[500] : "transparent", borderLeft: isSubActive
106
88
  ? "0.188rem solid ".concat(theme.colors.background[300])
107
89
  : "0.188rem solid transparent", _hover: {
108
90
  backgroundColor: theme.colors.primary[700],
package/dist/Components/SideBar/components/MenuItems.js CHANGED
@@ -1,13 +1,131 @@
1
1
  "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
2
25
  var __importDefault = (this && this.__importDefault) || function (mod) {
3
26
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
27
  };
5
28
  Object.defineProperty(exports, "__esModule", { value: true });
6
- var react_1 = __importDefault(require("react"));
29
+ var react_1 = __importStar(require("react"));
7
30
  var react_2 = require("@chakra-ui/react");
8
31
  var MenuItemBox_1 = __importDefault(require("./MenuItemBox"));
9
32
  var MenuItems = function (_a) {
10
33
  var menus = _a.menus, activeMenu = _a.activeMenu, handleMenuClick = _a.handleMenuClick, toggle = _a.toggle, selectedSubMenu = _a.selectedSubMenu;
11
- return (react_1.default.createElement(react_2.Box, null, menus.map(function (menu) { return (react_1.default.createElement(MenuItemBox_1.default, { key: menu.title, menu: menu, activeMenu: activeMenu, toggle: toggle, handleClick: handleMenuClick, selectedSubMenu: selectedSubMenu })); })));
34
+ var _b = (0, react_1.useState)(null), openMenuId = _b[0], setOpenMenuId = _b[1];
35
+ var _c = (0, react_1.useState)(null), lastClickY = _c[0], setLastClickY = _c[1];
36
+ (0, react_1.useEffect)(function () {
37
+ var parent = menus.find(function (m) { var _a; return (_a = m.subMenu) === null || _a === void 0 ? void 0 : _a.some(function (s) { return s.id === activeMenu; }); });
38
+ if (parent) {
39
+ setOpenMenuId(parent.id);
40
+ }
41
+ else if (menus.some(function (m) { return m.id === activeMenu; })) {
42
+ setOpenMenuId(activeMenu);
43
+ }
44
+ }, [activeMenu, menus]);
45
+ var handleToggle = function (menu, clickY) {
46
+ setOpenMenuId(function (prev) { return (prev === menu.id ? null : menu.id); });
47
+ if (typeof clickY === "number")
48
+ setLastClickY(clickY);
49
+ };
50
+ (0, react_1.useEffect)(function () {
51
+ if (openMenuId == null)
52
+ return;
53
+ var container = document.getElementById("sidebar-scroll-container");
54
+ if (!container)
55
+ return;
56
+ var collapse = container.querySelector("[data-collapse=\"true\"][data-menu-id=\"".concat(openMenuId, "\"][data-open=\"true\"]"));
57
+ var header = container.querySelector("[data-menu-id=\"".concat(openMenuId, "\"]"));
58
+ if (!collapse)
59
+ return;
60
+ var cRect = container.getBoundingClientRect();
61
+ var tRect = collapse.getBoundingClientRect();
62
+ var hRect = header === null || header === void 0 ? void 0 : header.getBoundingClientRect();
63
+ var topGap = 16;
64
+ var bottomGap = 16;
65
+ if (lastClickY != null) {
66
+ if (hRect) {
67
+ var toTop = container.scrollTop + (hRect.top - cRect.top) - topGap;
68
+ container.scrollTo({
69
+ top: Math.max(toTop, 0),
70
+ behavior: "smooth",
71
+ });
72
+ requestAnimationFrame(function () {
73
+ var ncRect = container.getBoundingClientRect();
74
+ var ntRect = collapse.getBoundingClientRect();
75
+ if (ntRect.bottom > ncRect.bottom - bottomGap) {
76
+ container.scrollTo({
77
+ top: container.scrollTop +
78
+ (ntRect.bottom - (ncRect.bottom - bottomGap)),
79
+ behavior: "smooth",
80
+ });
81
+ }
82
+ });
83
+ }
84
+ else {
85
+ var delta = tRect.bottom - lastClickY;
86
+ if (delta > 0) {
87
+ container.scrollTo({
88
+ top: container.scrollTop + delta + bottomGap,
89
+ behavior: "smooth",
90
+ });
91
+ }
92
+ }
93
+ }
94
+ else {
95
+ if (hRect) {
96
+ container.scrollTo({
97
+ top: container.scrollTop + (hRect.top - cRect.top) - topGap,
98
+ behavior: "smooth",
99
+ });
100
+ requestAnimationFrame(function () {
101
+ var ncRect = container.getBoundingClientRect();
102
+ var ntRect = collapse.getBoundingClientRect();
103
+ if (ntRect.bottom > ncRect.bottom - bottomGap) {
104
+ container.scrollTo({
105
+ top: container.scrollTop +
106
+ (ntRect.bottom - (ncRect.bottom - bottomGap)),
107
+ behavior: "smooth",
108
+ });
109
+ }
110
+ });
111
+ }
112
+ else if (tRect.bottom > cRect.bottom) {
113
+ container.scrollTo({
114
+ top: container.scrollTop + (tRect.bottom - cRect.bottom) + bottomGap,
115
+ behavior: "smooth",
116
+ });
117
+ }
118
+ else if (tRect.top < cRect.top) {
119
+ container.scrollTo({
120
+ top: container.scrollTop - (cRect.top - tRect.top) - topGap,
121
+ behavior: "smooth",
122
+ });
123
+ }
124
+ }
125
+ }, [openMenuId, lastClickY]);
126
+ return (react_1.default.createElement(react_2.Box, null, menus.map(function (menu, idx) {
127
+ var _a, _b, _c;
128
+ return (react_1.default.createElement(MenuItemBox_1.default, { key: "".concat(String((_c = (_b = (_a = menu.id) !== null && _a !== void 0 ? _a : menu.url) !== null && _b !== void 0 ? _b : menu.title) !== null && _c !== void 0 ? _c : idx), "-").concat(idx), menu: menu, activeMenu: activeMenu, toggle: toggle, handleClick: handleMenuClick, selectedSubMenu: selectedSubMenu, isOpen: openMenuId === menu.id, onToggle: handleToggle }));
129
+ })));
12
130
  };
13
131
  exports.default = MenuItems;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.2.97",
3
+ "version": "2.2.99",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",