@tap-payments/os-micro-frontend-shared 0.1.271 → 0.1.273

package/build/components/ColorPicker/ColorPicker.d.ts

@@ -7,6 +7,7 @@ type ColorPickerProps = {
     sx?: SxProps;
     options?: {
         hideReset?: boolean;
+        disableAlpha?: boolean;
     };
 };
 declare const ColorPicker: ({ id, value, onChange, onReset, sx, options }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;

package/build/components/ColorPicker/ColorPicker.js

@@ -8,8 +8,14 @@ import { StyledCloseButtonWrapper } from './style';
 import { closeXIcon } from '../../constants/index.js';
 import ColorPickerPanel from './ColorPickerPanel';
 import { Popper } from '@mui/material';
-const ColorPicker = ({ id, value = '#ffffff', onChange, onReset, sx, options }) => {
+const DEFAULT_OPTIONS = {
+    hideReset: false,
+    disableAlpha: false,
+};
+const ColorPicker = ({ id, value = '#ffffff', onChange, onReset, sx, options = DEFAULT_OPTIONS }) => {
     const [anchorEl, setAnchorEl] = useState(null);
+    const { disableAlpha = false, hideReset = false } = Object.assign(Object.assign({}, DEFAULT_OPTIONS), options);
+    console.log('disableAlpha', disableAlpha);
     const rootRef = useRef(null);
     const handleOpen = useCallback(() => {
         setAnchorEl(rootRef.current);
@@ -18,9 +24,9 @@ const ColorPicker = ({ id, value = '#ffffff', onChange, onReset, sx, options })
         setAnchorEl(null);
     }, []);
     const handleConfirm = useCallback((newValue) => {
-        onChange(newValue);
+        onChange(disableAlpha ? newValue.substring(0, 7) : newValue);
         setAnchorEl(null);
-    }, [onChange]);
-    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: () => setAnchorEl(null) }, { children: _jsxs(Stack, Object.assign({ ref: rootRef, bgcolor: "grey.400", borderRadius: "4px", p: "4px", pr: "12px", direction: "row", justifyContent: "space-between", spacing: 1, alignItems: "center", className: "color-picker", sx: sx }, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", className: "color-picker__controls-wrapper" }, { children: [_jsx(Box, { borderRadius: "5px", width: 32, height: 32, sx: { backgroundColor: value }, className: "color-picker__viewer" }), _jsxs(Box, Object.assign({ className: "color-picker__actions-wrapper" }, { children: [_jsx(Typography, Object.assign({ className: "color-picker__label", fontWeight: 500, fontSize: 9, color: "text.primary", textTransform: "uppercase" }, { children: value })), _jsx(Typography, Object.assign({ className: "color-picker__edit-btn", role: "button", onClick: handleOpen, htmlFor: id, fontWeight: 500, fontSize: 9, color: "info.dark", component: "label", sx: { textDecoration: 'underline', cursor: 'pointer' } }, { children: "Edit" }))] }))] })), !(options === null || options === void 0 ? void 0 : options.hideReset) ? (_jsx(StyledCloseButtonWrapper, Object.assign({ className: "color-picker__close-btn", type: "button", onClick: onReset }, { children: _jsx(Box, { component: "img", src: closeXIcon, width: 10, height: 10 }) }))) : (_jsx("div", {})), _jsx(Popper, Object.assign({ anchorEl: anchorEl, open: !!anchorEl, placement: "top" }, { children: _jsx(ColorPickerPanel, { initialValue: value, onCancel: handleCancel, onConfirm: handleConfirm }) }))] })) })));
+    }, [onChange, disableAlpha]);
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: () => setAnchorEl(null) }, { children: _jsxs(Stack, Object.assign({ ref: rootRef, bgcolor: "grey.400", borderRadius: "4px", p: "4px", pr: "12px", direction: "row", justifyContent: "space-between", spacing: 1, alignItems: "center", className: "color-picker", sx: sx }, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", className: "color-picker__controls-wrapper" }, { children: [_jsx(Box, { borderRadius: "5px", width: 32, height: 32, sx: { backgroundColor: value }, className: "color-picker__viewer" }), _jsxs(Box, Object.assign({ className: "color-picker__actions-wrapper" }, { children: [_jsx(Typography, Object.assign({ className: "color-picker__label", fontWeight: 500, fontSize: 9, color: "text.primary", textTransform: "uppercase" }, { children: value })), _jsx(Typography, Object.assign({ className: "color-picker__edit-btn", role: "button", onClick: handleOpen, htmlFor: id, fontWeight: 500, fontSize: 9, color: "info.dark", component: "label", sx: { textDecoration: 'underline', cursor: 'pointer' } }, { children: "Edit" }))] }))] })), !hideReset ? (_jsx(StyledCloseButtonWrapper, Object.assign({ className: "color-picker__close-btn", type: "button", onClick: onReset }, { children: _jsx(Box, { component: "img", src: closeXIcon, width: 10, height: 10 }) }))) : (_jsx("div", {})), _jsx(Popper, Object.assign({ anchorEl: anchorEl, open: !!anchorEl, placement: "top" }, { children: _jsx(ColorPickerPanel, { initialValue: value, onCancel: handleCancel, onConfirm: handleConfirm, disableAlpha: disableAlpha }) }))] })) })));
 };
 export default ColorPicker;

package/build/components/ColorPicker/ColorPickerPanel.d.ts

@@ -2,6 +2,7 @@ export type ColorPickerPanelProps = {
     initialValue?: string;
     onCancel: () => void;
     onConfirm: (newValue: string) => void;
+    disableAlpha?: boolean;
 };
-declare const ColorPickerPanel: ({ initialValue, onCancel, onConfirm }: ColorPickerPanelProps) => import("react/jsx-runtime").JSX.Element;
+declare const ColorPickerPanel: ({ initialValue, onCancel, onConfirm, disableAlpha }: ColorPickerPanelProps) => import("react/jsx-runtime").JSX.Element;
 export default ColorPickerPanel;

package/build/components/ColorPicker/ColorPickerPanel.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { RgbaColorPicker } from 'react-colorful';
+import { RgbaColorPicker, RgbColorPicker } from 'react-colorful';
 import Stack from '@mui/material/Stack';
 import Divider from '@mui/material/Divider';
 import { hexa2Rgba, rgba2Hexa } from '../../utils/index.js';
@@ -20,7 +20,7 @@ import { CancelButton, ConfirmButton, Footer, StyledColorWidgetWrapper } from '.
 import ColorSchemeSelect from './ColorSchemeSelect';
 import RGBAFields from './RGBAFields';
 import HexaFields from './HexaFields';
-const ColorPickerPanel = ({ initialValue = '#ffffff', onCancel, onConfirm }) => {
+const ColorPickerPanel = ({ initialValue = '#ffffff', onCancel, onConfirm, disableAlpha = false }) => {
     const [colorScheme, setColorScheme] = useState('RGB');
     const [color, setColor] = useState(() => {
         const _a = hexa2Rgba(initialValue).value, { alpha: a } = _a, rest = __rest(_a, ["alpha"]);
@@ -34,8 +34,23 @@ const ColorPickerPanel = ({ initialValue = '#ffffff', onCancel, onConfirm }) =>
     }, [initialValue, onCancel]);
     const handleConfirm = useCallback(() => {
         const { a: alpha } = color, rest = __rest(color, ["a"]);
-        onConfirm(rgba2Hexa(Object.assign(Object.assign({}, rest), { alpha })));
-    }, [color, onConfirm]);
-    return (_jsxs(StyledColorWidgetWrapper, Object.assign({ className: "color-picker__widget" }, { children: [_jsx(RgbaColorPicker, { color: color, onChange: setColor }), _jsxs(Stack, Object.assign({ mt: 2, spacing: 1, direction: "row" }, { children: [_jsx(ColorSchemeSelect, { scheme: colorScheme, setScheme: setColorScheme }), colorScheme === 'RGB' ? (_jsx(RGBAFields, { value: Object.assign(Object.assign({}, color), { a: Math.round(color.a * 100) }), onChange: (newColor) => setColor(Object.assign(Object.assign({}, newColor), { a: newColor.a / 100 })) })) : (_jsx(HexaFields, { value: Object.assign(Object.assign({}, color), { a: color.a }), onChange: (newColor) => setColor(Object.assign(Object.assign({}, newColor), { a: newColor.a })) }))] })), _jsx(Divider, { sx: { my: '12px' } }), _jsxs(Footer, Object.assign({ className: "color-picker__widget-actions" }, { children: [_jsx(CancelButton, Object.assign({ className: "color-picker__widget-actions__cancel", onClick: handleCancel }, { children: t('cancel') })), _jsx(ConfirmButton, Object.assign({ className: "color-picker__widget-actions__confirm", onClick: handleConfirm }, { children: t('okay') }))] }))] })));
+        onConfirm(rgba2Hexa(Object.assign(Object.assign({}, rest), { alpha: disableAlpha ? 1 : alpha })));
+    }, [color, onConfirm, disableAlpha]);
+    const handleColorChange = useCallback((newColor) => {
+        if (disableAlpha) {
+            setColor(Object.assign(Object.assign({}, newColor), { a: 1 }));
+        }
+        else {
+            setColor(newColor);
+        }
+    }, [disableAlpha]);
+    const handleRGBAFieldsChange = useCallback((newColor) => {
+        setColor(Object.assign(Object.assign({}, newColor), { a: newColor.a / 100 }));
+    }, []);
+    const handleHexaFieldsChange = useCallback((newColor) => {
+        setColor(Object.assign(Object.assign({}, newColor), { a: newColor.a }));
+    }, []);
+    const PickerArea = disableAlpha ? RgbColorPicker : RgbaColorPicker;
+    return (_jsxs(StyledColorWidgetWrapper, Object.assign({ className: "color-picker__widget" }, { children: [_jsx(PickerArea, { color: color, onChange: handleColorChange }), _jsxs(Stack, Object.assign({ mt: 2, spacing: 1, direction: "row" }, { children: [_jsx(ColorSchemeSelect, { scheme: colorScheme, setScheme: setColorScheme }), colorScheme === 'RGB' ? (_jsx(RGBAFields, { value: Object.assign(Object.assign({}, color), { a: Math.round(color.a * 100) }), onChange: handleRGBAFieldsChange, disableAlpha: disableAlpha })) : (_jsx(HexaFields, { value: Object.assign(Object.assign({}, color), { a: color.a }), onChange: handleHexaFieldsChange, disableAlpha: disableAlpha }))] })), _jsx(Divider, { sx: { my: '12px' } }), _jsxs(Footer, Object.assign({ className: "color-picker__widget-actions" }, { children: [_jsx(CancelButton, Object.assign({ className: "color-picker__widget-actions__cancel", onClick: handleCancel }, { children: t('cancel') })), _jsx(ConfirmButton, Object.assign({ className: "color-picker__widget-actions__confirm", onClick: handleConfirm }, { children: t('okay') }))] }))] })));
 };
 export default ColorPickerPanel;

package/build/components/ColorPicker/HexaFields.d.ts

@@ -2,6 +2,7 @@ import { RgbaColor } from 'react-colorful';
 type HexaFieldsProps = {
     value: RgbaColor;
     onChange: (newValue: RgbaColor) => void;
+    disableAlpha?: boolean;
 };
-declare const HexaFields: ({ value, onChange }: HexaFieldsProps) => import("react/jsx-runtime").JSX.Element;
+declare const HexaFields: ({ value, onChange, disableAlpha }: HexaFieldsProps) => import("react/jsx-runtime").JSX.Element;
 export default HexaFields;

package/build/components/ColorPicker/HexaFields.js

@@ -6,7 +6,7 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import InputAdornment from '@mui/material/InputAdornment';
 import { StyledInput } from './style';
-const HexaFields = ({ value, onChange }) => {
+const HexaFields = ({ value, onChange, disableAlpha = false }) => {
     const colorAsHex = useMemo(() => {
         const color = Color.rgb(value.r, value.g, value.b, value.a);
         return color.hex().replace('#', '');
@@ -71,13 +71,13 @@ const HexaFields = ({ value, onChange }) => {
                     },
                 }, InputProps: {
                     startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start", sx: { m: 0 } }, { children: _jsx(Typography, Object.assign({ component: "span", color: (theme) => alpha(theme.palette.text.primary, 0.5), display: "inline-block", fontSize: 12, fontWeight: 500 }, { children: "#" })) }))),
-                } }), _jsx(StyledInput, { type: "number", value: alphaPercent, onChange: handleAlphaChange, inputProps: { min: 0, max: 100 }, sx: {
+                } }), !disableAlpha && (_jsx(StyledInput, { type: "number", value: alphaPercent, onChange: handleAlphaChange, inputProps: { min: 0, max: 100 }, sx: {
                     flex: 0.8,
                     '& .MuiOutlinedInput-root': {
                         pr: 1,
                     },
                 }, InputProps: {
                     endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end", sx: { m: 0 } }, { children: _jsx(Typography, Object.assign({ component: "span", color: "text.primary", display: "inline-block", fontSize: 12, fontWeight: 500 }, { children: "%" })) }))),
-                } })] })));
+                } }))] })));
 };
 export default HexaFields;

package/build/components/ColorPicker/RGBAFields.d.ts

@@ -2,6 +2,7 @@ import { RgbaColor } from 'react-colorful';
 type RGBAFieldsProps = {
     value: RgbaColor;
     onChange: (newValue: RgbaColor) => void;
+    disableAlpha?: boolean;
 };
-declare const RGBAFields: ({ value, onChange }: RGBAFieldsProps) => import("react/jsx-runtime").JSX.Element;
+declare const RGBAFields: ({ value, onChange, disableAlpha }: RGBAFieldsProps) => import("react/jsx-runtime").JSX.Element;
 export default RGBAFields;

package/build/components/ColorPicker/RGBAFields.js

@@ -1,25 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from 'react';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import InputAdornment from '@mui/material/InputAdornment';
 import { StyledInput } from './style';
-const RGBAFields = ({ value, onChange }) => {
-    const handleChange = (key, max) => (event) => {
-        let num = parseInt(event.target.value, 10);
+const RGBAFields = ({ value, onChange, disableAlpha = false }) => {
+    const [internalValue, setInternalValue] = useState(value);
+    const { r, g, b, a } = internalValue;
+    useEffect(() => {
+        setInternalValue(value);
+    }, [value]);
+    const handleValueBoundaries = useCallback((num, max) => {
         if (isNaN(num))
             num = 0;
         if (num < 0)
             num = 0;
         if (num > max)
             num = max;
-        onChange(Object.assign(Object.assign({}, value), { [key]: num }));
-    };
-    return (_jsxs(Stack, Object.assign({ direction: "row", spacing: 1 }, { children: [_jsx(StyledInput, { type: "number", value: value.r, onChange: handleChange('r', 255), inputProps: { min: 0, max: 255, style: { textAlign: 'center' } }, variant: "outlined", size: "small" }), _jsx(StyledInput, { type: "number", value: value.g, onChange: handleChange('g', 255), inputProps: { min: 0, max: 255, style: { textAlign: 'center' } }, variant: "outlined", size: "small" }), _jsx(StyledInput, { type: "number", value: value.b, onChange: handleChange('b', 255), inputProps: { min: 0, max: 255, style: { textAlign: 'center' } }, variant: "outlined", size: "small" }), _jsx(StyledInput, { type: "number", value: value.a, onChange: handleChange('a', 100), inputProps: { min: 0, max: 100, style: { textAlign: 'center' } }, variant: "outlined", sx: {
+        console.log('num', num);
+        return num;
+    }, []);
+    const handleChange = useCallback((key, max) => (event) => {
+        setInternalValue(Object.assign(Object.assign({}, internalValue), { [key]: handleValueBoundaries(+event.target.value, max) }));
+    }, [internalValue, handleValueBoundaries]);
+    const handleBlur = useCallback((key, max) => {
+        onChange(Object.assign(Object.assign({}, internalValue), { [key]: handleValueBoundaries(internalValue[key], max) }));
+    }, [onChange, internalValue, handleValueBoundaries]);
+    return (_jsxs(Stack, Object.assign({ direction: "row", spacing: 1 }, (disableAlpha && { flex: 1 }), { children: [_jsx(StyledInput, Object.assign({ type: "number", value: r, onBlur: () => handleBlur('r', 255), onChange: handleChange('r', 255), inputProps: { min: 0, max: 255, style: { textAlign: 'center' } }, variant: "outlined", size: "small" }, (disableAlpha && { sx: { flex: 1 } }))), _jsx(StyledInput, Object.assign({ type: "number", value: g, onBlur: () => handleBlur('g', 255), onChange: handleChange('g', 255), inputProps: { min: 0, max: 255, style: { textAlign: 'center' } }, variant: "outlined", size: "small" }, (disableAlpha && { sx: { flex: 1 } }))), _jsx(StyledInput, Object.assign({ type: "number", value: b, onBlur: () => handleBlur('b', 255), onChange: handleChange('b', 255), inputProps: { min: 0, max: 255, style: { textAlign: 'center' } }, variant: "outlined", size: "small" }, (disableAlpha && { sx: { flex: 1 } }))), !disableAlpha && (_jsx(StyledInput, { type: "number", value: a, onBlur: () => handleBlur('a', 100), onChange: handleChange('a', 100), inputProps: { min: 0, max: 100, style: { textAlign: 'center' } }, variant: "outlined", sx: {
                     '& .MuiOutlinedInput-root': {
                         pr: 1,
                     },
                 }, InputProps: {
                     endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end", sx: { m: 0 } }, { children: _jsx(Typography, Object.assign({ component: "span", display: "inline-block", fontSize: 12, fontWeight: 500 }, { children: "%" })) }))),
-                }, size: "small" })] })));
+                }, size: "small" }))] })));
 };
 export default RGBAFields;

package/build/components/ColorPicker/style.js

@@ -34,18 +34,19 @@ export const StyledColorWidgetWrapper = styled(Box)(({ theme }) => ({
             },
         },
         '&__hue': {
-            marginBottom: theme.spacing(2),
             borderRadius: '4px',
-            height: '16px',
+            height: '8px',
             '&-pointer': {
                 width: 10,
                 height: 10,
             },
         },
         '&__alpha': {
+            marginTop: theme.spacing(2),
+            marginBottom: 0,
             border: 0,
             borderRadius: '4px',
-            height: '16px',
+            height: '8px',
             '&-pointer': {
                 width: 10,
                 height: 10,

package/build/components/Tooltip/Tooltip.js

@@ -9,10 +9,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import Box from '@mui/material/Box';
 import { StyledTooltip } from './styles';
 function Tooltip(_a) {
     var { className, title, placement = 'top', children } = _a, rest = __rest(_a, ["className", "title", "placement", "children"]);
-    return (_jsx(StyledTooltip, Object.assign({ classes: { popper: className }, title: title, placement: placement, arrow: true }, rest, { children: children || _jsx(_Fragment, {}) })));
+    return (_jsx(StyledTooltip, Object.assign({ classes: { popper: className }, title: title, placement: placement, arrow: true }, rest, { children: _jsx(Box, Object.assign({ display: "flex" }, { children: children })) })));
 }
 export default Tooltip;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.271",
+  "version": "0.1.273",
   "testVersion": 0,
   "type": "module",
   "main": "build/index.js",