@tap-payments/os-micro-frontend-shared 0.0.246-test.1 → 0.0.246-test.2
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/build/components/AppWindowWrapper/headers/AppWindowHeader/AppWindowHeader.d.ts +5 -0
- package/build/components/AppWindowWrapper/headers/AppWindowHeader/AppWindowHeader.js +23 -0
- package/build/components/AppWindowWrapper/headers/AppWindowHeader/AppWindowHeaderBase.d.ts +5 -0
- package/build/components/AppWindowWrapper/headers/AppWindowHeader/AppWindowHeaderBase.js +20 -0
- package/build/components/AppWindowWrapper/headers/AppWindowHeader/index.d.ts +3 -0
- package/build/components/AppWindowWrapper/headers/AppWindowHeader/index.js +3 -0
- package/build/components/AppWindowWrapper/headers/AppWindowHeader/type.d.ts +32 -0
- package/build/components/AppWindowWrapper/headers/AppWindowHeader/type.js +1 -0
- package/build/components/StatusButton/StatusButton.js +2 -2
- package/build/components/StatusButton/type.d.ts +0 -1
- package/build/components/Toolbar/style.d.ts +4 -4
- package/build/components/ToolbarIcon/MaximizeIcon/MaximizeIcon.d.ts +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { AppWindowHeaderProps } from './type';
|
|
3
|
+
declare function AppWindowHeader({ isMaximized, id, isToolbarAnimationDisabled, title, leftActions, onClose, onMaximize }: AppWindowHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare const _default: import("react").MemoExoticComponent<typeof AppWindowHeader>;
|
|
5
|
+
export default _default;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { memo } from 'react';
|
|
3
|
+
import { motion } from 'framer-motion';
|
|
4
|
+
import { useMouseState } from '../../../../hooks/index.js';
|
|
5
|
+
import { animationDuration } from '../../AppWindow/constant';
|
|
6
|
+
import AppWindowHeaderBase from './AppWindowHeaderBase';
|
|
7
|
+
import { CloseIcon, MaximizeIcon } from '../../../ToolbarIcon';
|
|
8
|
+
function AppWindowHeader({ isMaximized, id, isToolbarAnimationDisabled, title, leftActions, onClose, onMaximize }) {
|
|
9
|
+
const { isHovered, onMouseEnter, onMouseLeave } = useMouseState();
|
|
10
|
+
return (_jsx(motion.div, Object.assign({ style: Object.assign({}, (isMaximized && {
|
|
11
|
+
height: 0,
|
|
12
|
+
zIndex: 1000,
|
|
13
|
+
position: 'relative',
|
|
14
|
+
})), animate: Object.assign(Object.assign({}, (isMaximized && {
|
|
15
|
+
width: '100vw',
|
|
16
|
+
})), (!isMaximized && {
|
|
17
|
+
transform: 'translateX(0px)',
|
|
18
|
+
width: '100%',
|
|
19
|
+
})), transition: Object.assign({ duration: animationDuration }, (isToolbarAnimationDisabled && {
|
|
20
|
+
duration: 0,
|
|
21
|
+
})) }, { children: _jsx(AppWindowHeaderBase, { title: title, maximized: isMaximized, id: id || 'draggable-dialog-title', isHovered: isHovered, onMouseHover: onMouseEnter, onMouseLeave: onMouseLeave, leftActions: leftActions || (_jsxs(_Fragment, { children: [_jsx(CloseIcon, { onClick: onClose }), _jsx(MaximizeIcon, { isMaximized: isMaximized, onClick: () => onMaximize === null || onMaximize === void 0 ? void 0 : onMaximize(!isMaximized) })] })) }) })));
|
|
22
|
+
}
|
|
23
|
+
export default memo(AppWindowHeader);
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { AppWindowHeaderBaseProps } from './type';
|
|
3
|
+
declare function AppWindowHeaderBase({ title, maximized, id, isHovered, onMouseHover, onMouseLeave, leftActions, sandboxMode, titleIconSrc, ...rootProps }: AppWindowHeaderBaseProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare const _default: import("react").MemoExoticComponent<typeof AppWindowHeaderBase>;
|
|
5
|
+
export default _default;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
+
import { memo } from 'react';
|
|
14
|
+
import Toolbar from '../../../Toolbar';
|
|
15
|
+
import { StyledHeaderWrapperStyled } from '../../../Toolbar/style';
|
|
16
|
+
function AppWindowHeaderBase(_a) {
|
|
17
|
+
var { title, maximized = false, id, isHovered = false, onMouseHover, onMouseLeave, leftActions, sandboxMode = false, titleIconSrc } = _a, rootProps = __rest(_a, ["title", "maximized", "id", "isHovered", "onMouseHover", "onMouseLeave", "leftActions", "sandboxMode", "titleIconSrc"]);
|
|
18
|
+
return (_jsx(StyledHeaderWrapperStyled, Object.assign({ id: id, "data-testid": "UserTitleBar", maximized: maximized || false, sandboxMode: sandboxMode }, rootProps, { children: _jsx(Toolbar, { onMouseEnter: onMouseHover, onMouseLeave: onMouseLeave, isMaximized: maximized, isHovered: isHovered, title: title || '', icon: titleIconSrc, leftActions: leftActions }) })));
|
|
19
|
+
}
|
|
20
|
+
export default memo(AppWindowHeaderBase);
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { StyledHeaderWrapperStyled, ToolbarProps } from '../../../Toolbar';
|
|
2
|
+
import { Dispatch, ReactNode, SetStateAction, SyntheticEvent } from 'react';
|
|
3
|
+
export interface AccountHeaderProps {
|
|
4
|
+
isSidebarExpanded: boolean;
|
|
5
|
+
setIsSidebarExpanded: (value: boolean) => void;
|
|
6
|
+
isToolbarAnimationDisabled?: boolean;
|
|
7
|
+
setIsToolbarAnimationDisabled?: (value: boolean) => void;
|
|
8
|
+
isMaximized?: boolean;
|
|
9
|
+
setIsMaximized?: Dispatch<SetStateAction<boolean>>;
|
|
10
|
+
onClose?: () => void;
|
|
11
|
+
title?: string;
|
|
12
|
+
showSectionsButton?: boolean;
|
|
13
|
+
}
|
|
14
|
+
export type AppWindowHeaderBaseProps = React.ComponentProps<typeof StyledHeaderWrapperStyled> & {
|
|
15
|
+
title?: string;
|
|
16
|
+
maximized?: boolean;
|
|
17
|
+
id?: string;
|
|
18
|
+
isHovered?: boolean;
|
|
19
|
+
onMouseHover?: (e: SyntheticEvent) => void;
|
|
20
|
+
onMouseLeave?: (e: SyntheticEvent) => void;
|
|
21
|
+
leftActions?: ToolbarProps['leftActions'];
|
|
22
|
+
titleIconSrc?: ToolbarProps['icon'];
|
|
23
|
+
};
|
|
24
|
+
export type AppWindowHeaderProps = {
|
|
25
|
+
id?: string;
|
|
26
|
+
isToolbarAnimationDisabled?: boolean;
|
|
27
|
+
isMaximized?: boolean;
|
|
28
|
+
title?: string;
|
|
29
|
+
leftActions?: ReactNode;
|
|
30
|
+
onClose?: () => void;
|
|
31
|
+
onMaximize?: (isMaximized: boolean) => void;
|
|
32
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -19,12 +19,12 @@ import { ChevronContainer, Label, LabelWrapper, StyledStatusIcon, StyledDropdown
|
|
|
19
19
|
import { statusButtonIcons } from './constant';
|
|
20
20
|
const StatusButton = memo((props) => {
|
|
21
21
|
var _a;
|
|
22
|
-
const { variant = 'inActive', badgeCount, icon, label, dropdownOptions, onButtonBodyClick
|
|
22
|
+
const { variant = 'inActive', badgeCount, icon, label, dropdownOptions, onButtonBodyClick } = props, restProps = __rest(props, ["variant", "badgeCount", "icon", "label", "dropdownOptions", "onButtonBodyClick"]);
|
|
23
23
|
const [buttonClicks, setButtonClicks] = useState(0);
|
|
24
24
|
const { t } = useTranslation();
|
|
25
25
|
const buttonRef = useRef(null);
|
|
26
26
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
27
|
-
const [selectedStatus, setSelectedStatus] = useState(
|
|
27
|
+
const [selectedStatus, setSelectedStatus] = useState((_a = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions[0]) === null || _a === void 0 ? void 0 : _a.status);
|
|
28
28
|
const hasDropdown = useMemo(() => Boolean(dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.length), [dropdownOptions]);
|
|
29
29
|
const isDropdownOpen = Boolean(anchorEl) && buttonClicks > 1;
|
|
30
30
|
const isActiveVariant = variant === 'active';
|
|
@@ -13,7 +13,6 @@ export interface StatusButtonProps extends Omit<ButtonProps, 'variant' | 'childr
|
|
|
13
13
|
showDropdownIcon?: boolean;
|
|
14
14
|
totalCount?: number;
|
|
15
15
|
onButtonBodyClick?: (status: TableHeaderStatus) => void;
|
|
16
|
-
defaultSelectedStatus?: TableHeaderStatus;
|
|
17
16
|
dropdownOptions?: Array<MenuItemI & {
|
|
18
17
|
status: TableHeaderStatus;
|
|
19
18
|
}>;
|
|
@@ -9,8 +9,8 @@ export declare const StyledBox: import("@emotion/styled").StyledComponent<import
|
|
|
9
9
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
10
10
|
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
11
11
|
export declare const StyledHeaderWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
|
|
12
|
-
sandboxMode
|
|
13
|
-
maximized
|
|
12
|
+
sandboxMode?: boolean | undefined;
|
|
13
|
+
maximized?: boolean | undefined;
|
|
14
14
|
isDragging?: boolean | undefined;
|
|
15
15
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
16
16
|
export declare const ToolbarStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
@@ -20,7 +20,7 @@ export declare const ToolbarStyled: import("@emotion/styled").StyledComponent<im
|
|
|
20
20
|
isHovered?: boolean | undefined;
|
|
21
21
|
}, {}, {}>;
|
|
22
22
|
export declare const StyledHeaderWrapperStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
|
|
23
|
-
sandboxMode
|
|
24
|
-
maximized
|
|
23
|
+
sandboxMode?: boolean | undefined;
|
|
24
|
+
maximized?: boolean | undefined;
|
|
25
25
|
isDragging?: boolean | undefined;
|
|
26
26
|
} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, {}, {}>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { BoxProps } from '@mui/material/Box';
|
|
2
2
|
interface MaximizeIconProps extends BoxProps {
|
|
3
|
-
isMaximized
|
|
3
|
+
isMaximized?: boolean;
|
|
4
4
|
}
|
|
5
5
|
export declare function MaximizeIcon({ isMaximized, ...props }: MaximizeIconProps): import("react/jsx-runtime").JSX.Element;
|
|
6
6
|
export {};
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tap-payments/os-micro-frontend-shared",
|
|
3
3
|
"description": "Shared components and utilities for Tap Payments micro frontends",
|
|
4
|
-
"version": "0.0.246-test.
|
|
5
|
-
"testVersion":
|
|
4
|
+
"version": "0.0.246-test.2",
|
|
5
|
+
"testVersion": 2,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "build/index.js",
|
|
8
8
|
"module": "build/index.js",
|