ish-ui 1.0.17 → 1.0.18

package/README.md

@@ -18,10 +18,10 @@ git clone https://github.com/ishgroup/ish-ui.git
 
 <br>
 
-Install dependencies using Yarn:
+Install dependencies using NPM:
 
 ```bash
-yarn install
+npm install
 ```
 
 <br />
@@ -31,7 +31,7 @@ yarn install
 To develop and run your web application, you need to run following command :
 
 ```bash
-yarn start
+npm start
 ```
 
 <br />
@@ -41,7 +41,7 @@ yarn start
 To lint application source code using ESLint via this command :
 
 ```bash
-yarn lint
+npm lint
 ```
 
 <br />
@@ -53,7 +53,7 @@ Distribution files output will be generated in `dist/` directory by default.
 To build the production ready files for distribution, use the following command :
 
 ```bash
-yarn build
+npm build
 ```
 
 <br />
@@ -63,7 +63,7 @@ yarn build
 Serve helps you serve a static site, single page application or just a static file. It also provides a neat interface for listing the directory's contents. This command serves build files from `dist/` directory.
 
 ```bash
-yarn serve
+npm serve
 ```
 
 <br />

package/dist/Demo.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const muiCache: import("@emotion/utils").EmotionCache;
+declare function Demo(): React.JSX.Element;
+export default Demo;

package/dist/Demo.js

@@ -0,0 +1,41 @@
+/*
+ * Copyright ish group pty ltd. All rights reserved. https://www.ish.com.au
+ * No copying or use of this code is allowed without permission in writing from ish.
+ */
+import React, { useRef, useState } from 'react';
+import { CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
+import { ThemeProvider } from '@mui/material/styles';
+import { Box, Grid } from '@mui/material';
+import CssBaseline from '@mui/material/CssBaseline';
+import { defaultTheme } from './themes';
+import { GlobalStylesProvider } from './styles';
+import { DemoField } from './DemoField';
+import { WysiwygEditor } from './markdownEditor';
+export const muiCache = createCache({
+    key: 'mui',
+    prepend: true,
+});
+function Demo() {
+    const wysiwygRef = useRef();
+    const [draftContent, setDraftContent] = useState('');
+    return (React.createElement(CacheProvider, { value: muiCache },
+        React.createElement(ThemeProvider, { theme: defaultTheme },
+            React.createElement(CssBaseline, null),
+            React.createElement(GlobalStylesProvider, null,
+                React.createElement(Box, { sx: {
+                        width: '100vw',
+                        height: '100vh',
+                        padding: 4
+                    } },
+                    React.createElement(Grid, { container: true, columnSpacing: 3, rowSpacing: 2 },
+                        React.createElement(Grid, { item: true, xs: 6 },
+                            React.createElement(DemoField, { label: "Test phone", type: "phone" })),
+                        React.createElement(Grid, { item: true, xs: 6 },
+                            React.createElement(DemoField, { label: "Test text", type: "text" })),
+                        React.createElement(Grid, { item: true, xs: 12 },
+                            React.createElement(WysiwygEditor, { value: draftContent, onChange: setDraftContent, wysiwygRef: wysiwygRef })),
+                        React.createElement(Grid, { item: true, xs: 6 }),
+                        React.createElement(Grid, { item: true, xs: 6 })))))));
+}
+export default Demo;

package/dist/DemoField.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { FormFieldProps } from './model';
+export declare function DemoField(props: FormFieldProps): React.JSX.Element;

package/dist/DemoField.js

@@ -0,0 +1,87 @@
+/*
+ * Copyright ish group pty ltd 2023.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useMemo, useState } from 'react';
+import { stubFunction } from './utils';
+import { CheckboxField, CodeEditorField, ColoredCheckBox, EditInPlaceDateTimeField, EditInPlaceDurationField, EditInPlaceField, EditInPlaceFileField, EditInPlaceMoneyField, EditInPlacePhoneField, EditInPlaceSearchSelect, FormSwitch } from './formFields';
+import { TagInputList } from './tagsInput';
+const stubFieldMocks = { input: { onChange: stubFunction, onBlur: stubFunction }, format: null, debounced: null };
+export function DemoField(props) {
+    const { type } = props, rest = __rest(props, ["type"]);
+    const { input, format, debounced = true } = type !== 'stub'
+        ? props
+        : stubFieldMocks;
+    // const currencySymbol = useAppSelector(state => state.currency?.shortCurrencySymbol);
+    // const processActionId = useAppSelector(state => state.fieldProcessing[input?.name]);
+    //
+    // const entity = type === "remoteDataSelect" ? props.entity : null;
+    //
+    // const color = type === "coloredCheckbox" ? props.color : null;
+    //
+    // const rootEntity = type === "aql" ? props.rootEntity : null;
+    //
+    // const tags = type === "tags" ? props.tags : null;
+    const [value, setValue] = useState(undefined);
+    const inputProxy = useMemo(() => (Object.assign(Object.assign({}, input || {}), { value, onChange: e => {
+            const val = (e === null || e === void 0 ? void 0 : e.target) ? e.target.value : e;
+            setValue(format ? format(val) : val);
+        }, onBlur: e => {
+            const val = (e === null || e === void 0 ? void 0 : e.target) ? e.target.value : e;
+            setValue(format ? format(val) : val);
+        } })), [value, input]);
+    const sharedProps = Object.assign(Object.assign(Object.assign({}, rest), debounced ? { input: inputProxy } : {}), { meta: {} });
+    switch (type) {
+        case 'phone':
+            return React.createElement(EditInPlacePhoneField, Object.assign({}, sharedProps));
+        case 'duration':
+            return React.createElement(EditInPlaceDurationField, Object.assign({}, sharedProps));
+        case 'file':
+            return React.createElement(EditInPlaceFileField, Object.assign({}, sharedProps));
+        case 'money':
+            return React.createElement(EditInPlaceMoneyField, Object.assign({}, sharedProps, { currencySymbol: "$" }));
+        case 'select':
+            return React.createElement(EditInPlaceSearchSelect, Object.assign({}, sharedProps));
+        case 'number':
+            return React.createElement(EditInPlaceField, Object.assign({}, sharedProps, { type: "number" }));
+        case 'date':
+            return React.createElement(EditInPlaceDateTimeField, Object.assign({}, sharedProps, { type: "date" }));
+        case 'time':
+            return React.createElement(EditInPlaceDateTimeField, Object.assign({}, sharedProps, { type: "time" }));
+        case 'dateTime':
+            return React.createElement(EditInPlaceDateTimeField, Object.assign({}, sharedProps, { type: "datetime" }));
+        case 'code':
+            return React.createElement(CodeEditorField, Object.assign({}, sharedProps));
+        case 'coloredCheckbox':
+            return React.createElement(ColoredCheckBox, Object.assign({}, sharedProps, { color: "red" }));
+        case 'password':
+            return React.createElement(EditInPlaceField, Object.assign({}, sharedProps, { type: "password" }));
+        case 'switch':
+            return React.createElement(FormSwitch, Object.assign({}, sharedProps));
+        case 'checkbox':
+            return React.createElement(CheckboxField, Object.assign({}, sharedProps));
+        case 'multilineText':
+            return React.createElement(EditInPlaceField, Object.assign({}, sharedProps, { multiline: true }));
+        case 'stub':
+            return React.createElement("div", { className: "invisible" });
+        case 'tags':
+            return React.createElement(TagInputList, Object.assign({}, sharedProps, { tags: [] }));
+        case 'text':
+        default:
+            return React.createElement(EditInPlaceField, Object.assign({}, sharedProps));
+    }
+}

package/dist/actions/FieldProcessing.d.ts

@@ -0,0 +1,10 @@
+export declare const START_FIELD_PROCESSING_ACTION = "add/field/processing/action";
+export declare const END_FIELD_PROCESSING_ACTION = "remove/field/processing/action";
+export declare const startFieldProcessingAction: (id: string) => {
+    type: string;
+    payload: string;
+};
+export declare const endFieldProcessingAction: (id: string) => {
+    type: string;
+    payload: string;
+};

package/dist/actions/FieldProcessing.js

@@ -0,0 +1,17 @@
+/*
+ * Copyright ish group pty ltd 2023.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+export const START_FIELD_PROCESSING_ACTION = 'add/field/processing/action';
+export const END_FIELD_PROCESSING_ACTION = 'remove/field/processing/action';
+export const startFieldProcessingAction = (id) => ({
+    type: START_FIELD_PROCESSING_ACTION,
+    payload: id
+});
+export const endFieldProcessingAction = (id) => ({
+    type: END_FIELD_PROCESSING_ACTION,
+    payload: id
+});

package/dist/actions/index.d.ts

@@ -0,0 +1 @@
+export * from './FieldProcessing';

package/dist/actions/index.js

@@ -0,0 +1,8 @@
+/*
+ * Copyright ish group pty ltd 2023.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+export * from './FieldProcessing';

package/dist/appBar/AppBarHelpMenu.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const _default: React.JSXElementConstructor<Omit<any, "classes"> & import("@mui/styles").StyledComponentProps<"button" | "info" | "divider">>;
+export default _default;

package/dist/appBar/AppBarHelpMenu.js

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { withStyles, createStyles } from '@mui/styles';
+import clsx from 'clsx';
+import HelpOutline from '@mui/icons-material/HelpOutline';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Tooltip from '@mui/material/Tooltip';
+import { format as formatDate } from 'date-fns';
+import { III_DD_MMM_YYYY_HH_MM_SPECIAL, openInternalLink } from '../utils';
+const styles = theme => createStyles({
+    button: {
+        color: theme.appBarButton.helpMenu.color,
+    },
+    info: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'baseline',
+        padding: theme.spacing(1, 2, 0, 2)
+    },
+    divider: {
+        marginTop: theme.spacing(2),
+        borderTop: `1px solid ${theme.palette.divider}`
+    }
+});
+class AppBarHelpMenu extends React.Component {
+    constructor(props) {
+        super(props);
+        this.handleAddFieldClick = e => {
+            this.setState({ anchorEl: e.currentTarget });
+        };
+        this.handleClose = () => {
+            this.setState({ anchorEl: null });
+        };
+        this.openManual = () => {
+            window.open(this.props.manualUrl);
+            this.handleClose();
+        };
+        this.openAudits = () => {
+            openInternalLink('/' + this.props.auditsUrl);
+            this.handleClose();
+        };
+        this.state = {
+            anchorEl: null
+        };
+    }
+    render() {
+        const { anchorEl } = this.state;
+        const { classes, created, modified, iconClasses, auditsUrl } = this.props;
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Menu, { id: "form-help-menu", anchorEl: anchorEl, open: Boolean(anchorEl), onClose: this.handleClose, marginThreshold: 16, transformOrigin: {
+                    vertical: 'center',
+                    horizontal: 'right'
+                } },
+                created && (React.createElement(MenuItem, { disabled: true, className: classes.info },
+                    React.createElement(Typography, { variant: "caption" }, "Created"),
+                    React.createElement(Typography, { variant: "subtitle1" }, typeof created === 'object' && isFinite(created)
+                        ? formatDate(created, III_DD_MMM_YYYY_HH_MM_SPECIAL)
+                        : '---- ---- ---- ---- ----'))),
+                modified && (React.createElement(MenuItem, { disabled: true, className: classes.info },
+                    React.createElement(Typography, { variant: "caption" }, "Modified"),
+                    React.createElement(Typography, { variant: "subtitle1" }, typeof modified === 'object' && isFinite(modified)
+                        ? formatDate(modified, III_DD_MMM_YYYY_HH_MM_SPECIAL)
+                        : '---- ---- ---- ---- ----'))),
+                React.createElement(MenuItem, { className: created || modified ? classes.divider : undefined, onClick: this.openManual }, "Open manual"),
+                auditsUrl && (React.createElement(MenuItem, { onClick: this.openAudits }, "View audit trail"))),
+            React.createElement(Tooltip, { title: "Additional information" },
+                React.createElement("div", null,
+                    React.createElement(IconButton, { type: "button", "aria-owns": anchorEl ? 'form-help-menu' : null, "aria-haspopup": "true", onClick: this.handleAddFieldClick, size: "large", className: clsx({
+                            [classes.button]: !iconClasses,
+                            [iconClasses]: !!iconClasses
+                        }) },
+                        React.createElement(HelpOutline, null))))));
+    }
+}
+export default withStyles(styles)(AppBarHelpMenu);

package/dist/appBar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AppBarHelpMenu';
+export { default as AppBarHelpMenu } from './AppBarHelpMenu';

package/dist/appBar/index.js

@@ -0,0 +1,9 @@
+/*
+ * Copyright ish group pty ltd 2023.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+export * from './AppBarHelpMenu';
+export { default as AppBarHelpMenu } from './AppBarHelpMenu';

package/dist/buttons/AddButton.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { IconButtonProps, IconButtonPropsColorOverrides, IconButtonPropsSizeOverrides } from '@mui/material/IconButton';
+import { OverridableStringUnion } from '@mui/types';
+interface Props extends Partial<IconButtonProps> {
+    onClick?: any;
+    className?: any;
+    disabled?: boolean;
+    iconClassName?: any;
+    iconFontSize?: 'inherit' | 'large' | 'medium' | 'small';
+    color?: OverridableStringUnion<'inherit' | 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', IconButtonPropsColorOverrides>;
+    size?: OverridableStringUnion<'small' | 'medium' | 'large', IconButtonPropsSizeOverrides>;
+}
+declare const AddButton: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<any>>;
+export default AddButton;

package/dist/buttons/AddButton.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
+import IconButton from '@mui/material/IconButton';
+const AddButton = React.forwardRef((props, ref) => {
+    const { onClick, className, disabled, iconClassName, iconFontSize, color, size } = props;
+    return (React.createElement(IconButton, { color: color, size: size, onClick: onClick, className: className, disabled: disabled, ref: ref },
+        React.createElement(AddCircleOutlineOutlinedIcon, { className: iconClassName || 'addButtonColor', fontSize: iconFontSize || 'small' })));
+});
+export default AddButton;

package/dist/buttons/TimetableButton.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const TimetableButton: React.FC<any>;
+export default TimetableButton;

package/dist/buttons/TimetableButton.js

@@ -0,0 +1,12 @@
+/*
+ * Copyright ish group pty ltd. All rights reserved. https://www.ish.com.au
+ * No copying or use of this code is allowed without permission in writing from ish.
+ */
+import React from 'react';
+import OpenInNew from '@mui/icons-material/OpenInNew';
+import IconButton from '@mui/material/IconButton';
+const TimetableButton = ({ title = 'Timetable', onClick }) => (React.createElement("div", { className: "centeredFlex" },
+    React.createElement("div", { className: "heading" }, title),
+    React.createElement(IconButton, { size: "small", color: "primary", onClick: onClick },
+        React.createElement(OpenInNew, { fontSize: "inherit" }))));
+export default TimetableButton;

package/dist/buttons/index.d.ts

@@ -0,0 +1,4 @@
+export * from './AddButton';
+export * from './TimetableButton';
+export { default as AddButton } from './AddButton';
+export { default as TimetableButton } from './TimetableButton';

package/dist/buttons/index.js

@@ -0,0 +1,11 @@
+/*
+ * Copyright ish group pty ltd 2023.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+export * from './AddButton';
+export * from './TimetableButton';
+export { default as AddButton } from './AddButton';
+export { default as TimetableButton } from './TimetableButton';

package/dist/colorPicker/ColorPicker.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { PopperPlacementType, Theme } from '@mui/material';
+import { FieldInputProps } from '../model';
+interface ColorPickerWrapperProps {
+    input?: FieldInputProps;
+    classes?: any;
+    theme?: Theme;
+    placement?: PopperPlacementType;
+}
+declare const _default: React.JSXElementConstructor<Omit<ColorPickerWrapperProps, "theme" | "classes"> & import("@mui/styles").StyledComponentProps<never>>;
+export default _default;

package/dist/colorPicker/ColorPicker.js

@@ -0,0 +1,132 @@
+/*
+ * Copyright ish group pty ltd 2022.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import ButtonBase from '@mui/material/ButtonBase';
+import Popper from '@mui/material/Popper';
+import { AlphaPicker, HuePicker } from 'react-color';
+import { createStyles, withStyles } from '@mui/styles';
+import { ClickAwayListener } from '@mui/base';
+import Paper from '@mui/material/Paper';
+import Grow from '@mui/material/Grow';
+import clsx from 'clsx';
+import { stopEventPropagation } from '../utils/events';
+const styles = createStyles(({ spacing, transitions, palette, zIndex }) => ({
+    paper: {
+        width: 200,
+        padding: spacing(2),
+        position: 'relative',
+        bottom: '12px',
+        background: palette.background.paper,
+        '&:after': {
+            bottom: '0px',
+            left: '50%',
+            width: '22px',
+            height: '10px',
+            position: 'absolute',
+            transform: 'translateX(-50%)',
+            background: palette.background.paper,
+            content: '\'\'',
+            zIndex: 1
+        },
+        '&:before': {
+            content: '\'\'',
+            bottom: '-6px',
+            left: '50%',
+            width: '12px',
+            height: '12px',
+            position: 'absolute',
+            transform: 'translateX(-50%) rotate(45deg)',
+            background: palette.background.paper,
+            boxShadow: '1px 1px 2px 0px rgba(0,0,0,0.2), 2px 1px 2px -1px rgba(0,0,0,0.12), 1px 1px 1px 0px rgba(0,0,0,0.12);'
+        }
+    },
+    paperPlaceBottom: {
+        marginTop: spacing(3),
+        '&:after': {
+            bottom: 'unset',
+            top: '0px'
+        },
+        '&:before': {
+            bottom: 'unset',
+            top: '-6px',
+        }
+    },
+    colorPickerButton: {
+        width: '14px',
+        height: '14px',
+        borderRadius: '100%',
+        transition: transitions.create('transform', {
+            duration: transitions.duration.shorter,
+            easing: transitions.easing.easeInOut
+        }),
+        '&:hover,&$opened': {
+            transform: 'scale(2)'
+        }
+    },
+    popper: {
+        zIndex: zIndex.tooltip
+    },
+    bottomOffset: {
+        marginBottom: spacing(1.25)
+    },
+    customAlfa: {
+        '& > div > div:first-child > div': {
+            background: 'none !important'
+        }
+    },
+    opened: {}
+}));
+const ColorPickerBase = React.memo(({ classes, color, input: { value, onChange }, TransitionProps, setAnchorEl, placement }) => {
+    const [hueColor, setHueColor] = useState(color);
+    const [alfaColor, setAlfaColor] = useState(color);
+    const hueRef = useRef();
+    const onHueChange = useCallback(color => {
+        setHueColor(color.hsv);
+        setAlfaColor(color.hsv);
+    }, []);
+    const onAlfaChange = useCallback(color => {
+        setHueColor({
+            h: color.hsv.h, s: color.hsv.a, v: color.hsv.v, a: 1
+        });
+        setAlfaColor(color.hsv);
+    }, []);
+    const handleClickAway = useCallback(() => {
+        setAnchorEl(null);
+    }, []);
+    useEffect(() => {
+        if (!hueColor && value) {
+            setHueColor('#' + value);
+        }
+    }, [value, hueColor]);
+    useEffect(() => {
+        const hueHsv = hueRef.current.state.hsv;
+        setAlfaColor({
+            h: hueHsv.h, s: 1, v: hueHsv.v, a: hueHsv.s
+        });
+    }, [hueRef.current]);
+    const onChangeComplete = () => {
+        onChange(hueRef.current.state.hex.replace('#', ''));
+    };
+    return (React.createElement(ClickAwayListener, { onClickAway: handleClickAway },
+        React.createElement(Grow, Object.assign({}, TransitionProps, { timeout: 200 }),
+            React.createElement("div", null,
+                React.createElement(Paper, { className: clsx(classes.paper, placement === 'bottom' && classes.paperPlaceBottom) },
+                    React.createElement(HuePicker, { ref: hueRef, color: hueColor, onChange: onHueChange, onChangeComplete: onChangeComplete, width: "168", className: classes.bottomOffset }),
+                    React.createElement(AlphaPicker, { className: classes.customAlfa, color: alfaColor, width: "168", onChange: onAlfaChange, onChangeComplete: onChangeComplete }))))));
+});
+const ColorPickerWrapper = React.memo(({ classes, theme, input, placement = 'top' }) => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const handleClick = useCallback((event) => {
+        setAnchorEl(anchorEl ? null : event.currentTarget);
+    }, [anchorEl]);
+    const color = useMemo(() => (input.value ? '#' + input.value : theme.palette.primary.main), [theme, input.value]);
+    return (React.createElement("div", { className: "d-flex", onClick: stopEventPropagation },
+        React.createElement(ButtonBase, { onClick: handleClick, className: clsx(classes.colorPickerButton, anchorEl && classes.opened), style: { backgroundColor: color } }),
+        React.createElement(Popper, { open: Boolean(anchorEl), anchorEl: anchorEl, placement: placement, className: classes.popper, transition: true }, ({ TransitionProps }) => (React.createElement(ColorPickerBase, { classes: classes, color: color, input: input, TransitionProps: TransitionProps, setAnchorEl: setAnchorEl, placement: placement })))));
+});
+export default withStyles(styles, { withTheme: true })(ColorPickerWrapper);

package/dist/colorPicker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ColorPicker';
+export { default as ColorPicker } from './ColorPicker';

package/dist/colorPicker/index.js

@@ -0,0 +1,9 @@
+/*
+ * Copyright ish group pty ltd 2023.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+export * from './ColorPicker';
+export { default as ColorPicker } from './ColorPicker';

package/dist/dev.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/dev.js

@@ -0,0 +1,9 @@
+/*
+ * Copyright ish group pty ltd. All rights reserved. https://www.ish.com.au
+ * No copying or use of this code is allowed without permission in writing from ish.
+ */
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import Demo from './Demo';
+const root = createRoot(document.getElementById('dev-demo'));
+root.render(React.createElement(Demo, null));

package/dist/dialog/BrowserWarning.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const isOldIE: () => boolean;
+export declare const BrowserWarning: () => React.JSX.Element;

package/dist/dialog/BrowserWarning.js

@@ -0,0 +1,16 @@
+import { Alert } from '@mui/lab';
+import * as React from 'react';
+const BROWSER_WARNING_TEXT = 'Your current browser is not supported. Please ensure you are using an up to date version of Chrome, Firefox or Edge.';
+export const isOldIE = () => {
+    const ua = window.navigator.userAgent;
+    const msie = ua.indexOf('MSIE ');
+    return msie !== -1;
+};
+export const BrowserWarning = () => isOldIE() && (React.createElement("div", { style: {
+        position: 'fixed',
+        bottom: '50vh',
+        left: '35vw',
+        right: '35vw',
+        zIndex: 10000
+    } },
+    React.createElement(Alert, { variant: "filled", severity: "error" }, BROWSER_WARNING_TEXT)));

package/dist/dialog/confirm/ConfirmBase.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Common confirm dialog
+ * */
+import React from 'react';
+import { ConfirmState } from '../../model';
+declare const ConfirmBase: React.FunctionComponent<ConfirmState>;
+export default ConfirmBase;

package/dist/dialog/confirm/ConfirmBase.js

@@ -0,0 +1,29 @@
+/*
+ * Copyright ish group pty ltd 2023.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+/**
+ * Common confirm dialog
+ * */
+import React from 'react';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+const ConfirmBase = props => {
+    const { open, onCancel, title, confirmMessage, onConfirm, cancelButtonText, confirmButtonText, onCancelCustom, confirmCustomComponent } = props;
+    return (React.createElement(Dialog, { open: open, onClose: onCancel },
+        title && React.createElement(DialogTitle, { id: "alert-dialog-title" }, title),
+        confirmMessage && (React.createElement(DialogContent, null,
+            React.createElement(DialogContentText, { id: "alert-dialog-description" }, confirmMessage))),
+        React.createElement(DialogActions, null,
+            React.createElement(Button, { onClick: onCancelCustom || onCancel, color: "primary" }, cancelButtonText),
+            onConfirm && !confirmCustomComponent && (React.createElement(Button, { onClick: () => onConfirm(), variant: "contained", color: "primary" }, confirmButtonText)),
+            confirmCustomComponent && confirmCustomComponent)));
+};
+export default ConfirmBase;

package/dist/dialog/index.d.ts

@@ -0,0 +1,5 @@
+export * from './message/Message';
+export * from './confirm/ConfirmBase';
+export * from './BrowserWarning';
+export { default as Message } from './message/Message';
+export { default as ConfirmBase } from './confirm/ConfirmBase';