pixelize-design-library 2.4.2-beta.23 → 2.4.2-beta.25
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/Components/FileUpload/FileUpload.js +2 -2
- package/dist/Components/FileUpload/FileUploadProps.d.ts +1 -0
- package/dist/Components/NumberInput/NumberInput.js +3 -1
- package/dist/Components/Search/Search.js +2 -2
- package/dist/Components/Select/Select.d.ts +1 -1
- package/dist/Components/Select/Select.js +4 -2
- package/dist/Components/Select/SelectProps.d.ts +3 -0
- package/dist/Components/SideBar/SideBar.js +1 -1
- package/dist/Components/Table/components/Pagination.js +1 -1
- package/dist/esm/Components/FileUpload/FileUpload.js +2 -2
- package/dist/esm/Components/NumberInput/NumberInput.js +4 -2
- package/dist/esm/Components/Search/Search.js +2 -2
- package/dist/esm/Components/Select/Select.js +5 -3
- package/dist/esm/Components/SideBar/SideBar.js +1 -1
- package/dist/esm/Components/Table/components/Pagination.js +1 -1
- package/package.json +3 -5
|
@@ -42,7 +42,7 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
|
42
42
|
const accentText_1 = require("../../Theme/tokens/builders/accentText");
|
|
43
43
|
const constants_1 = require("./constants");
|
|
44
44
|
const Modal_1 = __importStar(require("../Modal/Modal"));
|
|
45
|
-
const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes = [".jpg", ".png"], maxSizeKB = 5, maxFiles = undefined, progress = {}, size = "md", }) => {
|
|
45
|
+
const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes = [".jpg", ".png"], maxSizeKB = 5, maxFiles = undefined, progress = {}, size = "md", inputAriaLabel = "Upload files", }) => {
|
|
46
46
|
const compact = size === "sm";
|
|
47
47
|
const { colors, radii } = (0, useCustomTheme_1.useCustomTheme)();
|
|
48
48
|
const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
|
|
@@ -89,7 +89,7 @@ const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes
|
|
|
89
89
|
setErrors(messages);
|
|
90
90
|
},
|
|
91
91
|
});
|
|
92
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { ...getRootProps(), border: "2px dashed", borderColor: border, borderRadius: "md", p: compact ? 3 : 10, textAlign: "center", bg: bg, cursor: "pointer", transition: "all 0.2s", _hover: { bg: colors.gray[100] }, position: "relative", children: [(0, jsx_runtime_1.jsx)("input", { ...getInputProps() }), (0, jsx_runtime_1.jsxs)(react_2.Stack, { direction: compact ? "row" : "column", spacing: compact ? 3 : 2, align: "center", justify: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Upload, boxSize: compact ? 4 : 6 }), (0, jsx_runtime_1.jsxs)(react_2.Stack, { spacing: 0, align: compact ? "start" : "center", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "medium", fontSize: compact ? "sm" : "md", children: "Drag and drop files here" }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: compact ? "xs" : "sm", color: colors.textMuted, children: [acceptTypes.join(", "), " up to ", (0, constants_1.toMB)(maxSizeKB), " ", maxFiles ? `- ${maxFiles} file(s) max` : ""] })] })] })] }), errors.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: errors.map((err, idx) => ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.semanticText.error, children: err }, idx))) })), uploadedFiles.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4, children: "Uploaded Files" }) }), (0, jsx_runtime_1.jsx)(react_2.List, { spacing: 2, children: uploadedFiles.map((file, index) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: colors.background[50], children: [(0, jsx_runtime_1.jsxs)(react_2.ListItem, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 3, flex: "1", children: [file.type.startsWith("image/") ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { boxSize: "2.5rem", cursor: "pointer", position: "relative", _hover: {
|
|
92
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { ...getRootProps(), border: "2px dashed", borderColor: border, borderRadius: "md", p: compact ? 3 : 10, textAlign: "center", bg: bg, cursor: "pointer", transition: "all 0.2s", _hover: { bg: colors.gray[100] }, position: "relative", children: [(0, jsx_runtime_1.jsx)("input", { ...getInputProps({ "aria-label": inputAriaLabel }) }), (0, jsx_runtime_1.jsxs)(react_2.Stack, { direction: compact ? "row" : "column", spacing: compact ? 3 : 2, align: "center", justify: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Upload, boxSize: compact ? 4 : 6 }), (0, jsx_runtime_1.jsxs)(react_2.Stack, { spacing: 0, align: compact ? "start" : "center", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "medium", fontSize: compact ? "sm" : "md", color: colors.textMuted, children: "Drag and drop files here" }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: compact ? "xs" : "sm", color: colors.textMuted, children: [acceptTypes.join(", "), " up to ", (0, constants_1.toMB)(maxSizeKB), " ", maxFiles ? `- ${maxFiles} file(s) max` : ""] })] })] })] }), errors.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: errors.map((err, idx) => ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.semanticText.error, children: err }, idx))) })), uploadedFiles.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4, children: "Uploaded Files" }) }), (0, jsx_runtime_1.jsx)(react_2.List, { spacing: 2, children: uploadedFiles.map((file, index) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: colors.background[50], children: [(0, jsx_runtime_1.jsxs)(react_2.ListItem, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 3, flex: "1", children: [file.type.startsWith("image/") ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { boxSize: "2.5rem", cursor: "pointer", position: "relative", _hover: {
|
|
93
93
|
".hover-icon": {
|
|
94
94
|
opacity: 1,
|
|
95
95
|
bg: colors.secondary.opacity[16],
|
|
@@ -5,6 +5,8 @@ const react_1 = require("@chakra-ui/react");
|
|
|
5
5
|
const react_2 = require("react");
|
|
6
6
|
const FormLabel_1 = require("../Common/FormLabel");
|
|
7
7
|
const NumberInput = (0, react_2.forwardRef)(function NumberInput({ defaultValue, min, max, precision, step, clampValueOnBlur, keepWithinRange, value, onChange, onBlur, name, size, maxW, allowMouseWheel, NumberIncrementStepperBg, NumberIncrementStepperActive, NumberIncrementStepperChildren, NumberDecrementStepperBg, NumberDecrementStepperChildren, NumberDecrementStepperActive, label, isInformation, informationMessage, isRequired, id, width = "100%", minW, ...props }, ref) {
|
|
8
|
-
|
|
8
|
+
const generatedId = (0, react_2.useId)();
|
|
9
|
+
const resolvedId = id !== null && id !== void 0 ? id : generatedId;
|
|
10
|
+
return ((0, jsx_runtime_1.jsxs)(react_1.FormControl, { w: width, minW: minW, maxW: maxW, id: resolvedId, isRequired: isRequired, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: resolvedId, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), (0, jsx_runtime_1.jsxs)(react_1.NumberInput, { defaultValue: defaultValue, min: min, max: max, step: step, precision: precision, clampValueOnBlur: clampValueOnBlur, keepWithinRange: keepWithinRange, value: value, onChange: onChange, onBlur: onBlur, name: name, size: size, maxW: maxW, allowMouseWheel: allowMouseWheel, ...props, children: [(0, jsx_runtime_1.jsx)(react_1.NumberInputField, { ref: ref }), (0, jsx_runtime_1.jsxs)(react_1.NumberInputStepper, { children: [(0, jsx_runtime_1.jsx)(react_1.NumberIncrementStepper, { bg: NumberIncrementStepperBg, _active: NumberIncrementStepperActive, children: NumberIncrementStepperChildren }), (0, jsx_runtime_1.jsx)(react_1.NumberDecrementStepper, { bg: NumberDecrementStepperBg, _active: NumberDecrementStepperActive, children: NumberDecrementStepperChildren })] })] })] }));
|
|
9
11
|
});
|
|
10
12
|
exports.default = NumberInput;
|
|
@@ -30,6 +30,6 @@ function Search({ placeholder = "Search...", onSearch, onclose, shortcut = "Ctrl
|
|
|
30
30
|
window.removeEventListener("keydown", handleKeyDown);
|
|
31
31
|
};
|
|
32
32
|
}, [shortcut]);
|
|
33
|
-
return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { id: id, isInvalid: !!error, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Search, color: theme.colors.
|
|
34
|
-
, gap: "2", children: [query && ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.X, color: theme.colors.
|
|
33
|
+
return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { id: id, isInvalid: !!error, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Search, color: theme.colors.textMuted }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, type: "text", value: query, onChange: onSearch, placeholder: placeholder, variant: "outline", isInvalid: error }), (0, jsx_runtime_1.jsxs)(react_2.InputRightElement, { w: "auto", pr: "3", display: "flex", alignItems: "center" // ✅ centers vertically
|
|
34
|
+
, gap: "2", children: [query && ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.X, color: theme.colors.textMuted, boxSize: 5, cursor: "pointer", onClick: onclose })), shortcut && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.textMuted, px: "2", py: "0.5", borderRadius: "md", bg: theme.colors.backgroundColor.subtle, children: shortcut }))] })] }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
|
|
35
35
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { chakraSelectProps } from "./SelectProps";
|
|
2
|
-
export default function Select({ placeholder, size, variant, icon, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired, value, colorScheme, label, error, errorMessage, helperText, options, height, formControlStyle, isInformation, informationMessage, selectStyle, }: chakraSelectProps): import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export default function Select({ placeholder, size, variant, icon, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired, value, colorScheme, label, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, error, errorMessage, helperText, options, height, formControlStyle, isInformation, informationMessage, selectStyle, }: chakraSelectProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -11,9 +11,11 @@ const textInputIconSize_1 = require("../Input/textInputIconSize");
|
|
|
11
11
|
const FormLabel_1 = require("../Common/FormLabel");
|
|
12
12
|
const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
|
|
13
13
|
const HelperText_1 = __importDefault(require("../Common/HelperText"));
|
|
14
|
-
function Select({ placeholder = "Select Option", size = "md", variant = "outline", icon, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired = false, value = "", colorScheme, label, error, errorMessage, helperText, options = [], height, formControlStyle, isInformation = false, informationMessage, selectStyle, }) {
|
|
14
|
+
function Select({ placeholder = "Select Option", size = "md", variant = "outline", icon, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired = false, value = "", colorScheme, label, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, error, errorMessage, helperText, options = [], height, formControlStyle, isInformation = false, informationMessage, selectStyle, }) {
|
|
15
15
|
const sizeKey = typeof size === "string" ? size : "md";
|
|
16
16
|
const iconSizePx = (0, textInputIconSize_1.getTextInputIconSizePx)(sizeKey);
|
|
17
|
+
const generatedId = (0, react_1.useId)();
|
|
18
|
+
const selectId = id !== null && id !== void 0 ? id : (label ? generatedId : undefined);
|
|
17
19
|
const getOptionsList = (0, react_1.useCallback)(() => {
|
|
18
20
|
if (!options.length)
|
|
19
21
|
return (0, jsx_runtime_1.jsx)("option", { value: "", children: "No Options" });
|
|
@@ -26,5 +28,5 @@ function Select({ placeholder = "Select Option", size = "md", variant = "outline
|
|
|
26
28
|
onChange(selectedOption);
|
|
27
29
|
}
|
|
28
30
|
};
|
|
29
|
-
return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { isInvalid: error, style: formControlStyle, size: size, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsx)(react_2.Select, { placeholder: placeholder, size: size, variant: variant, icon: icon, iconSize: `${iconSizePx}px`, isInvalid: error, value: value, onChange: handleOnChange, onBlur: onBlur, onFocus: onFocus, isDisabled: isDisabled, isReadOnly: isReadOnly, colorScheme: colorScheme, errorBorderColor: errorBorderColor, style: selectStyle, ...(height != null && height !== "" ? { minH: height, h: height } : {}), children: getOptionsList() }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
|
|
31
|
+
return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { isInvalid: error, style: formControlStyle, size: size, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: selectId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsx)(react_2.Select, { id: selectId, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, placeholder: placeholder, size: size, variant: variant, icon: icon, iconSize: `${iconSizePx}px`, isInvalid: error, value: value, onChange: handleOnChange, onBlur: onBlur, onFocus: onFocus, isDisabled: isDisabled, isReadOnly: isReadOnly, colorScheme: colorScheme, errorBorderColor: errorBorderColor, style: selectStyle, ...(height != null && height !== "" ? { minH: height, h: height } : {}), children: getOptionsList() }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
|
|
30
32
|
}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { SelectProps } from "@chakra-ui/react";
|
|
2
2
|
export type chakraSelectProps = Pick<SelectProps, "placeholder" | "size" | "variant" | "icon" | "bg" | "borderColor" | "color" | "onBlur" | "onFocus" | "errorBorderColor" | "isDisabled" | "isReadOnly" | "isRequired" | "value" | "colorScheme"> & {
|
|
3
3
|
label?: string;
|
|
4
|
+
id?: string;
|
|
5
|
+
"aria-label"?: string;
|
|
6
|
+
"aria-labelledby"?: string;
|
|
4
7
|
error?: boolean;
|
|
5
8
|
errorMessage?: string;
|
|
6
9
|
helperText?: string;
|
|
@@ -81,7 +81,7 @@ const FooterControls = ({ toggle, overlay, mobileNav, onToggleCollapse, onToggle
|
|
|
81
81
|
return null;
|
|
82
82
|
return shell((0, jsx_runtime_1.jsx)(ControlCell, { onClick: onToggleMobileNav, label: "Show", accent: true, children: (0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeft, { size: 14, color: activeAccent.icon }) }));
|
|
83
83
|
}
|
|
84
|
-
return shell((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlCell, { onClick: onToggleCollapse, ariaLabel: toggle ? "Expand sidebar" : undefined, label: toggle ? undefined : "Collapse", children: toggle ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRightToLine, { size: 14, color: iconColor })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeftToLine, { size: 14, color: iconColor })) }), onToggleMobileNav && ((0, jsx_runtime_1.jsx)(ControlCell, { onClick: onToggleMobileNav, label: toggle ? undefined : "Hide", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 14, color: iconColor }) }))] }));
|
|
84
|
+
return shell((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlCell, { onClick: onToggleCollapse, ariaLabel: toggle ? "Expand sidebar" : undefined, label: toggle ? undefined : "Collapse", children: toggle ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRightToLine, { size: 14, color: iconColor })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeftToLine, { size: 14, color: iconColor })) }), onToggleMobileNav && ((0, jsx_runtime_1.jsx)(ControlCell, { onClick: onToggleMobileNav, ariaLabel: toggle ? "Show sidebar in overlay mode" : undefined, label: toggle ? undefined : "Hide", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 14, color: iconColor }) }))] }));
|
|
85
85
|
};
|
|
86
86
|
// --- Main Sidebar component ---
|
|
87
87
|
function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick, toggle, changeToggle, logo, companyName, companySubtitle, user, isDisableAddNew = false, onAddNewClick, selectedSubMenu, selectedSecondaryItem, isLoading, loadingLines, open = true, otherApps, mobileOpen = false, onMobileClose, mobileNav = false, onToggleMobileNav, peekOpen = false, onPeekEnd, }) {
|
|
@@ -52,6 +52,6 @@ const Pagination = react_1.default.memo(({ paginationText, handlePageSizeChange,
|
|
|
52
52
|
// const isRightDisabled = currentPage >= pages - 1;
|
|
53
53
|
const isLeftDisabled = dataLength === 0 || currentPage === 0;
|
|
54
54
|
const isRightDisabled = dataLength === 0 || currentPage >= pages - 1;
|
|
55
|
-
return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "flex-end", align: "center", flexWrap: "nowrap", children: [(!isServerPagination || paginationSelectOptions) && ((0, jsx_runtime_1.jsxs)(react_2.Select, { onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: "base", width: "auto", minW: "4.5rem", isDisabled: dataLength === 0, children: [!paginationSelectOptions && dataLength < 100 ? (0, jsx_runtime_1.jsx)("option", { value: 0 }) : null, computedOptions.map((size, index) => ((0, jsx_runtime_1.jsx)("option", { value: String(size), children: String(size) }, index)))] })), dataLength > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { w: "100%", children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "First", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "first-page", color: isLeftDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: () => setCurrentPage(0), _hover: !isLeftDisabled ? { color: theme.colors.accentText } : {}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsLeft, {}) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Previous", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "previous-page", color: isLeftDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: () => currentPage > 0 && setCurrentPage(currentPage - 1), _hover: !isLeftDisabled ? { color: theme.colors.accentText } : {}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, {}) }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { mt: 3, fontSize: 12, whiteSpace: "nowrap", color: theme.colors.text[500], children: paginationText }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Next", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "next-page", color: isRightDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: () => currentPage < pages - 1 && setCurrentPage(currentPage + 1), _hover: !isRightDisabled ? { color: theme.colors.accentText } : {}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, {}) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Last", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "last-page", color: isRightDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: () => setCurrentPage(pages - 1), _hover: !isRightDisabled ? { color: theme.colors.accentText } : {}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsRight, {}) }) })] }))] }));
|
|
55
|
+
return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "flex-end", align: "center", flexWrap: "nowrap", children: [(!isServerPagination || paginationSelectOptions) && ((0, jsx_runtime_1.jsxs)(react_2.Select, { "aria-label": "Rows per page", onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: "base", width: "auto", minW: "4.5rem", isDisabled: dataLength === 0, children: [!paginationSelectOptions && dataLength < 100 ? (0, jsx_runtime_1.jsx)("option", { value: 0 }) : null, computedOptions.map((size, index) => ((0, jsx_runtime_1.jsx)("option", { value: String(size), children: String(size) }, index)))] })), dataLength > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { w: "100%", children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "First", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "first-page", color: isLeftDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: () => setCurrentPage(0), _hover: !isLeftDisabled ? { color: theme.colors.accentText } : {}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsLeft, {}) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Previous", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "previous-page", color: isLeftDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: () => currentPage > 0 && setCurrentPage(currentPage - 1), _hover: !isLeftDisabled ? { color: theme.colors.accentText } : {}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, {}) }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { mt: 3, fontSize: 12, whiteSpace: "nowrap", color: theme.colors.text[500], children: paginationText }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Next", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "next-page", color: isRightDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: () => currentPage < pages - 1 && setCurrentPage(currentPage + 1), _hover: !isRightDisabled ? { color: theme.colors.accentText } : {}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, {}) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Last", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "last-page", color: isRightDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: () => setCurrentPage(pages - 1), _hover: !isRightDisabled ? { color: theme.colors.accentText } : {}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsRight, {}) }) })] }))] }));
|
|
56
56
|
});
|
|
57
57
|
exports.default = Pagination;
|
|
@@ -7,7 +7,7 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
|
|
|
7
7
|
import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
|
|
8
8
|
import { mimeMap, toMB } from "./constants.js";
|
|
9
9
|
import Modal, { ModalBody, ModalHeader } from "../Modal/Modal.js";
|
|
10
|
-
const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes = [".jpg", ".png"], maxSizeKB = 5, maxFiles = undefined, progress = {}, size = "md", }) => {
|
|
10
|
+
const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes = [".jpg", ".png"], maxSizeKB = 5, maxFiles = undefined, progress = {}, size = "md", inputAriaLabel = "Upload files", }) => {
|
|
11
11
|
const compact = size === "sm";
|
|
12
12
|
const { colors, radii } = useCustomTheme();
|
|
13
13
|
const { isOpen, onOpen, onClose } = useDisclosure();
|
|
@@ -54,7 +54,7 @@ const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes
|
|
|
54
54
|
setErrors(messages);
|
|
55
55
|
},
|
|
56
56
|
});
|
|
57
|
-
return (_jsxs(_Fragment, { children: [_jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsxs(Box, { ...getRootProps(), border: "2px dashed", borderColor: border, borderRadius: "md", p: compact ? 3 : 10, textAlign: "center", bg: bg, cursor: "pointer", transition: "all 0.2s", _hover: { bg: colors.gray[100] }, position: "relative", children: [_jsx("input", { ...getInputProps() }), _jsxs(Stack, { direction: compact ? "row" : "column", spacing: compact ? 3 : 2, align: "center", justify: "center", children: [_jsx(Icon, { as: Upload, boxSize: compact ? 4 : 6 }), _jsxs(Stack, { spacing: 0, align: compact ? "start" : "center", children: [_jsx(Text, { fontWeight: "medium", fontSize: compact ? "sm" : "md", children: "Drag and drop files here" }), _jsxs(Text, { fontSize: compact ? "xs" : "sm", color: colors.textMuted, children: [acceptTypes.join(", "), " up to ", toMB(maxSizeKB), " ", maxFiles ? `- ${maxFiles} file(s) max` : ""] })] })] })] }), errors.length > 0 && (_jsx(Box, { children: errors.map((err, idx) => (_jsx(Text, { fontSize: "sm", color: colors.semanticText.error, children: err }, idx))) })), uploadedFiles.length > 0 && (_jsxs(Box, { children: [_jsx(Box, { display: "flex", alignItems: "center", gap: 2, children: _jsx(Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4, children: "Uploaded Files" }) }), _jsx(List, { spacing: 2, children: uploadedFiles.map((file, index) => (_jsxs(Box, { borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: colors.background[50], children: [_jsxs(ListItem, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [_jsxs(HStack, { spacing: 3, flex: "1", children: [file.type.startsWith("image/") ? (_jsxs(Box, { boxSize: "2.5rem", cursor: "pointer", position: "relative", _hover: {
|
|
57
|
+
return (_jsxs(_Fragment, { children: [_jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsxs(Box, { ...getRootProps(), border: "2px dashed", borderColor: border, borderRadius: "md", p: compact ? 3 : 10, textAlign: "center", bg: bg, cursor: "pointer", transition: "all 0.2s", _hover: { bg: colors.gray[100] }, position: "relative", children: [_jsx("input", { ...getInputProps({ "aria-label": inputAriaLabel }) }), _jsxs(Stack, { direction: compact ? "row" : "column", spacing: compact ? 3 : 2, align: "center", justify: "center", children: [_jsx(Icon, { as: Upload, boxSize: compact ? 4 : 6 }), _jsxs(Stack, { spacing: 0, align: compact ? "start" : "center", children: [_jsx(Text, { fontWeight: "medium", fontSize: compact ? "sm" : "md", color: colors.textMuted, children: "Drag and drop files here" }), _jsxs(Text, { fontSize: compact ? "xs" : "sm", color: colors.textMuted, children: [acceptTypes.join(", "), " up to ", toMB(maxSizeKB), " ", maxFiles ? `- ${maxFiles} file(s) max` : ""] })] })] })] }), errors.length > 0 && (_jsx(Box, { children: errors.map((err, idx) => (_jsx(Text, { fontSize: "sm", color: colors.semanticText.error, children: err }, idx))) })), uploadedFiles.length > 0 && (_jsxs(Box, { children: [_jsx(Box, { display: "flex", alignItems: "center", gap: 2, children: _jsx(Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4, children: "Uploaded Files" }) }), _jsx(List, { spacing: 2, children: uploadedFiles.map((file, index) => (_jsxs(Box, { borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: colors.background[50], children: [_jsxs(ListItem, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [_jsxs(HStack, { spacing: 3, flex: "1", children: [file.type.startsWith("image/") ? (_jsxs(Box, { boxSize: "2.5rem", cursor: "pointer", position: "relative", _hover: {
|
|
58
58
|
".hover-icon": {
|
|
59
59
|
opacity: 1,
|
|
60
60
|
bg: colors.secondary.opacity[16],
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { NumberDecrementStepper, NumberIncrementStepper, NumberInput as ChakraNumberInput, NumberInputField, NumberInputStepper, FormControl, } from "@chakra-ui/react";
|
|
3
|
-
import { forwardRef } from "react";
|
|
3
|
+
import { forwardRef, useId } from "react";
|
|
4
4
|
import { TextLabel } from "../Common/FormLabel.js";
|
|
5
5
|
const NumberInput = forwardRef(function NumberInput({ defaultValue, min, max, precision, step, clampValueOnBlur, keepWithinRange, value, onChange, onBlur, name, size, maxW, allowMouseWheel, NumberIncrementStepperBg, NumberIncrementStepperActive, NumberIncrementStepperChildren, NumberDecrementStepperBg, NumberDecrementStepperChildren, NumberDecrementStepperActive, label, isInformation, informationMessage, isRequired, id, width = "100%", minW, ...props }, ref) {
|
|
6
|
-
|
|
6
|
+
const generatedId = useId();
|
|
7
|
+
const resolvedId = id !== null && id !== void 0 ? id : generatedId;
|
|
8
|
+
return (_jsxs(FormControl, { w: width, minW: minW, maxW: maxW, id: resolvedId, isRequired: isRequired, children: [label && (_jsx(TextLabel, { label: label, id: resolvedId, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), _jsxs(ChakraNumberInput, { defaultValue: defaultValue, min: min, max: max, step: step, precision: precision, clampValueOnBlur: clampValueOnBlur, keepWithinRange: keepWithinRange, value: value, onChange: onChange, onBlur: onBlur, name: name, size: size, maxW: maxW, allowMouseWheel: allowMouseWheel, ...props, children: [_jsx(NumberInputField, { ref: ref }), _jsxs(NumberInputStepper, { children: [_jsx(NumberIncrementStepper, { bg: NumberIncrementStepperBg, _active: NumberIncrementStepperActive, children: NumberIncrementStepperChildren }), _jsx(NumberDecrementStepper, { bg: NumberDecrementStepperBg, _active: NumberDecrementStepperActive, children: NumberDecrementStepperChildren })] })] })] }));
|
|
7
9
|
});
|
|
8
10
|
export default NumberInput;
|
|
@@ -24,6 +24,6 @@ export default function Search({ placeholder = "Search...", onSearch, onclose, s
|
|
|
24
24
|
window.removeEventListener("keydown", handleKeyDown);
|
|
25
25
|
};
|
|
26
26
|
}, [shortcut]);
|
|
27
|
-
return (_jsxs(FormControl, { id: id, isInvalid: !!error, children: [label && (_jsx(TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), _jsxs(InputGroup, { w: "100%", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Icon, { as: SearchIconComponent, color: theme.colors.
|
|
28
|
-
, gap: "2", children: [query && (_jsx(Icon, { as: X, color: theme.colors.
|
|
27
|
+
return (_jsxs(FormControl, { id: id, isInvalid: !!error, children: [label && (_jsx(TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), _jsxs(InputGroup, { w: "100%", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Icon, { as: SearchIconComponent, color: theme.colors.textMuted }) }), _jsx(Input, { ref: inputRef, type: "text", value: query, onChange: onSearch, placeholder: placeholder, variant: "outline", isInvalid: error }), _jsxs(InputRightElement, { w: "auto", pr: "3", display: "flex", alignItems: "center" // ✅ centers vertically
|
|
28
|
+
, gap: "2", children: [query && (_jsx(Icon, { as: X, color: theme.colors.textMuted, boxSize: 5, cursor: "pointer", onClick: onclose })), shortcut && (_jsx(Text, { fontSize: "sm", color: theme.colors.textMuted, px: "2", py: "0.5", borderRadius: "md", bg: theme.colors.backgroundColor.subtle, children: shortcut }))] })] }), error && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
|
|
29
29
|
}
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useCallback } from "react";
|
|
2
|
+
import { useCallback, useId } from "react";
|
|
3
3
|
import { Select as ChakraSelect, FormControl } from "@chakra-ui/react";
|
|
4
4
|
import { getTextInputIconSizePx } from "../Input/textInputIconSize.js";
|
|
5
5
|
import { TextLabel } from "../Common/FormLabel.js";
|
|
6
6
|
import ErrorMessage from "../Common/ErrorMessage.js";
|
|
7
7
|
import HelperText from "../Common/HelperText.js";
|
|
8
|
-
export default function Select({ placeholder = "Select Option", size = "md", variant = "outline", icon, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired = false, value = "", colorScheme, label, error, errorMessage, helperText, options = [], height, formControlStyle, isInformation = false, informationMessage, selectStyle, }) {
|
|
8
|
+
export default function Select({ placeholder = "Select Option", size = "md", variant = "outline", icon, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired = false, value = "", colorScheme, label, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, error, errorMessage, helperText, options = [], height, formControlStyle, isInformation = false, informationMessage, selectStyle, }) {
|
|
9
9
|
const sizeKey = typeof size === "string" ? size : "md";
|
|
10
10
|
const iconSizePx = getTextInputIconSizePx(sizeKey);
|
|
11
|
+
const generatedId = useId();
|
|
12
|
+
const selectId = id !== null && id !== void 0 ? id : (label ? generatedId : undefined);
|
|
11
13
|
const getOptionsList = useCallback(() => {
|
|
12
14
|
if (!options.length)
|
|
13
15
|
return _jsx("option", { value: "", children: "No Options" });
|
|
@@ -20,5 +22,5 @@ export default function Select({ placeholder = "Select Option", size = "md", var
|
|
|
20
22
|
onChange(selectedOption);
|
|
21
23
|
}
|
|
22
24
|
};
|
|
23
|
-
return (_jsxs(FormControl, { isInvalid: error, style: formControlStyle, size: size, children: [label && (_jsx(TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsx(ChakraSelect, { placeholder: placeholder, size: size, variant: variant, icon: icon, iconSize: `${iconSizePx}px`, isInvalid: error, value: value, onChange: handleOnChange, onBlur: onBlur, onFocus: onFocus, isDisabled: isDisabled, isReadOnly: isReadOnly, colorScheme: colorScheme, errorBorderColor: errorBorderColor, style: selectStyle, ...(height != null && height !== "" ? { minH: height, h: height } : {}), children: getOptionsList() }), error && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
|
|
25
|
+
return (_jsxs(FormControl, { isInvalid: error, style: formControlStyle, size: size, children: [label && (_jsx(TextLabel, { label: label, id: selectId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsx(ChakraSelect, { id: selectId, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, placeholder: placeholder, size: size, variant: variant, icon: icon, iconSize: `${iconSizePx}px`, isInvalid: error, value: value, onChange: handleOnChange, onBlur: onBlur, onFocus: onFocus, isDisabled: isDisabled, isReadOnly: isReadOnly, colorScheme: colorScheme, errorBorderColor: errorBorderColor, style: selectStyle, ...(height != null && height !== "" ? { minH: height, h: height } : {}), children: getOptionsList() }), error && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
|
|
24
26
|
}
|
|
@@ -75,7 +75,7 @@ const FooterControls = ({ toggle, overlay, mobileNav, onToggleCollapse, onToggle
|
|
|
75
75
|
return null;
|
|
76
76
|
return shell(_jsx(ControlCell, { onClick: onToggleMobileNav, label: "Show", accent: true, children: _jsx(PanelLeft, { size: 14, color: activeAccent.icon }) }));
|
|
77
77
|
}
|
|
78
|
-
return shell(_jsxs(_Fragment, { children: [_jsx(ControlCell, { onClick: onToggleCollapse, ariaLabel: toggle ? "Expand sidebar" : undefined, label: toggle ? undefined : "Collapse", children: toggle ? (_jsx(ArrowRightToLine, { size: 14, color: iconColor })) : (_jsx(ArrowLeftToLine, { size: 14, color: iconColor })) }), onToggleMobileNav && (_jsx(ControlCell, { onClick: onToggleMobileNav, label: toggle ? undefined : "Hide", children: _jsx(Maximize2, { size: 14, color: iconColor }) }))] }));
|
|
78
|
+
return shell(_jsxs(_Fragment, { children: [_jsx(ControlCell, { onClick: onToggleCollapse, ariaLabel: toggle ? "Expand sidebar" : undefined, label: toggle ? undefined : "Collapse", children: toggle ? (_jsx(ArrowRightToLine, { size: 14, color: iconColor })) : (_jsx(ArrowLeftToLine, { size: 14, color: iconColor })) }), onToggleMobileNav && (_jsx(ControlCell, { onClick: onToggleMobileNav, ariaLabel: toggle ? "Show sidebar in overlay mode" : undefined, label: toggle ? undefined : "Hide", children: _jsx(Maximize2, { size: 14, color: iconColor }) }))] }));
|
|
79
79
|
};
|
|
80
80
|
// --- Main Sidebar component ---
|
|
81
81
|
export default function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick, toggle, changeToggle, logo, companyName, companySubtitle, user, isDisableAddNew = false, onAddNewClick, selectedSubMenu, selectedSecondaryItem, isLoading, loadingLines, open = true, otherApps, mobileOpen = false, onMobileClose, mobileNav = false, onToggleMobileNav, peekOpen = false, onPeekEnd, }) {
|
|
@@ -14,6 +14,6 @@ const Pagination = React.memo(({ paginationText, handlePageSizeChange, rowsPerPa
|
|
|
14
14
|
// const isRightDisabled = currentPage >= pages - 1;
|
|
15
15
|
const isLeftDisabled = dataLength === 0 || currentPage === 0;
|
|
16
16
|
const isRightDisabled = dataLength === 0 || currentPage >= pages - 1;
|
|
17
|
-
return (_jsxs(Flex, { justify: "flex-end", align: "center", flexWrap: "nowrap", children: [(!isServerPagination || paginationSelectOptions) && (_jsxs(Select, { onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: "base", width: "auto", minW: "4.5rem", isDisabled: dataLength === 0, children: [!paginationSelectOptions && dataLength < 100 ? _jsx("option", { value: 0 }) : null, computedOptions.map((size, index) => (_jsx("option", { value: String(size), children: String(size) }, index)))] })), dataLength > 0 && (_jsxs(Flex, { w: "100%", children: [_jsx(ToolTip, { label: "First", placement: "top", children: _jsx(IconButton, { "aria-label": "first-page", color: isLeftDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: () => setCurrentPage(0), _hover: !isLeftDisabled ? { color: theme.colors.accentText } : {}, children: _jsx(ChevronsLeft, {}) }) }), _jsx(ToolTip, { label: "Previous", placement: "top", children: _jsx(IconButton, { "aria-label": "previous-page", color: isLeftDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: () => currentPage > 0 && setCurrentPage(currentPage - 1), _hover: !isLeftDisabled ? { color: theme.colors.accentText } : {}, children: _jsx(ChevronLeft, {}) }) }), _jsx(Text, { mt: 3, fontSize: 12, whiteSpace: "nowrap", color: theme.colors.text[500], children: paginationText }), _jsx(ToolTip, { label: "Next", placement: "top", children: _jsx(IconButton, { "aria-label": "next-page", color: isRightDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: () => currentPage < pages - 1 && setCurrentPage(currentPage + 1), _hover: !isRightDisabled ? { color: theme.colors.accentText } : {}, children: _jsx(ChevronRight, {}) }) }), _jsx(ToolTip, { label: "Last", placement: "top", children: _jsx(IconButton, { "aria-label": "last-page", color: isRightDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: () => setCurrentPage(pages - 1), _hover: !isRightDisabled ? { color: theme.colors.accentText } : {}, children: _jsx(ChevronsRight, {}) }) })] }))] }));
|
|
17
|
+
return (_jsxs(Flex, { justify: "flex-end", align: "center", flexWrap: "nowrap", children: [(!isServerPagination || paginationSelectOptions) && (_jsxs(Select, { "aria-label": "Rows per page", onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: "base", width: "auto", minW: "4.5rem", isDisabled: dataLength === 0, children: [!paginationSelectOptions && dataLength < 100 ? _jsx("option", { value: 0 }) : null, computedOptions.map((size, index) => (_jsx("option", { value: String(size), children: String(size) }, index)))] })), dataLength > 0 && (_jsxs(Flex, { w: "100%", children: [_jsx(ToolTip, { label: "First", placement: "top", children: _jsx(IconButton, { "aria-label": "first-page", color: isLeftDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: () => setCurrentPage(0), _hover: !isLeftDisabled ? { color: theme.colors.accentText } : {}, children: _jsx(ChevronsLeft, {}) }) }), _jsx(ToolTip, { label: "Previous", placement: "top", children: _jsx(IconButton, { "aria-label": "previous-page", color: isLeftDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: () => currentPage > 0 && setCurrentPage(currentPage - 1), _hover: !isLeftDisabled ? { color: theme.colors.accentText } : {}, children: _jsx(ChevronLeft, {}) }) }), _jsx(Text, { mt: 3, fontSize: 12, whiteSpace: "nowrap", color: theme.colors.text[500], children: paginationText }), _jsx(ToolTip, { label: "Next", placement: "top", children: _jsx(IconButton, { "aria-label": "next-page", color: isRightDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: () => currentPage < pages - 1 && setCurrentPage(currentPage + 1), _hover: !isRightDisabled ? { color: theme.colors.accentText } : {}, children: _jsx(ChevronRight, {}) }) }), _jsx(ToolTip, { label: "Last", placement: "top", children: _jsx(IconButton, { "aria-label": "last-page", color: isRightDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: () => setCurrentPage(pages - 1), _hover: !isRightDisabled ? { color: theme.colors.accentText } : {}, children: _jsx(ChevronsRight, {}) }) })] }))] }));
|
|
18
18
|
});
|
|
19
19
|
export default Pagination;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pixelize-design-library",
|
|
3
|
-
"version": "2.4.2-beta.
|
|
3
|
+
"version": "2.4.2-beta.25",
|
|
4
4
|
"description": "React component library for Pixelize apps: themeable Chakra-based components, design tokens and light/dark brand theming.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -31,13 +31,9 @@
|
|
|
31
31
|
"README.md"
|
|
32
32
|
],
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@chakra-ui/react": "^2.8.2",
|
|
35
|
-
"@emotion/react": "^11.11.4",
|
|
36
|
-
"@emotion/styled": "^11.11.5",
|
|
37
34
|
"@fontsource-variable/inter": "^5.2.8",
|
|
38
35
|
"@hello-pangea/dnd": "^18.0.1",
|
|
39
36
|
"date-fns": "^3.6.0",
|
|
40
|
-
"framer-motion": "^10.18.0",
|
|
41
37
|
"jodit-react": "^5.2.38",
|
|
42
38
|
"lucide-react": "^0.487.0",
|
|
43
39
|
"react-apexcharts": "^1.4.1",
|
|
@@ -164,6 +160,8 @@
|
|
|
164
160
|
"webpack": "^5.91.0"
|
|
165
161
|
},
|
|
166
162
|
"peerDependencies": {
|
|
163
|
+
"@chakra-ui/react": "^2.8.2",
|
|
164
|
+
"framer-motion": "^10.18.0",
|
|
167
165
|
"react": "^18.3.1",
|
|
168
166
|
"react-dom": "^18.3.1"
|
|
169
167
|
},
|