@fixefy/fixefy-ui-components 0.0.5 → 0.0.7

package/dist-cjs/FxNotes/operations/queries.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ME = void 0;
+const tslib_1 = require("tslib");
+const graphql_tag_1 = tslib_1.__importDefault(require("graphql-tag"));
+exports.ME = (0, graphql_tag_1.default) `
+  query ME {
+    me {
+      _id
+      username
+      first_name
+      last_name
+      email
+      workspaces {
+        ...InsideWorkspace
+      }
+    }
+  }
+
+  fragment InsideWorkspace on Workspace {
+    _id
+    title
+  }
+`;

package/dist-cjs/FxNotes/styles/notes.styles.jsx

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledPopover = exports.CommentDesc = exports.CommentDate = exports.CommentUserTitle = exports.UserComment = exports.StyledAvatar = exports.CommentInput = exports.CommentWrapper = exports.UserCommentWrapper = exports.CommentsScrollWrapper = exports.CommentsWrapper = exports.CommentsContainer = void 0;
+const tslib_1 = require("tslib");
+const Popover_1 = tslib_1.__importDefault(require("@mui/material/Popover"));
+const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
+require("@fixefy/fxutils.page_context");
+exports.CommentsContainer = (0, styles_1.styled)('div')(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    marginTop: 16,
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+}));
+exports.CommentsWrapper = (0, styles_1.styled)('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'flex-start',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    width: '100%',
+}));
+exports.CommentsScrollWrapper = (0, styles_1.styled)('div')(({ theme }) => ({
+    maxHeight: 170,
+    overflow: 'auto',
+    width: '100%',
+}));
+exports.UserCommentWrapper = (0, styles_1.styled)('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'flex-start',
+    marginTop: 16,
+    '&:first-of-type': {
+        marginTop: 0,
+    },
+}));
+exports.CommentWrapper = (0, styles_1.styled)('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    marginBottom: 16,
+}));
+exports.CommentInput = (0, styles_1.styled)('input')(({ theme }) => ({
+    background: theme.palette.common.white,
+    border: '1px solid #F0F0F0',
+    borderRadius: '4px',
+    height: 36,
+    padding: '0 16px',
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    fontSize: 14,
+    lineHeight: '20px',
+    letterSpacing: '0.15px',
+    color: '#172326',
+    width: '100%',
+    '&::focus-visible': {
+        outline: 'unset',
+    },
+}));
+exports.StyledAvatar = (0, styles_1.styled)(material_1.Avatar)(({ theme }) => ({
+    width: 32,
+    height: 32,
+    border: `2px solid ${theme.palette.common.white}`,
+    marginRight: '8px',
+    fontFamily: 'Open Sans',
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    fontSize: 14,
+    lineHeight: '20px',
+    letterSpacing: '0.15px',
+}));
+exports.UserComment = (0, styles_1.styled)('div')(({ theme }) => ({
+    background: theme.palette.greyscale.contrastText,
+    border: '1px solid #F0F0F0',
+    borderRadius: '4px',
+    padding: '8px 16px',
+    minWidth: 300,
+    display: 'flex',
+    alignItems: 'flex-start',
+    flexDirection: 'column',
+    justifyContent: 'center',
+}));
+exports.CommentUserTitle = (0, styles_1.styled)('div')(({ theme }) => ({
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    fontSize: 11,
+    lineHeight: '16px',
+    letterSpacing: '0.15px',
+    color: '#172326',
+}));
+exports.CommentDate = (0, styles_1.styled)('div')(({ theme }) => ({
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    fontSize: 11,
+    lineHeight: '16px',
+    letterSpacing: '0.15px',
+    color: '#898989',
+}));
+exports.CommentDesc = (0, styles_1.styled)('div')(({ theme }) => ({
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    fontSize: 14,
+    lineHeight: '20px',
+    letterSpacing: '0.15px',
+    color: '#172326',
+}));
+exports.StyledPopover = (0, styles_1.styled)(Popover_1.default)(({ theme }) => ({
+    position: 'absolute',
+    right: 12,
+    width: 80,
+    height: 16,
+    background: '#F7F7F7',
+    borderRadius: 4,
+    fontFamily: 'Open Sans',
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    fontSize: 11,
+    lineHeight: '16px',
+    letterSpacing: '0.1px',
+    color: theme.palette.primary.light,
+}));

package/dist-cjs/FxNumberField/FxNumberField.jsx

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FxNumberField = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const number_field_styles_1 = require("./styles/number_field.styles");
+const KeyboardArrowRight_1 = tslib_1.__importDefault(require("@mui/icons-material/KeyboardArrowRight"));
+function FxNumberField({ placeholder, defaultValue, label, hint, onChange }) {
+    const _classes = (0, number_field_styles_1.useStyles)();
+    const [value, setValue] = (0, react_1.useState)(defaultValue || 0);
+    (0, react_1.useEffect)(() => {
+        onChange && onChange(value);
+    }, [value]);
+    return (<div className={_classes.container}>
+      {label && <span className={_classes.label}>{label}</span>}
+      <div className={_classes.inputWrapper}>
+        <input type="number" placeholder={placeholder} value={value} onChange={(e) => setValue(e.target.value)}/>
+        <div className={_classes.inputActions}>
+          <button className={_classes.inputActionsPlus} onClick={() => setValue(value + 1)}>
+            <KeyboardArrowRight_1.default />
+          </button>
+          <button className={_classes.inputActionsMinus} onClick={() => setValue(value - 1)}>
+            <KeyboardArrowRight_1.default />
+          </button>
+        </div>
+      </div>
+      {hint && <span className={_classes.hint}>{hint}</span>}
+    </div>);
+}
+exports.FxNumberField = FxNumberField;

package/dist-cjs/FxNumberField/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Numberfield = void 0;
+var FxNumberField_1 = require("./FxNumberField");
+Object.defineProperty(exports, "Numberfield", { enumerable: true, get: function () { return FxNumberField_1.FxNumberField; } });

package/dist-cjs/FxNumberField/styles/number_field.styles.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+const styles_1 = require("@mui/styles");
+exports.useStyles = (0, styles_1.makeStyles)(() => ({
+    container: {},
+    label: {
+        fontFamily: 'Open Sans',
+        fontStyle: 'normal',
+        fontWeight: 'normal',
+        fontSize: 11,
+        lineHeight: '16px',
+        letterSpacing: 0.1,
+        color: '#505050',
+    },
+    hint: {
+        fontStyle: 'normal',
+        fontWeight: 'normal',
+        fontSize: 11,
+        lineHeight: '16px',
+        display: 'flex',
+        alignItems: 'center',
+        letterSpacing: 0.1,
+        color: '#8A8A8A',
+    },
+    inputWrapper: {
+        background: '#FFFFFF',
+        border: '1px solid #EEEEEE',
+        borderRadius: 5,
+        height: 40,
+        display: 'flex',
+        width: 'fit-content',
+        ['& input']: {
+            border: 'none',
+            paddingLeft: 10,
+            borderRadius: 5,
+            ['&:focus-visible']: {
+                outline: 'none',
+            },
+            ['&::-webkit-inner-spin-button']: {
+                '-webkit-appearance': 'none',
+            },
+            ['&::-webkit-outer-spin-button']: {
+                '-webkit-appearance': 'none',
+            },
+        },
+    },
+    inputActions: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    inputActionsPlus: {
+        cursor: 'pointer',
+        background: '#FFFFFF',
+        height: '50%',
+        padding: 0,
+        width: 36,
+        border: 'none',
+        borderLeft: '1px solid #EEEEEE',
+        borderBottom: '1px solid #EEEEEE',
+        borderRadius: '0 5px 0 0',
+        color: '#568793',
+        ['& svg']: {
+            transform: 'rotate(270deg)',
+            width: 20,
+            height: 20,
+        },
+    },
+    inputActionsMinus: {
+        cursor: 'pointer',
+        background: '#FFFFFF',
+        height: '50%',
+        padding: 0,
+        width: 36,
+        border: 'none',
+        borderLeft: '1px solid #EEEEEE',
+        borderRadius: '0 0 5px 0',
+        color: '#568793',
+        ['& svg']: {
+            transform: 'rotate(90deg)',
+            width: 20,
+            height: 20,
+        },
+    },
+}));

package/dist-cjs/FxProgressCircle/FxProgressCircle.jsx

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressCircle = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const progress_circle_styles_1 = require("./styles/progress_circle.styles");
+function ProgressCircle({ radius = 70, border = 70, value, hasLabel = true, max = 100, color, type = 'progress' }) {
+    const _value = value ? value / max : 0;
+    const p = 2 * Math.PI * (radius - border / 2);
+    const strokeWidth = border;
+    const strokeDashoffset = p * (1 - _value);
+    const strokeDasharray = p;
+    const label = type === 'progress' ? `${value}/${max}` : `${value.toFixed()}%`;
+    return (<progress_circle_styles_1.Container>
+      {hasLabel && type === 'progress' && <progress_circle_styles_1.Label>{label}</progress_circle_styles_1.Label>}
+      <progress_circle_styles_1.Slider viewBox={`0 0 ${radius * 2} ${radius * 2}`}>
+        <progress_circle_styles_1.SliderCircle style={{ strokeWidth }} r={radius - border / 2} cx={radius} cy={radius} color={color}/>
+
+        <progress_circle_styles_1.SliderBar style={{
+            strokeWidth,
+            strokeDashoffset,
+            strokeDasharray,
+        }} r={radius - border / 2} cx={radius} cy={radius} color={color}/>
+      </progress_circle_styles_1.Slider>
+      {hasLabel && type === 'percentage' && <progress_circle_styles_1.Label sx={{ ml: 1 }}>{label}</progress_circle_styles_1.Label>}
+    </progress_circle_styles_1.Container>);
+}
+exports.ProgressCircle = ProgressCircle;

package/dist-cjs/FxProgressCircle/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressCircle = void 0;
+var FxProgressCircle_1 = require("./FxProgressCircle");
+Object.defineProperty(exports, "ProgressCircle", { enumerable: true, get: function () { return FxProgressCircle_1.ProgressCircle; } });

package/dist-cjs/FxProgressCircle/styles/progress_circle.styles.jsx

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SliderBar = exports.SliderCircle = exports.Slider = exports.Label = exports.Container = void 0;
+const styles_1 = require("@mui/material/styles");
+exports.Container = (0, styles_1.styled)("div")(({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+}));
+exports.Label = (0, styles_1.styled)("span")(({ theme }) => (Object.assign(Object.assign({}, theme.typography.body1), { color: theme.palette.typography.title, marginRight: 8 })));
+exports.Slider = (0, styles_1.styled)("svg")(({ theme }) => ({
+    display: "block",
+    width: 22,
+    height: 22,
+    transform: "rotate(-90deg)",
+}));
+exports.SliderCircle = (0, styles_1.styled)("circle")(({ theme, color }) => ({
+    fill: "transparent",
+    stroke: color !== null && color !== void 0 ? color : theme.palette.green2scale.main,
+    opacity: 0.1,
+}));
+exports.SliderBar = (0, styles_1.styled)("circle")(({ theme, color }) => ({
+    fill: "transparent",
+    stroke: color !== null && color !== void 0 ? color : theme.palette.green2scale.main,
+    strokeDashoffset: 0,
+    strokeDasharray: 0,
+}));

package/dist-cjs/FxProgressCounter/ProgressCounter.jsx

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FxProgressCounter = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const material_1 = require("@mui/material");
+const fxutils_images_1 = require("@fixefy/fxutils.images");
+const progress_counter_styles_1 = require("./styles/progress_counter.styles");
+const image_1 = tslib_1.__importDefault(require("next/image"));
+function FxProgressCounter(_a) {
+    var _b, _c;
+    var { values, structure, filter } = _a, rest = tslib_1.__rest(_a, ["values", "structure", "filter"]);
+    const initialValues = {
+        count: (_b = values === null || values === void 0 ? void 0 : values.count) !== null && _b !== void 0 ? _b : 0,
+        current: (_c = values === null || values === void 0 ? void 0 : values.current) !== null && _c !== void 0 ? _c : 0,
+    };
+    const normalizeNumber = (number) => {
+        return (number / initialValues.count) * 100;
+    };
+    return (<progress_counter_styles_1.Container>
+      
+      <material_1.Box position={'relative'} textAlign={'center'} justifyContent={'center'} mt={1.2}>
+        <image_1.default alt={'approve'} width={16} height={16} loader={() => (0, fxutils_images_1.imageLoader)({
+            root: 'https://cdn-dev.fixefy.me/',
+            src: 'invoices/approve-small-white.svg',
+        })} src={'invoices/approve-small-white.svg'} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
+
+        <material_1.Box mt={0.5}>
+          <material_1.Typography fontSize={19} fontWeight={600}>
+            {initialValues.current}/{initialValues.count}
+          </material_1.Typography>
+        </material_1.Box>
+
+        <material_1.Typography fontSize={11} sx={{ opacity: 0.6 }}>
+          Charges
+        </material_1.Typography>
+      </material_1.Box>
+
+      <progress_counter_styles_1.ProgressContainer>
+        <progress_counter_styles_1.MainBar variant="determinate" value={normalizeNumber(initialValues.current)} color={'inherit'} {...rest}/>
+        <progress_counter_styles_1.BackgroundBar variant="determinate" value={initialValues.count > 100 ? 100 : initialValues.count} color={'inherit'} {...rest}/>
+      </progress_counter_styles_1.ProgressContainer>
+    </progress_counter_styles_1.Container>);
+}
+exports.FxProgressCounter = FxProgressCounter;

package/dist-cjs/FxProgressCounter/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FxProgressCounter = void 0;
+var ProgressCounter_1 = require("./ProgressCounter");
+Object.defineProperty(exports, "FxProgressCounter", { enumerable: true, get: function () { return ProgressCounter_1.FxProgressCounter; } });

package/dist-cjs/FxProgressCounter/styles/progress_counter.styles.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Container = exports.ProgressContainer = exports.BackgroundBar = exports.MainBar = exports.BaseProgress = void 0;
+const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
+exports.BaseProgress = (0, styles_1.styled)(material_1.LinearProgress)(({ theme }) => ({
+    borderRadius: '8px',
+    width: '70%',
+    position: 'absolute',
+    zIndex: 2,
+    height: 3,
+}));
+exports.MainBar = (0, styles_1.styled)(exports.BaseProgress)(({ theme }) => ({
+    opacity: 1,
+}));
+exports.BackgroundBar = (0, styles_1.styled)(exports.BaseProgress)(({ theme }) => ({
+    opacity: 0.2,
+}));
+exports.ProgressContainer = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    alignItems: 'center',
+    display: 'flex',
+    width: '100%',
+    margin: '8px 0',
+    position: 'relative',
+    justifyContent: 'center',
+}));
+exports.Container = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    width: 104,
+    height: 104,
+    minWidth: 104,
+    maxWidth: 104,
+    borderRadius: 8,
+    position: 'relative',
+    color: theme.palette.common.white,
+    backgroundColor: theme.palette.score.excellent,
+}));

package/dist-cjs/FxShowMore/FxShowMore.jsx

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShowMore = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const material_1 = require("@mui/material");
+const show_more_styles_1 = require("./styles/show_more.styles");
+const KeyboardArrowDown_1 = tslib_1.__importDefault(require("@mui/icons-material/KeyboardArrowDown"));
+function ShowMore({ items, label, children, title }) {
+    const [anchorEl, setAnchorEl] = react_1.default.useState(null);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const open = Boolean(anchorEl);
+    const id = open ? 'simple-popover' : undefined;
+    return (<show_more_styles_1.ShowMoreWrapper>
+      {children}
+
+      <show_more_styles_1.ShowMoreBtn onClick={handleClick}>
+        <show_more_styles_1.ShowMoreIcon isOpen={open}>
+          <KeyboardArrowDown_1.default />
+        </show_more_styles_1.ShowMoreIcon>
+        {title ? title : 'SHOW MORE'}
+      </show_more_styles_1.ShowMoreBtn>
+
+      <show_more_styles_1.StyledPopover id={id} open={open} anchorEl={anchorEl} onClose={handleClose} anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'center',
+        }} transformOrigin={{
+            vertical: 'top',
+            horizontal: 'center',
+        }}>
+        <show_more_styles_1.StyledLabel>
+          {label} ({items.length})
+        </show_more_styles_1.StyledLabel>
+        <show_more_styles_1.StyledDivider />
+        {items === null || items === void 0 ? void 0 : items.map((item, index) => (<div key={index}>
+            <material_1.Typography variant="body1">{item}</material_1.Typography>
+            {index + 1 !== items.length && <show_more_styles_1.StyledDivider />}
+          </div>))}
+      </show_more_styles_1.StyledPopover>
+    </show_more_styles_1.ShowMoreWrapper>);
+}
+exports.ShowMore = ShowMore;

package/dist-cjs/FxShowMore/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShowMore = void 0;
+var FxShowMore_1 = require("./FxShowMore");
+Object.defineProperty(exports, "ShowMore", { enumerable: true, get: function () { return FxShowMore_1.ShowMore; } });

package/dist-cjs/FxShowMore/styles/show_more.styles.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledLabel = exports.StyledDivider = exports.StyledPopover = exports.ShowMoreIcon = exports.ShowMoreBtn = exports.ShowMoreWrapper = void 0;
+const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
+exports.ShowMoreWrapper = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    borderRadius: '8px',
+}));
+exports.ShowMoreBtn = (0, styles_1.styled)(material_1.Button)(({ theme }) => (Object.assign(Object.assign({}, theme.typography.button), { fontWeight: 600, fontSize: 12, textTransform: 'uppercase', color: theme.palette.primary[800], padding: 0, display: 'flex', justifyContent: 'flex-start', alignItems: 'center' })));
+exports.ShowMoreIcon = (0, styles_1.styled)(material_1.Box)(({ theme, isOpen }) => ({
+    width: 16,
+    height: 16,
+    color: theme.palette.primary[800],
+    borderRadius: '50%',
+    border: '1px solid',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 8,
+    ['& svg']: {
+        width: 14,
+        height: 14,
+        color: theme.palette.primary[800],
+        transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+        transition: 'all 0.5s',
+    },
+}));
+exports.StyledPopover = (0, styles_1.styled)(material_1.Popover)(({ theme }) => ({
+    ['.MuiPaper-root']: {
+        background: theme.palette.common.white,
+        boxShadow: '0px 0px 10px rgba(86, 135, 147, 0.3)',
+        borderRadius: 8,
+        padding: 24,
+        marginTop: 8,
+        minWidth: 226,
+        maxWidth: 328,
+    },
+}));
+exports.StyledDivider = (0, styles_1.styled)(material_1.Divider)(({ theme }) => ({
+    marginTop: 8,
+    marginBottom: 8,
+}));
+exports.StyledLabel = (0, styles_1.styled)(material_1.Typography)(({ theme }) => (Object.assign(Object.assign({}, theme.typography.overLineCaption), { color: '#8B9092' })));

package/dist-cjs/FxSlider/FxSlider.jsx

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slider = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const material_1 = require("@mui/material");
+function Slider(props) {
+    return <material_1.Slider {...props}/>;
+}
+exports.Slider = Slider;

package/dist-cjs/FxSlider/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slider = void 0;
+var FxSlider_1 = require("./FxSlider");
+Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return FxSlider_1.Slider; } });

package/dist-cjs/FxStatusBar/FxStatusBar.jsx

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusBar = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const material_1 = require("@mui/material");
+const FxChip_1 = require("../FxChip");
+const constants_1 = require("./helpers/constants");
+const fixefy_ui_utils_1 = require("@fixefy/fixefy-ui-utils");
+const statusBar_styles_1 = require("./styles/statusBar.styles");
+const StatusBar = ({ onChangeStatus, onSearch, defaultStatus, title, options, chipsVariant = 'filled' }) => {
+    const [selectedStatus, setSelectedStatus] = (0, react_1.useState)([]);
+    const [searchValue, setSearchValue] = (0, react_1.useState)('');
+    (0, react_1.useEffect)(() => {
+        if (defaultStatus) {
+            typeof defaultStatus === 'string' ? setSelectedStatus([defaultStatus]) : setSelectedStatus(defaultStatus);
+        }
+        else {
+            setSelectedStatus(['all']);
+        }
+    }, [defaultStatus]);
+    const onStatusClick = (status) => {
+        if (status === 'all') {
+            setSelectedStatus(() => {
+                if (selectedStatus.includes(status)) {
+                    return [];
+                }
+                else {
+                    return ['all'];
+                }
+            });
+        }
+        else {
+            setSelectedStatus((prevState) => {
+                if (selectedStatus.includes(status)) {
+                    const rv = prevState.filter((_status) => _status !== status && _status !== 'all');
+                    return rv.length == 0 ? ['all'] : rv;
+                }
+                else {
+                    const rv = prevState.filter((_status) => _status !== status && _status !== 'all');
+                    return [...rv, status];
+                }
+            });
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        onChangeStatus(selectedStatus);
+    }, [selectedStatus]);
+    (0, react_1.useEffect)(() => {
+        onSearch && onSearch(searchValue);
+    }, [searchValue]);
+    const __options = options !== null && options !== void 0 ? options : constants_1.statuses;
+    return (<statusBar_styles_1.StatusBarCard>
+      {title && <statusBar_styles_1.StatusBarTitle style={{ marginRight: '8px' }}>{(0, fixefy_ui_utils_1.titleCase)(title)}</statusBar_styles_1.StatusBarTitle>}
+
+      <material_1.Stack direction="row" spacing={1}>
+        <statusBar_styles_1.StatusChipStyled onClick={() => onStatusClick('all')} label="All" variant={selectedStatus.includes('all') ? 'filled' : 'outlined'}/>
+        {Object.keys(__options).map((key, index) => {
+            return <FxChip_1.FxChip onClick={() => onStatusClick(__options[key])} key={index} label={(0, fixefy_ui_utils_1.titleCase)(key)} variant={chipsVariant} status={selectedStatus.includes(__options[key]) ? __options[key] : ''}/>;
+        })}
+      </material_1.Stack>
+    </statusBar_styles_1.StatusBarCard>);
+};
+exports.StatusBar = StatusBar;

package/dist-cjs/FxStatusBar/helpers/constants.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.statuses = void 0;
+exports.statuses = {
+    Declined: 'declined',
+    Pending: 'pending',
+    Approved: 'approved',
+    Active: 'active',
+    Challenge: 'challenged',
+    in_review: 'in_review',
+    Discrepancy: 'discrepancy',
+    no_pricing: 'no_pricing',
+    in_progress: 'in_progress',
+    Duplicated: 'duplicated',
+};

package/dist-cjs/FxStatusBar/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusBar = void 0;
+var FxStatusBar_1 = require("./FxStatusBar");
+Object.defineProperty(exports, "StatusBar", { enumerable: true, get: function () { return FxStatusBar_1.StatusBar; } });