pixelize-design-library 2.2.98 → 2.2.100

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 +13 -10
  5. package/dist/Components/ProductCard/ProductPrice.js +24 -17
  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
@@ -31,16 +31,19 @@ function NavBar(_a) {
31
31
  react_1.default.createElement(react_2.Center, null,
32
32
  react_1.default.createElement(react_2.Text, { fontWeight: 500 }, userName)),
33
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) { return (react_1.default.createElement(react_2.MenuItem, { onClick: function () { return handleNavOnClick(menu.url); }, key: menu.title, sx: {
35
- fontWeight: 500,
36
- gap: theme.space["2"],
37
- }, _focus: {
38
- backgroundColor: "transparent",
39
- }, _hover: {
40
- backgroundColor: theme.colors.primary["50"],
41
- } },
42
- menu.icon && react_1.default.createElement(react_2.Box, null, menu === null || menu === void 0 ? void 0 : menu.icon),
43
- react_1.default.createElement(react_2.Box, null, menu.title))); })),
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
+ })),
44
47
  react_1.default.createElement(react_2.MenuDivider, null),
45
48
  react_1.default.createElement(react_2.MenuItem, { onClick: handleLogout, sx: {
46
49
  fontWeight: 500,
package/dist/Components/ProductCard/ProductPrice.js CHANGED
@@ -22,9 +22,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
22
22
  __setModuleDefault(result, mod);
23
23
  return result;
24
24
  };
25
+ var __importDefault = (this && this.__importDefault) || function (mod) {
26
+ return (mod && mod.__esModule) ? mod : { "default": mod };
27
+ };
25
28
  Object.defineProperty(exports, "__esModule", { value: true });
26
29
  var react_1 = __importStar(require("react"));
27
30
  var react_2 = require("@chakra-ui/react");
31
+ var OverflowTooltipText_1 = __importDefault(require("../SideBar/components/OverflowTooltipText"));
28
32
  var sizeConfig = {
29
33
  xs: {
30
34
  font: "xs",
@@ -76,6 +80,7 @@ var ProductPrice = function (_a) {
76
80
  var buttonRef = (0, react_1.useRef)(null);
77
81
  var dropdownRef = (0, react_1.useRef)(null);
78
82
  var isSingleOption = options.length === 1;
83
+ var isMobile = (0, react_2.useBreakpointValue)({ base: true, md: false });
79
84
  (0, react_2.useOutsideClick)({
80
85
  ref: dropdownRef,
81
86
  handler: function () { return setIsOpen(false); },
@@ -88,8 +93,8 @@ var ProductPrice = function (_a) {
88
93
  if (buttonRef.current) {
89
94
  var rect = buttonRef.current.getBoundingClientRect();
90
95
  setDropdownPosition({
91
- top: rect.bottom + window.scrollY,
92
- left: rect.left + window.scrollX,
96
+ top: rect.bottom + 4,
97
+ left: rect.left,
93
98
  width: rect.width
94
99
  });
95
100
  }
@@ -110,31 +115,33 @@ var ProductPrice = function (_a) {
110
115
  return (react_1.default.createElement(react_1.default.Fragment, null,
111
116
  isSingleOption ? (react_1.default.createElement(react_2.Box, { border: "0.063rem solid", borderColor: "red.300", bg: "#fff5f5", px: cfg.px, py: cfg.py, rounded: "md", display: "inline-block", w: "100%" },
112
117
  react_1.default.createElement(react_2.Text, { fontSize: cfg.label, fontWeight: "medium" }, options[0].label))) : (react_1.default.createElement(react_2.Box, { ref: buttonRef, onClick: function () { return setIsOpen(!isOpen); }, border: "0.063rem solid", borderColor: "red.300", bg: "#fff5f5", px: cfg.px, py: cfg.py, rounded: "md", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", w: "100%" },
113
- react_1.default.createElement(react_2.Text, { fontSize: cfg.label, fontWeight: "medium" }, selected.label),
118
+ react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
119
+ react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top", maxWidth: "70%" },
120
+ react_1.default.createElement(react_2.Text, { fontSize: cfg.label, fontWeight: "medium", whiteSpace: "nowrap" }, selected.label))),
114
121
  react_1.default.createElement(react_2.Text, { fontSize: cfg.font, color: "red.400", transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: "transform 0.2s" }, "\u25BE"))),
115
122
  !isSingleOption && isOpen && (react_1.default.createElement(react_2.Portal, null,
116
- react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "absolute", top: "".concat(dropdownPosition.top, "px"), left: "".concat(dropdownPosition.left, "px"), width: "".concat(dropdownPosition.width, "px"), bg: "white", border: "0.063rem solid", borderColor: "red.300", shadow: "md", zIndex: 9999 }, options.map(function (option) {
123
+ react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "fixed", top: "".concat(dropdownPosition.top, "px"), left: "".concat(dropdownPosition.left, "px"), width: "".concat(dropdownPosition.width, "px"), bg: "white", border: "0.063rem solid", borderColor: "red.300", borderRadius: "md", overflow: "hidden", maxH: "14rem", overflowY: "auto", shadow: "md", zIndex: 100000 }, options.map(function (option) {
117
124
  var discounted = getDiscountedPrice(option);
118
125
  var isSelected = selected.var_id === option.var_id;
119
- return (react_1.default.createElement(react_2.Box, { key: option.var_id, px: cfg.px, h: cfg.rowHeight, cursor: "pointer", bg: isSelected ? 'red.50' : 'white', _hover: { bg: 'red.100' }, onClick: function () {
126
+ return (react_1.default.createElement(react_2.Grid, { key: option.var_id, px: 3, py: 1, cursor: "pointer", bg: isSelected ? 'red.50' : 'white', borderLeft: isSelected ? '0.25rem solid' : '0.25rem solid transparent', borderLeftColor: isSelected ? 'red.300' : 'transparent', _hover: { bg: 'red.100' }, onClick: function () {
120
127
  setSelected(option);
121
128
  setIsOpen(false);
122
- }, display: "flex", alignItems: "center", justifyContent: "space-between" },
123
- react_1.default.createElement(react_2.Box, null,
124
- react_1.default.createElement(react_2.Text, { fontSize: cfg.label, fontWeight: "medium" }, option.label),
125
- option.offer > 0 && (react_1.default.createElement(react_2.Text, { fontSize: cfg.font, color: "green.600", fontWeight: "semibold" },
126
- option.offer,
127
- "% OFF"))),
128
- react_1.default.createElement(react_2.Box, { textAlign: "right" },
129
- react_1.default.createElement(react_2.Text, { fontSize: cfg.price, fontWeight: "semibold", color: "red.500" },
129
+ }, templateColumns: { base: '1fr auto', md: '1fr auto' }, columnGap: { base: 2, md: 3 }, rowGap: { base: 1.5, md: 2 }, alignItems: "center" },
130
+ react_1.default.createElement(react_2.HStack, { gridColumn: 1, gridRow: 1, spacing: 2, align: "center", minW: 0 },
131
+ react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
132
+ react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top", maxWidth: "100%" },
133
+ react_1.default.createElement(react_2.Text, { fontSize: { base: "xs", md: "sm" }, fontWeight: "medium", whiteSpace: "nowrap" }, option.label))),
134
+ option.offer > 0 && (react_1.default.createElement(react_2.Badge, { bg: "green.100", color: "green.700", borderRadius: "md", px: { base: 1, md: 2 }, py: { base: 0, md: 0.5 }, fontWeight: "bold", fontSize: { base: "2xs", md: "xs" }, flexShrink: 0 }, isMobile ? "".concat(option.offer, "%") : "".concat(option.offer, "% OFF")))),
135
+ react_1.default.createElement(react_2.Box, { gridColumn: { base: 1, md: 2 }, gridRow: { base: 2, md: 'auto' }, mt: { base: 1, md: 0 }, textAlign: { base: 'left', md: 'right' } },
136
+ react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "bold", color: "red.500", whiteSpace: "nowrap" },
130
137
  "\u20B9",
131
138
  discounted),
132
- option.offer > 0 && (react_1.default.createElement(react_2.Text, { fontSize: cfg.font, color: "gray.400", textDecoration: "line-through" },
139
+ option.offer > 0 && (react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "gray.500", textDecoration: "line-through", whiteSpace: "nowrap" },
133
140
  "\u20B9",
134
141
  option.price))),
135
- react_1.default.createElement(react_2.Box, { ml: 4, w: cfg.iconSize, h: cfg.iconSize, minW: cfg.iconSize, borderRadius: "full", border: "0.125rem solid", borderColor: isSelected ? 'red.400' : 'gray.300', display: "flex", alignItems: "center", justifyContent: "center" }, isSelected && (react_1.default.createElement(react_2.Box, { w: cfg.dotSize, h: cfg.dotSize, bg: "red.400", borderRadius: "full" })))));
142
+ react_1.default.createElement(react_2.Box, { gridColumn: 2, gridRow: { base: 1, md: 'auto' }, ml: { base: 0.5, md: 1 }, w: { base: "0.75rem", md: "0.875rem" }, h: { base: "0.75rem", md: "0.875rem" }, minW: { base: "0.75rem", md: "0.875rem" }, borderRadius: "full", border: "0.125rem solid", borderColor: isSelected ? 'red.500' : 'gray.600', bg: "white", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: { base: "0 0 0 1px rgba(0,0,0,0.08)", md: "none" } }, isSelected && (react_1.default.createElement(react_2.Box, { w: { base: "0.3125rem", md: "0.375rem" }, h: { base: "0.3125rem", md: "0.375rem" }, bg: "red.500", borderRadius: "full" })))));
136
143
  })))),
137
- react_1.default.createElement(react_2.Flex, { mt: 2, align: "center", justify: rightSlot ? "space-between" : "flex-start", w: "full", gap: 3 },
144
+ react_1.default.createElement(react_2.Flex, { mt: 2, w: "full", gap: 3, direction: { base: "column", md: "row" }, align: { base: "flex-start", md: "center" }, justify: { base: "flex-start", md: rightSlot ? "space-between" : "flex-start" } },
138
145
  react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", fontSize: cfg.price, gap: 2, minW: 0 },
139
146
  selected.offer > 0 && (react_1.default.createElement(react_2.Text, { color: "gray.400", textDecoration: "line-through" },
140
147
  "\u20B9",
@@ -142,6 +149,6 @@ var ProductPrice = function (_a) {
142
149
  react_1.default.createElement(react_2.Text, { color: "red.500", fontWeight: "semibold" },
143
150
  "\u20B9",
144
151
  getDiscountedPrice(selected))),
145
- rightSlot && react_1.default.createElement(react_2.Box, { flexShrink: 0 }, rightSlot))));
152
+ rightSlot && (react_1.default.createElement(react_2.Box, { flexShrink: 0, mt: { base: 2, md: 0 } }, rightSlot)))));
146
153
  };
147
154
  exports.default = ProductPrice;
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.98",
3
+ "version": "2.2.100",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",