pne-ui 4.0.8 → 4.0.11

package/esm/src/component/dropdown/PneSelect.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+import { SelectProps, SelectVariants } from '@mui/material';
+import { PneDropdownChoice } from '../../common/paynet/dropdown';
+import { SelectOption } from '../../common/pne/type';
+export interface IProps<T extends PneDropdownChoice> extends Omit<SelectProps<T>, 'children' | 'onChange' | 'variant'> {
+    options: readonly T[];
+    onChange: (option: T) => void;
+    getOptionLabel?: (option: SelectOption) => ReactNode;
+    variant?: SelectVariants;
+    disableMenuItem?: (option: SelectOption) => boolean;
+}
+declare const PneSelect: React.ForwardRefExoticComponent<Omit<IProps<PneDropdownChoice>, "ref"> & React.RefAttributes<HTMLSelectElement>>;
+export default PneSelect;

package/esm/src/component/dropdown/PneSelect.js

@@ -0,0 +1,44 @@
+import React, { forwardRef } from 'react';
+import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
+import { assertObject, ensure, exhaustiveCheck } from '../../common/pne/type';
+import { isAbstractEntity, isIAutoCompleteChoice } from '../../common/paynet/type';
+const PneSelect = forwardRef((props, ref) => {
+    const { options, onChange, size = 'small', getOptionLabel = createDefaultOptionLabel, variant = 'outlined', disableMenuItem, label, disabled, error, required, sx, ...rest } = props;
+    const handleChange = (event) => {
+        const value = event.target.value;
+        onChange(ensure(options.find(opt => mapChoiceToSelectOption(opt).value === value)));
+    };
+    const optionsPresent = options?.length > 0;
+    return React.createElement(FormControl, { size: size, variant: variant, disabled: disabled, error: error, required: required, sx: sx, fullWidth: true },
+        React.createElement(InputLabel, { id: "select-label" }, label),
+        React.createElement(Select, { ref: ref, labelId: "select-label", onChange: handleChange, size: size, variant: variant, label: label, ...rest }, optionsPresent ? options.map(mapChoiceToSelectOption).map(option => React.createElement(MenuItem, { disabled: disableMenuItem ? disableMenuItem(option) : false, key: option.value, value: option.value }, getOptionLabel(option))) : null));
+});
+export default PneSelect;
+const createDefaultOptionLabel = (option) => {
+    return option.label;
+};
+const mapChoiceToSelectOption = (choice) => {
+    if (typeof choice === 'string') {
+        return {
+            value: choice,
+            label: choice,
+        };
+    }
+    assertObject(choice);
+    if (isIAutoCompleteChoice(choice)) {
+        return {
+            value: choice.choiceId,
+            label: choice.displayName,
+        };
+    }
+    else if (isAbstractEntity(choice)) {
+        return {
+            value: choice.id,
+            label: choice.displayName,
+        };
+    }
+    exhaustiveCheck(choice);
+    throw new TypeError('Incompatible types of select option:\n'
+        + JSON.stringify(choice, null, 4));
+};
+//# sourceMappingURL=PneSelect.js.map

package/esm/src/component/dropdown/PneSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PneSelect.js","sourceRoot":"","sources":["../../../../src/component/dropdown/PneSelect.tsx"],"names":[],"mappings":"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"}

package/esm/src/component/fab/PneFloatingActionButtons.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+export type PneFabAction = {
+    id: string;
+    label: React.ReactNode;
+    onClick: () => void;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    tooltip?: string;
+    showInMenu?: boolean;
+    showInFabStack?: boolean;
+};
+export type PneFabContent = {
+    id: string;
+    kind: 'content';
+    node: React.ReactNode;
+};
+export type PneFabDivider = {
+    id: string;
+    kind: 'divider';
+};
+export type PneFabItem = PneFabAction | PneFabContent | PneFabDivider;
+export type PneFloatingActionButtonsProps = {
+    actions: PneFabItem[];
+    breakpoints?: readonly number[];
+    mobileBreakpoint?: number;
+    position?: {
+        bottom?: number;
+        right?: number;
+    };
+    fabLabel?: React.ReactNode;
+    fabIcon?: React.ReactNode;
+    className?: string;
+    bannerText?: React.ReactNode;
+};
+/**
+ * Floating action menu:
+ * - on mobile: actions/content rendered inside a Menu
+ * - on desktop: actions rendered as floating Fabs stacked above the trigger; Menu still opens for content/banner
+ * Actions array may include content blocks (`{ kind: 'content', node: <...> }`) to embed custom UI.
+ */
+export declare function PneFloatingActionButtons({ actions, breakpoints, mobileBreakpoint, position, fabLabel, fabIcon, className, bannerText, }: PneFloatingActionButtonsProps): React.JSX.Element;
+export default PneFloatingActionButtons;

package/esm/src/component/fab/PneFloatingActionButtons.js

@@ -0,0 +1,119 @@
+import React, { useEffect, useState } from 'react';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import EditIcon from '@mui/icons-material/Edit';
+import { Box, Divider, Fab, ListItemIcon, ListItemText, Menu, MenuItem, Stack, Tooltip } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { DEFAULT_BREAKPOINTS } from '../../common/responsive/breakpoints';
+import { useBreakpoint } from '../responsive/useBreakpoint';
+const isContentItem = (item) => 'kind' in item && item.kind === 'content';
+const isDividerItem = (item) => 'kind' in item && item.kind === 'divider';
+const isActionItem = (item) => !isContentItem(item) && !isDividerItem(item);
+/**
+ * Floating action menu:
+ * - on mobile: actions/content rendered inside a Menu
+ * - on desktop: actions rendered as floating Fabs stacked above the trigger; Menu still opens for content/banner
+ * Actions array may include content blocks (`{ kind: 'content', node: <...> }`) to embed custom UI.
+ */
+export function PneFloatingActionButtons({ actions, breakpoints = DEFAULT_BREAKPOINTS, mobileBreakpoint = 800, position, fabLabel, fabIcon = React.createElement(EditIcon, null), className, bannerText, }) {
+    const { t } = useTranslation();
+    const breakpoint = useBreakpoint({ breakpoints });
+    const isMobile = breakpoint < mobileBreakpoint;
+    const resolvedFabLabel = fabLabel ?? t('pne.fab.actions', { defaultValue: 'Actions' });
+    const resolvedFabActionLabel = t('pne.fab.action', { defaultValue: 'Action' });
+    const scrollTopLabel = t('pne.fab.scrollToTop', { defaultValue: 'Scroll to top' });
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [showScrollTop, setShowScrollTop] = useState(false);
+    const handleOpen = (event) => setAnchorEl(event.currentTarget);
+    const handleClose = () => setAnchorEl(null);
+    const handleAction = (action) => {
+        handleClose();
+        action.onClick();
+    };
+    const handleScrollTop = () => {
+        if (typeof window === 'undefined')
+            return;
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    };
+    const renderMenuItems = (items) => items.map(item => isContentItem(item) ? (React.createElement(Box, { key: item.id }, item.node)) : isDividerItem(item) ? (React.createElement(Divider, { key: item.id, component: 'li', role: 'presentation', sx: { my: 2 } })) : isActionItem(item) ? (React.createElement(MenuItem, { key: item.id, disabled: item.disabled, onClick: () => handleAction(item), sx: { fontSize: '0.875rem', display: 'flex', alignItems: 'center', gap: 1 } },
+        React.createElement(ListItemText, { slotProps: { primary: { sx: { fontSize: '0.875rem' } } }, sx: { flex: 1 } }, item.label),
+        item.icon ? (React.createElement(Box, { component: 'span', sx: { display: 'inline-flex', color: 'inherit', lineHeight: 0 } }, item.icon)) : null)) : null);
+    // Desktop: actions can be shown independently in menu and floating stack.
+    const menuItems = actions.filter(item => !isActionItem(item) || item.showInMenu !== false);
+    const actionItems = isMobile ? [] : actions.filter(isActionItem).filter(item => item.showInFabStack !== false);
+    const fabSx = isMobile ? { opacity: 0.85 } : { opacity: 0.3 };
+    const stackSx = isMobile ? undefined : { '&:hover .pne-fab': { opacity: 0.85 } };
+    const baseOffset = isMobile ? 16 : 24;
+    const bottomOffset = position?.bottom ?? baseOffset;
+    const rightOffset = position?.right ?? baseOffset;
+    const containerSx = {
+        bottom: `calc(${bottomOffset}px + env(safe-area-inset-bottom, 0px))`,
+        right: `calc(${rightOffset}px + env(safe-area-inset-right, 0px))`,
+    };
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        let frameId = null;
+        const update = () => {
+            frameId = null;
+            const offset = window.scrollY ?? document.documentElement.scrollTop ?? 0;
+            setShowScrollTop(offset > 16);
+        };
+        update();
+        const handleScroll = () => {
+            if (frameId !== null)
+                return;
+            frameId = window.requestAnimationFrame(update);
+        };
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+            if (frameId !== null) {
+                window.cancelAnimationFrame(frameId);
+            }
+        };
+    }, []);
+    return (React.createElement(Box, { className: className, sx: {
+            position: 'fixed',
+            zIndex: 1300,
+            ...containerSx,
+        } },
+        React.createElement(Stack, { spacing: 1, sx: {
+                alignItems: 'flex-end',
+                ...(stackSx ?? {}),
+            } },
+            showScrollTop ? (React.createElement(Tooltip, { title: isMobile ? '' : scrollTopLabel, placement: 'left', disableInteractive: true },
+                React.createElement("span", null,
+                    React.createElement(Fab, { className: 'pne-fab', color: 'primary', size: 'small', onClick: handleScrollTop, "aria-label": scrollTopLabel, sx: fabSx },
+                        React.createElement(ArrowUpwardIcon, { fontSize: 'small' }))))) : null,
+            !isMobile
+                ? actionItems.map(item => {
+                    const title = item.tooltip ??
+                        (typeof item.label === 'string' ? item.label : typeof resolvedFabLabel === 'string' ? resolvedFabLabel : resolvedFabActionLabel);
+                    return (React.createElement(Tooltip, { key: item.id, title: title, placement: 'left', disableInteractive: true },
+                        React.createElement("span", null,
+                            React.createElement(Fab, { className: 'pne-fab', color: 'primary', size: 'small', onClick: () => handleAction(item), "aria-label": typeof title === 'string' ? title : resolvedFabActionLabel, sx: fabSx }, item.icon ?? (typeof item.label === 'string' ? item.label.charAt(0) : fabIcon)))));
+                })
+                : null,
+            React.createElement(Tooltip, { title: isMobile ? '' : resolvedFabLabel, disableInteractive: true },
+                React.createElement(Fab, { className: 'pne-fab', color: 'primary', size: 'small', onClick: handleOpen, "aria-label": typeof resolvedFabLabel === 'string' ? resolvedFabLabel : t('pne.fab.actions', { defaultValue: 'Actions' }), sx: fabSx }, fabIcon))),
+        React.createElement(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, anchorOrigin: { vertical: 'top', horizontal: 'left' }, slotProps: { list: { sx: { py: 0 } } } },
+            renderMenuItems(menuItems),
+            bannerText ? (React.createElement(MenuItem, { disabled: true, sx: {
+                    pointerEvents: 'none',
+                    bgcolor: theme => theme.palette.primary.main,
+                    color: theme => theme.palette.primary.contrastText,
+                    '&.Mui-disabled': { opacity: 1 },
+                    minHeight: 60,
+                } },
+                React.createElement(ListItemIcon, { sx: { minWidth: 36, color: 'inherit' } }, fabIcon),
+                React.createElement(ListItemText, { slotProps: {
+                        primary: {
+                            sx: {
+                                fontWeight: 600,
+                                fontSize: '20px',
+                            },
+                        },
+                    } }, bannerText))) : null)));
+}
+export default PneFloatingActionButtons;
+//# sourceMappingURL=PneFloatingActionButtons.js.map

package/esm/src/component/fab/PneFloatingActionButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PneFloatingActionButtons.js","sourceRoot":"","sources":["../../../../src/component/fab/PneFloatingActionButtons.tsx"],"names":[],"mappings":"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"}

package/esm/src/component/non-abstract-entity-selector/AbstractEntitySelectModal.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { TFunction } from 'react-i18next';
+import { AbstractEntitySelectorProp, IMappedUnmappedList } from './AbstractEntitySelector';
+interface IProps<T extends AbstractEntitySelectorProp> {
+    open: boolean;
+    onClose: () => void;
+    mappedList: T[];
+    unMappedList: T[];
+    handleSave: (list: IMappedUnmappedList<T>) => void;
+    title: string;
+    subTitle?: string;
+    loading?: boolean;
+    disableMoving?: 'ADDED' | 'AVAILABLE' | undefined;
+    optionRenderer?: TFunction;
+    textRepresentation?: 'ID' | 'NAME' | undefined;
+    textRepresentationValue?: string;
+}
+export declare const AbstractEntitySelectModal: <T extends AbstractEntitySelectorProp>(props: IProps<T>) => React.JSX.Element;
+export {};

package/esm/src/component/non-abstract-entity-selector/AbstractEntitySelectModal.js

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Stack } from '@mui/material';
+import { AbstractEntitySelector } from './AbstractEntitySelector';
+import PneButton from '../PneButton';
+import PneModal from "../PneModal";
+export const AbstractEntitySelectModal = (props) => {
+    const { open, onClose, mappedList, unMappedList, handleSave, title, subTitle, loading = false, disableMoving, optionRenderer, textRepresentation, textRepresentationValue } = props;
+    const { t } = useTranslation();
+    const autoHeight = () => {
+        if (mappedList?.length > unMappedList?.length) {
+            return mappedList.length <= 10
+                ? mappedList.length == 1
+                    ? `calc((${mappedList?.length + 1} * 32px) + 36px)`
+                    : `calc((${mappedList?.length} * 32px) + 36px)`
+                : `calc(400px + 40px + 16px)`;
+        }
+        else {
+            return unMappedList?.length <= 10
+                ? unMappedList?.length == 1
+                    ? `calc((${unMappedList?.length + 1} * 32px) + 36px)`
+                    : `calc((${unMappedList?.length} * 32px) + 36px)`
+                : `calc(320px + 36px)`;
+        }
+    };
+    const [localUnMappedList, setLocalUnMappedList] = useState(unMappedList);
+    const [localMappedList, setLocalMappedList] = useState(mappedList);
+    const handleChange = (mappedList, unMappedList) => {
+        setLocalMappedList(mappedList);
+        setLocalUnMappedList(unMappedList);
+    };
+    const entitySelectorOptions = {
+        list: unMappedList,
+        selected: mappedList,
+        height: autoHeight(),
+        disableMoving,
+        optionRenderer,
+        textRepresentation,
+        textRepresentationValue,
+        onChange: handleChange,
+        actionBlock: (React.createElement(Stack, { direction: 'row', sx: {
+                marginTop: '16px',
+                gap: 2,
+            } },
+            React.createElement(PneButton, { variant: 'outlined', onClick: () => onClose(), fullWidth: true }, t('cancel')),
+            React.createElement(PneButton, { variant: 'contained', onClick: () => {
+                    handleSave({
+                        mapped: localMappedList,
+                        unmapped: localUnMappedList
+                    });
+                }, fullWidth: true }, t('save')))),
+    };
+    return (React.createElement(PneModal, { open: open, onClose: onClose, title: title, subtitle: subTitle, containerSx: {
+            width: {
+                xs: 'clamp(360px, calc(100vw - 32px), 600px)',
+                sm: '600px'
+            },
+            minWidth: 0,
+            maxWidth: '600px',
+            height: 'auto'
+        } },
+        React.createElement(AbstractEntitySelector, { ...entitySelectorOptions })));
+};
+//# sourceMappingURL=AbstractEntitySelectModal.js.map

package/esm/src/component/non-abstract-entity-selector/AbstractEntitySelectModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AbstractEntitySelectModal.js","sourceRoot":"","sources":["../../../../src/component/non-abstract-entity-selector/AbstractEntitySelectModal.tsx"],"names":[],"mappings":"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"}

package/esm/src/component/non-abstract-entity-selector/AbstractEntitySelector.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { TFunction } from 'react-i18next';
+import { AbstractEntity, Country, IMappedAbstractEntity } from '../../common';
+export type ProcessorPaymentApparatus = {
+    id: number;
+    name: string;
+    mapped: boolean;
+};
+export declare const isProcessorPaymentApparatus: (value: unknown) => value is ProcessorPaymentApparatus;
+export interface IAbstractEntityOptions<T> {
+    reset?: boolean;
+    list: T[];
+    selected: T[];
+    height?: string;
+    disableMoving?: 'ADDED' | 'AVAILABLE' | undefined;
+    optionRenderer?: TFunction;
+    textRepresentation?: 'ID' | 'NAME' | undefined;
+    textRepresentationValue?: string;
+    onChange: (mappedList: T[], unMappedList: T[]) => void;
+    actionBlock?: React.ReactNode;
+}
+export type AbstractEntitySelectorProp = string | IMappedAbstractEntity | AbstractEntity | Country | ProcessorPaymentApparatus;
+export interface IMappedUnmappedList<T extends AbstractEntitySelectorProp> {
+    mapped: T[];
+    unmapped: T[];
+}
+export declare const AbstractEntitySelector: <T extends AbstractEntitySelectorProp>(props: React.PropsWithChildren<IAbstractEntityOptions<T>>) => React.JSX.Element;