ish-ui 1.0.19 → 1.0.21

package/dist/formFields/SelectCustomComponents.js

@@ -0,0 +1,182 @@
+/*
+ * 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 useTheme from '@mui/styles/useTheme';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import React from 'react';
+import ListSubheader from '@mui/material/ListSubheader';
+import InfiniteLoader from 'react-window-infinite-loader';
+import { areEqual, FixedSizeList as List } from 'react-window';
+import { createStyles } from '@mui/styles';
+import { green } from '@mui/material/colors';
+import clsx from 'clsx';
+import { ListItem } from '@mui/material';
+import Tooltip from '@mui/material/Tooltip';
+export const selectStyles = theme => createStyles({
+    bottomMargin: {
+        marginBottom: `${theme.spacing(1) + 1}`
+    },
+    bottomPadding: {
+        paddingBottom: `${theme.spacing(1) + 1}`
+    },
+    topMargin: {
+        marginTop: `${theme.spacing(1)}`,
+        paddingLeft: '0'
+    },
+    editIcon: {
+        fontSize: '24px',
+        color: theme.palette.divider,
+        verticalAlign: 'middle',
+        margin: 0
+    },
+    editable: {
+        '&:hover': {
+            color: theme.palette.primary.main,
+            fill: theme.palette.primary.main
+        }
+    },
+    label: {
+        whiteSpace: 'nowrap',
+        '&$valid': {
+            color: green[500]
+        }
+    },
+    valid: {},
+    autoWidthSelect: {
+        width: 'calc(100% + 30px)'
+    },
+    emptySelect: {
+        color: '#fff'
+    },
+    error: {
+        color: theme.palette.error.main
+    },
+    validUnderline: {
+        '&:after': {
+            borderBottomColor: green[500]
+        }
+    },
+    menuItem: {
+        '&:hover .placeholderContent': {
+            color: '#fff'
+        },
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+    },
+    menuItemActive: {
+        '& .placeholderContent': {
+            color: '#fff'
+        }
+    },
+    menuList: {
+        background: theme.palette.background.paper,
+        borderRadius: theme.shape.borderRadius,
+    },
+    readonly: {
+        fontWeight: 300,
+        pointerEvents: 'none'
+    },
+    multiple: {},
+    inline: {
+        display: 'inline-block',
+        '& .MuiInput-root .MuiInput-input': {
+            padding: 0
+        },
+        '& $inputEndAdornment': {
+            marginBottom: '-8px'
+        }
+    },
+    root: {
+        '& $multiple': {
+            flexWrap: 'wrap'
+        },
+        '& $multiple $inputEndAdornment': {
+            position: 'absolute',
+            right: 0,
+            bottom: 6,
+            height: 'auto'
+        }
+    },
+    inputEndAdornment: {
+        marginBottom: '-6px',
+        alignItems: 'center',
+        display: 'flex',
+    },
+    inputWrapper: {
+        '&:hover $inputEndAdornment': {
+            visibility: 'visible'
+        },
+        '&.Mui-focused $expandIcon': {
+            opacity: 1
+        }
+    },
+    expandIcon: { opacity: 0.5 },
+    hasPopup: {
+        '&$root $inputWrapper': {
+            paddingRight: 0
+        },
+        '&$root$hasClear $inputWrapper': {
+            paddingRight: 0
+        }
+    },
+    hasClear: {
+        '&$root $inputWrapper': {
+            paddingRight: 0
+        }
+    },
+});
+export const ListRow = React.memo(({ data: { children, selectAdornment }, index, style }) => {
+    const inlineStyle = Object.assign(Object.assign({}, style), { top: style.top + 8, paddingLeft: 0, paddingRight: 0, whiteSpace: 'nowrap' });
+    return (React.createElement(ListItem, { button: true, style: inlineStyle }, (((selectAdornment === null || selectAdornment === void 0 ? void 0 : selectAdornment.position) === 'start' && index === 0)
+        || ((selectAdornment === null || selectAdornment === void 0 ? void 0 : selectAdornment.position) === 'end' && index === children.length))
+        ? selectAdornment.content
+        : children[index]));
+}, areEqual);
+const OuterElementContext = React.createContext({});
+const OuterElementType = React.forwardRef((props, ref) => {
+    const outerProps = React.useContext(OuterElementContext);
+    return React.createElement("div", Object.assign({ ref: ref }, props, outerProps));
+});
+export const ListboxComponent = React.forwardRef((props, ref) => {
+    const { children, rowHeight, remoteRowCount, loadMoreRows, classes, loading, selectAdornment, fieldClasses } = props, other = __rest(props, ["children", "rowHeight", "remoteRowCount", "loadMoreRows", "classes", "loading", "selectAdornment", "fieldClasses"]);
+    const itemData = { selectAdornment, children: React.Children.toArray(children) };
+    const theme = useTheme();
+    const smUp = useMediaQuery(theme.breakpoints.up('sm'), { noSsr: true });
+    const itemSize = rowHeight || (smUp ? 36 : 48);
+    const itemCount = (remoteRowCount > children.length ? children.length + 3 : children.length) + (selectAdornment ? 1 : 0);
+    const getChildSize = child => {
+        if (React.isValidElement(child) && child.type === ListSubheader) {
+            return 48;
+        }
+        return itemSize;
+    };
+    const getHeight = () => {
+        if (itemCount > 8) {
+            return 8 * itemSize;
+        }
+        return itemData.children.map(getChildSize).reduce((a, b) => a + b, 0);
+    };
+    const loadMoreItems = () => (loading ? undefined : loadMoreRows(itemData.children.length));
+    const isItemLoaded = index => index < (children.length + (selectAdornment ? 1 : 0));
+    return (React.createElement("div", { ref: ref },
+        React.createElement(OuterElementContext.Provider, { value: other },
+            React.createElement(InfiniteLoader, { isItemLoaded: isItemLoaded, itemCount: itemCount, loadMoreItems: loadMoreItems }, ({ onItemsRendered }) => (React.createElement(List, { height: getHeight() + 2 * 8, width: "100%", className: clsx(classes.menuList, fieldClasses.selectMenu), itemData: itemData, outerElementType: OuterElementType, onItemsRendered: onItemsRendered, itemSize: itemSize, itemCount: itemCount }, ListRow))))));
+});
+export const NoWrapOption = (content, data, search, parentProps) => (React.createElement("div", Object.assign({}, parentProps || {}),
+    React.createElement(Tooltip, { title: content },
+        React.createElement("div", { className: "text-nowrap text-truncate" }, content))));

package/dist/formFields/Switch.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Wrapper component for Material UI button
+ * */
+import React from 'react';
+import { FieldInputProps, FormSwitchProps } from '../model';
+export declare const Switch: React.JSXElementConstructor<Omit<any, "classes"> & import("@mui/styles").StyledComponentProps<"default" | "icon" | "bar" | "inline" | "disabled" | "checked" | "root" | "focusVisible">>;
+export declare function FormSwitch<InputProps extends FieldInputProps>({ input, color, disabled, stringValue, label, className, inline, onChangeHandler, onClick }: FormSwitchProps<InputProps>): React.JSX.Element;

package/dist/formFields/Switch.js

@@ -0,0 +1,116 @@
+/*
+ * 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;
+};
+/**
+ * Wrapper component for Material UI button
+ * */
+import React, { useCallback } from 'react';
+import MuiSwitch from '@mui/material/Switch';
+import Typography from '@mui/material/Typography';
+import { createStyles, withStyles } from '@mui/styles';
+import clsx from 'clsx';
+const getValue = value => {
+    switch (value) {
+        case 'false':
+            return false;
+        case 'true':
+            return true;
+        default:
+            return value;
+    }
+};
+const styles = theme => createStyles({
+    bar: {
+        height: '22px',
+        borderRadius: '12px',
+        marginTop: '2px',
+        marginLeft: '-7px',
+        width: '38px'
+    },
+    checked: {
+        '&$disabled + $bar ': {
+            opacity: 0.12
+        }
+    },
+    icon: {
+        boxShadow: theme.shadows[1],
+        backgroundColor: theme.palette.common.white
+    },
+    root: {
+        alignItems: 'center',
+        '&$disabled': {
+            opacity: 0.12
+        }
+    },
+    inline: {
+        marginLeft: '-12px'
+    },
+    default: {
+        top: theme.spacing(0.5),
+        height: theme.spacing(4),
+        width: theme.spacing(4),
+        padding: 0,
+        '&$disabled': {
+            color: theme.palette.common.white
+        },
+        '&$checked': {
+            transform: `translateX(${theme.spacing(2)})`
+        },
+        '&$checked + $bar': {
+            opacity: 1
+        },
+        '&$checked$disabled + $bar': {
+            backgroundColor: theme.palette.primary.main,
+            opacity: 0.6
+        }
+    },
+    focusVisible: {
+        background: 'red'
+    },
+    disabled: {}
+});
+const SwitchBase = props => {
+    const { classes, color = 'primary', inline, checked } = props, custom = __rest(props, ["classes", "color", "inline", "checked"]);
+    return (React.createElement(MuiSwitch, Object.assign({ color: color, checked: Boolean(checked), classes: {
+            track: classes.bar,
+            root: clsx(classes.root, { [classes.inline]: inline }),
+            checked: classes.checked,
+            thumb: classes.icon,
+            switchBase: classes.default,
+            disabled: classes.disabled
+        } }, custom)));
+};
+export const Switch = withStyles(styles)(SwitchBase);
+export function FormSwitch({ input, color, disabled, stringValue, label, className, inline, onChangeHandler, onClick }) {
+    const onChange = useCallback((e, value) => {
+        let checked = value;
+        if (stringValue) {
+            checked = checked.toString();
+        }
+        if (typeof onChangeHandler === 'function') {
+            onChangeHandler(e, checked);
+        }
+        if (!e.isDefaultPrevented()) {
+            input.onChange(checked);
+        }
+    }, [stringValue, input, onChangeHandler]);
+    return (React.createElement(React.Fragment, null,
+        label && (React.createElement(Typography, { variant: "caption", color: "textSecondary" },
+            React.createElement("label", { htmlFor: `input-${input.name}` }, label))),
+        React.createElement(Switch, { checked: getValue(input.value), onClick: onClick, onChange: onChange, color: color, disabled: disabled, className: className, inline: inline, id: `input-${input.name}`, name: input.name })));
+}

package/dist/formFields/TextField.d.ts

@@ -0,0 +1,6 @@
+/**
+* Wrapper component for Material Text Field
+* */
+import * as React from 'react';
+export declare const TextField: React.JSXElementConstructor<Omit<any, "classes"> & import("@mui/styles").StyledComponentProps<"textField"> & object>;
+export declare const FormTextField: (props: any) => React.JSX.Element;

package/dist/formFields/TextField.js

@@ -0,0 +1,42 @@
+/*
+* 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;
+};
+/**
+* Wrapper component for Material Text Field
+* */
+import * as React from 'react';
+import { withStyles } from '@mui/styles';
+import MuiTextField from '@mui/material/TextField';
+const styles = theme => ({
+    textField: {
+        marginLeft: theme.spacing(1),
+        marginRight: theme.spacing(1)
+    }
+});
+class TextInput extends React.Component {
+    render() {
+        const _a = this.props, { classes, onChange, id, margin = 'dense' } = _a, props = __rest(_a, ["classes", "onChange", "id", "margin"]);
+        return (React.createElement(MuiTextField, Object.assign({ name: props.id, onChange: e => onChange(e.target.value, id), margin: margin }, props, { variant: "standard" })));
+    }
+}
+export const TextField = withStyles(styles)(TextInput);
+// Form field text component creator
+export const FormTextField = props => {
+    const { input, meta: { error, invalid, touched }, helperText, inputRef } = props, custom = __rest(props, ["input", "meta", "helperText", "inputRef"]);
+    return (React.createElement(TextField, Object.assign({ error: touched && invalid, inputRef: inputRef, helperText: (touched && error) || helperText, fullWidth: true }, input, custom)));
+};

package/dist/formFields/UneditableBase.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface UneditableProps {
+    value: string | number;
+    label: string;
+    labelAdornment?: any;
+    url?: string;
+    currencySymbol?: string;
+    money?: boolean;
+    multiline?: boolean;
+    rightAligned?: boolean;
+    className?: string;
+    placeholder?: string;
+    error?: string;
+    format?: (value: any) => any;
+}
+declare const UneditableBase: React.NamedExoticComponent<UneditableProps>;
+export default UneditableBase;

package/dist/formFields/UneditableBase.js

@@ -0,0 +1,48 @@
+/*
+ * 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.
+ */
+import clsx from 'clsx';
+import React, { useCallback } from 'react';
+import { FormControl, FormHelperText, Input, InputLabel } from '@mui/material';
+import InputAdornment from '@mui/material/InputAdornment';
+import { makeAppStyles } from '../styles';
+import { LinkAdornment } from './FieldAdornments';
+import { formatCurrency, openInternalLink } from '../utils';
+const useStyles = makeAppStyles({
+    rightAlignedLabel: {
+        left: 'unset',
+        right: 0,
+        transformOrigin: '100% 0'
+    }
+});
+const UneditableBase = React.memo(props => {
+    const { label, labelAdornment, placeholder = 'No value', rightAligned, value, url, money, currencySymbol, className, format, multiline, error } = props;
+    const classes = useStyles();
+    const inputId = `input-${label.toLowerCase().replace(' ', '-')}`;
+    const openLink = useCallback(() => {
+        openInternalLink(url);
+    }, [url]);
+    return (React.createElement(FormControl, { className: clsx(className, money && 'money'), error: Boolean(error), variant: "standard", fullWidth: true },
+        React.createElement(InputLabel, { shrink: true, classes: {
+                root: rightAligned ? classes.rightAlignedLabel : null
+            }, htmlFor: inputId },
+            label,
+            url && React.createElement(LinkAdornment, { link: url, className: "pl-0-5", clickHandler: openLink }),
+            labelAdornment && (React.createElement("span", { className: "pl-0-5" },
+                labelAdornment,
+                ' '))),
+        React.createElement(Input, { id: inputId, startAdornment: money && React.createElement(InputAdornment, { position: "start" }, currencySymbol), value: money
+                ? formatCurrency(value, '')
+                : value
+                    ? (format
+                        ? (format(value))
+                        : (value)) : (''), multiline: multiline, placeholder: placeholder, inputProps: {
+                className: rightAligned && 'text-end'
+            }, disabled: true }),
+        React.createElement(FormHelperText, null, error)));
+});
+export default UneditableBase;

package/dist/formFields/index.d.ts

@@ -0,0 +1,31 @@
+export * from './CheckboxField';
+export * from './CodeEditorField';
+export * from './ColoredCheckBox';
+export * from './DateTimeField';
+export * from './EditInPlaceDateTimeField';
+export * from './EditInPlaceDurationField';
+export * from './EditInPlaceField';
+export * from './EditInPlaceFieldBase';
+export * from './EditInPlaceFileField';
+export * from './EditInPlaceMoneyField';
+export * from './EditInPlacePhoneField';
+export * from './EditInPlaceSearchSelect';
+export * from './FieldAdornments';
+export * from './FilePreview';
+export * from './FormRadioButtons';
+export * from './SelectCustomComponents';
+export * from './Switch';
+export * from './TextField';
+export * from './UneditableBase';
+export { default as CodeEditorField } from './CodeEditorField';
+export { default as EditInPlaceDateTimeField } from './EditInPlaceDateTimeField';
+export { default as EditInPlaceDurationField } from './EditInPlaceDurationField';
+export { default as EditInPlaceField } from './EditInPlaceField';
+export { default as EditInPlaceFieldBase } from './EditInPlaceFieldBase';
+export { default as EditInPlaceFileField } from './EditInPlaceFileField';
+export { default as EditInPlaceMoneyField } from './EditInPlaceMoneyField';
+export { default as EditInPlacePhoneField } from './EditInPlacePhoneField';
+export { default as EditInPlaceSearchSelect } from './EditInPlaceSearchSelect';
+export { default as FilePreview } from './FilePreview';
+export { default as FormRadioButtons } from './FormRadioButtons';
+export { default as UneditableBase } from './UneditableBase';

package/dist/formFields/index.js

@@ -0,0 +1,38 @@
+/*
+ * 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 './CheckboxField';
+export * from './CodeEditorField';
+export * from './ColoredCheckBox';
+export * from './DateTimeField';
+export * from './EditInPlaceDateTimeField';
+export * from './EditInPlaceDurationField';
+export * from './EditInPlaceField';
+export * from './EditInPlaceFieldBase';
+export * from './EditInPlaceFileField';
+export * from './EditInPlaceMoneyField';
+export * from './EditInPlacePhoneField';
+export * from './EditInPlaceSearchSelect';
+export * from './FieldAdornments';
+export * from './FilePreview';
+export * from './FormRadioButtons';
+export * from './SelectCustomComponents';
+export * from './Switch';
+export * from './TextField';
+export * from './UneditableBase';
+export { default as CodeEditorField } from './CodeEditorField';
+export { default as EditInPlaceDateTimeField } from './EditInPlaceDateTimeField';
+export { default as EditInPlaceDurationField } from './EditInPlaceDurationField';
+export { default as EditInPlaceField } from './EditInPlaceField';
+export { default as EditInPlaceFieldBase } from './EditInPlaceFieldBase';
+export { default as EditInPlaceFileField } from './EditInPlaceFileField';
+export { default as EditInPlaceMoneyField } from './EditInPlaceMoneyField';
+export { default as EditInPlacePhoneField } from './EditInPlacePhoneField';
+export { default as EditInPlaceSearchSelect } from './EditInPlaceSearchSelect';
+export { default as FilePreview } from './FilePreview';
+export { default as FormRadioButtons } from './FormRadioButtons';
+export { default as UneditableBase } from './UneditableBase';

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+export * from './actions';
+export * from './appBar';
+export * from './buttons';
+export * from './colorPicker';
+export * from './dialog';
+export * from './documents';
+export * from './dynamicSizeList';
+export * from './fieldMessage';
+export * from './fileUploader';
+export * from './formFields';
+export * from './layout';
+export * from './markdownEditor';
+export * from './model';
+export * from './styles';
+export * from './tagsInput';
+export * from './themes';
+export * from './utils';
+export * from './timetable';

package/dist/index.js

@@ -0,0 +1,25 @@
+/*
+ * 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 './actions';
+export * from './appBar';
+export * from './buttons';
+export * from './colorPicker';
+export * from './dialog';
+export * from './documents';
+export * from './dynamicSizeList';
+export * from './fieldMessage';
+export * from './fileUploader';
+export * from './formFields';
+export * from './layout';
+export * from './markdownEditor';
+export * from './model';
+export * from './styles';
+export * from './tagsInput';
+export * from './themes';
+export * from './utils';
+export * from './timetable';

package/dist/layout/InfoPill.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props {
+    label: string;
+    color?: 'success' | 'primary';
+}
+declare const InfoPill: ({ label, color }: Props) => React.JSX.Element;
+export default InfoPill;

package/dist/layout/InfoPill.js

@@ -0,0 +1,26 @@
+/*
+ * 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 { Chip } from '@mui/material';
+import React from 'react';
+import { alpha } from '@mui/material/styles';
+import { makeAppStyles } from '../styles';
+const useStyles = makeAppStyles(theme => ({
+    chip: {
+        textTransform: 'uppercase',
+        fontWeight: 600,
+        fontSize: '12px',
+        marginLeft: theme.spacing(1),
+        color: ({ color }) => theme.palette[color].light,
+        backgroundColor: ({ color }) => alpha(theme.palette[color].light, 0.15)
+    }
+}));
+const InfoPill = ({ label, color = label === 'custom' ? 'primary' : 'success' }) => {
+    const classes = useStyles({ label, color });
+    return React.createElement(Chip, { className: classes.chip, label: label, size: "small" });
+};
+export default InfoPill;

package/dist/layout/index.d.ts

@@ -0,0 +1,4 @@
+export * from './resizable/ResizableWrapper';
+export { default as ResizableWrapper } from './resizable/ResizableWrapper';
+export * from './InfoPill';
+export { default as InfoPill } from './InfoPill';

package/dist/layout/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 './resizable/ResizableWrapper';
+export { default as ResizableWrapper } from './resizable/ResizableWrapper';
+export * from './InfoPill';
+export { default as InfoPill } from './InfoPill';

package/dist/layout/resizable/ResizableWrapper.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+interface Props {
+    sidebarWidth: number;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    onResizeStop?: any;
+    onResize?: any;
+    classes?: any;
+    className?: any;
+    ignoreScreenWidth?: boolean;
+    children?: any;
+}
+declare const _default: React.FC<Props>;
+export default _default;

package/dist/layout/resizable/ResizableWrapper.js

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Resizable } from 're-resizable';
+import { withStyles, createStyles } from '@mui/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import clsx from 'clsx';
+const LIST_SIDE_BAR_DEFAULT_WIDTH = 265;
+const styles = (theme) => createStyles({
+    sideBar: {
+        borderRight: `1px solid ${theme.palette.divider}`,
+        display: 'flex',
+        paddingRight: '1px',
+        '&.d-none': {
+            display: 'none'
+        }
+    },
+    sideBarWrapper: {
+        overflowX: 'hidden',
+        overflowY: 'auto',
+        flex: 1
+    },
+    line: {
+        height: '100%',
+        width: '2px',
+        transition: 'background 120ms ease-in-out',
+    },
+    resizeLine: {
+        zIndex: theme.zIndex.drawer,
+        display: 'flex',
+        justifyContent: 'center',
+        '&:active $line, &:hover $line': {
+            background: `${theme.palette.secondary.main}`,
+            overflow: 'visible'
+        }
+    }
+});
+const ResizableWrapper = (props) => {
+    const { classes, onResizeStop, onResize, sidebarWidth, minWidth, maxWidth, children, className, ignoreScreenWidth } = props;
+    return useMediaQuery('(min-width:992px)') || ignoreScreenWidth ? (React.createElement(Resizable, { size: { width: sidebarWidth, height: '100%' }, minWidth: minWidth || LIST_SIDE_BAR_DEFAULT_WIDTH, maxWidth: maxWidth, onResizeStop: onResizeStop, onResize: onResize, enable: { right: true }, className: clsx(classes.sideBar, className), handleClasses: { right: classes.resizeLine }, handleComponent: { right: React.createElement("div", { className: props.classes.line }) } },
+        React.createElement("div", { className: classes.sideBarWrapper }, children))) : (children);
+};
+const wrapped = withStyles(styles)(ResizableWrapper);
+export default wrapped;