digitinary-ui 1.0.6 → 1.0.8

package/dist/types/interfaces.d.ts

@@ -97,6 +97,9 @@ export interface PaginationProps extends BaseProps {
         to: string;
     };
 }
+export interface TablePaginationProps extends PaginationProps {
+    show: boolean;
+}
 export interface TableProps extends BaseProps {
     headCells: HeadCellProps[];
     data: Record<string, any>[];
@@ -110,6 +113,7 @@ export interface TableProps extends BaseProps {
     selectableRow?: boolean;
     selectedRowId?: string;
     rowDataId?: string;
+    paginationOptions?: TablePaginationProps;
 }
 export interface SwitchProps {
     checked: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "digitinary-ui",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "Digitinary UI Library",
   "author": "Digitinary Company",
   "repository": {

package/dist/components/Accordion/Accordion.js

@@ -1,28 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import style from './accordion.module.scss';
-import SelectFieldDownArrow from '../../icons/SelectFieldDownArrow';
-const Accordion = ({ defaultExpanded = false, expanded, disabled = false, onChange, summary, children, className, }) => {
-    const [isExpanded, setIsExpanded] = useState(defaultExpanded);
-    const isControlled = expanded !== undefined;
-    const toggleAccordion = () => {
-        if (disabled)
-            return;
-        if (isControlled && onChange) {
-            onChange();
-        }
-        else {
-            setIsExpanded(!isExpanded);
-        }
-    };
-    const handleKeyDown = (event) => {
-        if (disabled)
-            return;
-        if (event.key === 'Enter' || event.key === ' ') {
-            toggleAccordion();
-        }
-    };
-    const shouldExpand = isControlled ? expanded && !disabled : isExpanded && !disabled;
-    return (_jsxs("div", { className: `${style.accordion} ${shouldExpand ? style.expanded : ''} ${disabled ? style.disabled : ''} ${className}`, children: [_jsxs("div", { className: style.summary, onClick: toggleAccordion, onKeyDown: handleKeyDown, "aria-expanded": shouldExpand, role: "button", tabIndex: 0, children: [summary, _jsx("div", { className: style.iconContainer, children: _jsx(SelectFieldDownArrow, { "data-id": "ACCORDION_DROPDOWN_ARROW_ICON", className: `${style.dropdownIcon} ${shouldExpand ? style.rotateFlip : ''} ${disabled ? style.disabled : ''}`, width: "1.5rem", height: "1.5rem" }) })] }), _jsx("div", { className: `${style.details} ${shouldExpand ? style.show : ''}`, children: children })] }));
-};
-export default Accordion;

package/dist/components/Accordion/index.js

@@ -1 +0,0 @@
-export { default } from './Accordion';

package/dist/components/Alert/Alert.js

@@ -1,58 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef } from 'react';
-import style from './alert.module.scss';
-import ErrorAlert from '../../icons/AlertErrorIcon';
-import WarningAlert from '../../icons/AlertWarningIcon';
-import InfoAlert from '../../icons/AlertInfoIcon';
-import NaturalAlert from '../../icons/InfoIcon';
-import SuccessAlert from '../../icons/AlertSuccessIcon';
-import CloseIcon from '../../icons/CloseIcon';
-const severityMap = {
-    info: InfoAlert,
-    success: SuccessAlert,
-    error: ErrorAlert,
-    warning: WarningAlert,
-    natural: NaturalAlert,
-};
-const Alert = ({ severity = 'info', color = severity, variant = 'default', onClose, action, className, icon = true, // Default to true, showing the icon based on severity
-customStyle, children, }) => {
-    const IconComponent = severityMap[severity];
-    const [visible, setVisible] = useState(true);
-    const [exitTransition, setExitTransition] = useState(false);
-    const actionBtnRef = useRef(null);
-    const alertContentRef = useRef(null);
-    const handleClose = () => {
-        setExitTransition(true);
-        if (typeof onClose === 'function')
-            onClose();
-        setTimeout(() => {
-            setVisible(false);
-        }, 500);
-    };
-    useEffect(() => {
-        let offsetWidth = 0;
-        if (actionBtnRef.current) {
-            const actionBtnWidth = actionBtnRef.current.offsetWidth / 16;
-            offsetWidth += actionBtnWidth;
-        }
-        if (onClose) {
-            offsetWidth += 1.5;
-        }
-        if (actionBtnRef.current || onClose) {
-            offsetWidth += 1;
-        }
-        if (alertContentRef.current) {
-            alertContentRef.current.style.marginRight = `${offsetWidth}rem`;
-        }
-    }, []);
-    if (!visible)
-        return null;
-    return (_jsxs("div", { className: `${className} ${style.alertContainer} ${style[color]} ${style[variant]} ${exitTransition ? style.exit : ''}`, style: customStyle, role: "alert", "data-id": `ALERT${severity ? `_${severity?.toUpperCase()}_ID` : ''}`, children: [icon === true ? (
-            // Default icon based on severity
-            _jsx(IconComponent, { className: `${style.alertIcon} ${style[color]} ${style[variant]}`, width: "1.25rem", height: "1.25rem", "data-id": "ALERT-ICON" })) : icon ? ( // Render custom icon if icon is JSX.Element
-            icon) : null, _jsx("div", { className: style.alertContent, ref: alertContentRef, children: children }), _jsxs("div", { className: style.actionContainer, children: [action && (_jsx("div", { className: style.actionButton, ref: actionBtnRef, children: action })), onClose && (_jsx(CloseIcon, { className: style.closeIcon, width: "1.25rem", height: "1.25rem", "data-id": "CLOSE-ICON", tabIndex: 0, onKeyDown: (e) => {
-                            if (e.key === 'Enter' || e.key === ' ')
-                                handleClose();
-                        }, onClick: handleClose, "aria-label": "Close alert" }))] })] }));
-};
-export default Alert;

package/dist/components/Alert/index.js

@@ -1 +0,0 @@
-export { default } from './Alert';

package/dist/components/Button/Button.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styles from './button.module.scss';
-import LoaderIcon from '../../icons/LoaderIcon';
-import { Size } from '../../types';
-const Button = ({ children, className = '', variant = 'contained', color = 'primary', size = Size.Medium, type = 'button', disabled, loading, startIcon, endIcon, fullWidth, onKeyDown, onClick, active, ...props }) => {
-    return (_jsxs("button", { className: `${styles.customBtn} 
-        ${styles[variant]} 
-        ${styles[size]} 
-        ${styles[color]} 
-        ${disabled ? styles.disabled : ''} 
-        ${loading ? styles.loading : ''} 
-        ${active ? styles.active : ''} 
-        ${fullWidth ? styles.fullWidth : ''}
-        ${className || ''}`, disabled: disabled || loading, type: type, onKeyDown: onKeyDown, onClick: onClick, "data-id": `${String(children).toUpperCase().replaceAll(' ', '_')}_BUTTON_ID`, ...props, children: [_jsxs("div", { className: styles.btnContentWrapper, children: [startIcon && _jsx("div", { className: styles.startBtnIcon, children: startIcon }), _jsx("div", { className: styles.btnContent, children: children }), endIcon && _jsx("div", { className: styles.endBtnIcon, children: endIcon })] }), loading && (_jsx("div", { className: styles.btnLoaderContainer, children: _jsx("div", { className: styles.btnLoaderIconContainer, children: _jsx(LoaderIcon, { className: styles.btnLoaderIcon, width: '1.5rem', height: '1.5rem' }) }) }))] }));
-};
-Button.displayName = 'Button';
-export default Button;

package/dist/components/Button/index.js

@@ -1 +0,0 @@
-export { default } from './Button';

package/dist/components/Card/Card.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styles from './card.module.scss';
-const Card = ({ header, children, footer, className = '', rounded = true }) => {
-    return (_jsxs("div", { className: `${styles.cardContainer} ${className} ${rounded ? styles.roundedCorners : ''}`, children: [header && _jsx("section", { className: styles.cardHeader, children: header }), children && _jsx("section", { className: styles.cardBody, children: children }), _jsx("section", { className: styles.cardFooter, children: footer })] }));
-};
-export default Card;

package/dist/components/Card/index.js

@@ -1 +0,0 @@
-export { default } from './Card';

package/dist/components/Checkbox/Checkbox.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import CheckMark from '../../icons/CheckMark';
-import styles from './checkbox.module.scss';
-import { Position, Size } from '../../types';
-const Checkbox = ({ label, labelPlacement = Position.Start, handleCheckboxChange, className = '', checked = false, size = Size.Medium, disabled = false, }) => {
-    return (_jsx("div", { className: `${styles.checkBox} ${className}`, children: _jsx("div", { className: styles.checkBoxItemsContainer, children: _jsxs("div", { className: `${styles.checkBoxItemContainer} ${styles[labelPlacement]}`, onClick: !disabled ? handleCheckboxChange : undefined, tabIndex: 0, children: [_jsx("div", { className: `${styles.itemCheckbox} ${disabled ? styles.disabledCheckbox : checked ? styles.checked : ''}`, children: checked && (_jsx(CheckMark, { width: size === 'small' ? '1.5rem' : size === 'large' ? '1rem' : '0.875rem', height: size === 'small' ? '1.5rem' : size === 'large' ? '1rem' : '0.875rem' })) }), _jsx("label", { className: `${styles.checkBoxItemLabel} ${styles[size] || styles.medium} ${disabled ? styles.disabledLabel : ''}`, children: label })] }) }) }));
-};
-export default Checkbox;

package/dist/components/Checkbox/index.js

@@ -1 +0,0 @@
-export { default } from './Checkbox';

package/dist/components/Chip/Chip.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styles from './chip.module.scss';
-import CloseIcon from '../../icons/CloseIcon';
-import { Size } from '../../types';
-const Chip = ({ className = '', color = 'primary', children, variant = 'filled', clickable, onClick, onDelete, size = Size.Small, id, }) => {
-    return (_jsxs("span", { className: `${styles.singleChip} ${styles[size]} ${variant === 'filled' ? styles[`chip-${color}`] : ''} ${className} ${clickable ? styles.clickable : ''}
-      ${variant === 'outlined'
-            ? styles[`outlinedChip-${color}`]
-            : clickable
-                ? styles[`clickable-${color}`]
-                : ''} `, onClick: onClick, children: [children, onDelete && (_jsx("div", { className: styles.deleteContainer, children: _jsx(CloseIcon, { onClick: (e) => {
-                        e.stopPropagation();
-                        if (id)
-                            onDelete(id);
-                    }, className: styles.chipCloseIcon, width: '0.875rem', height: '0.875rem', "data-id": "CHIPS_CLOSE_ICON" }) }))] }));
-};
-Chip.displayName = 'Chip';
-export default Chip;

package/dist/components/Chip/index.js

@@ -1 +0,0 @@
-export { default } from './Chip';