@darajs/ui-components 0.4.8

package/dist/chat/chat.js

@@ -0,0 +1,182 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Copyright 2023 Impulse Innovations Limited
+ *
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { isEqual } from 'lodash';
+import { nanoid } from 'nanoid';
+import * as React from 'react';
+import styled from '@darajs/styled-components';
+import { PaperPlane, Xmark } from '@darajs/ui-icons';
+import Button from '../button/button';
+import TextArea from '../textarea/textarea';
+import { default as MessageComponent } from './message';
+const ChatWrapper = styled.div `
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    width: ${(props) => (props.$isPopup ? '350px' : '100%')};
+    height: ${(props) => (props.$isPopup ? 'calc(100vh - 2rem)' : '100%')};
+    padding: 1.5rem;
+
+    background-color: ${(props) => (props.$isPopup ? `${props.theme.colors.background}e6` : 'inherit')};
+    border-radius: ${(props) => (props.$isPopup ? '0.4rem' : 0)};
+    box-shadow: ${(props) => props.theme.shadow.medium};
+`;
+const ReplyWrapper = styled.div `
+    display: flex;
+    gap: 0.5rem;
+    align-items: end;
+    margin-top: auto;
+`;
+const ReplyButtons = styled.div `
+    display: flex;
+    gap: 1rem;
+    align-items: end;
+`;
+const ChatBody = styled.div `
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    max-height: calc(100% - 6.225rem);
+    margin: -0.25rem;
+    padding: 0.25rem;
+`;
+const ChatTop = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    width: 100%;
+    height: 1.625rem;
+
+    font-size: 1.2rem;
+`;
+const CloseIcon = styled(Xmark) `
+    height: 1.2rem;
+    color: ${(props) => props.theme.colors.grey4};
+
+    :hover {
+        color: ${(props) => props.theme.colors.grey5};
+    }
+
+    :active {
+        color: ${(props) => props.theme.colors.grey6};
+    }
+`;
+/**
+ * A function to scroll to the bottom of the chat so that the latest message is visible
+ */
+function scrollToBottom(node) {
+    setTimeout(() => {
+        if (node) {
+            node.scrollTop = node.scrollHeight;
+        }
+    }, 100);
+}
+/**
+ * A function to check if the user wrote the message
+ *
+ * @param message - the message to check
+ * @param user - the user to check against
+ */
+function didUserWriteMessage(message, user) {
+    var _a;
+    if (user === null || user === void 0 ? void 0 : user.id) {
+        return ((_a = message.user) === null || _a === void 0 ? void 0 : _a.id) === user.id;
+    }
+    return message.user.name === user.name;
+}
+/**
+ * A chat component
+ *
+ * @param {ChatProps} props - the component props
+ */
+function Chat(props) {
+    var _a, _b, _c;
+    const [reply, setReply] = React.useState('');
+    const [localMessages, setLocalMessages] = React.useState((_a = props.value) !== null && _a !== void 0 ? _a : []);
+    const chatBodyRef = React.useRef(null);
+    const localMessagesRef = React.useRef(localMessages);
+    React.useLayoutEffect(() => {
+        localMessagesRef.current = localMessages;
+    }, [localMessages]);
+    React.useEffect(() => {
+        var _a;
+        if (!isEqual(props.value, localMessagesRef.current)) {
+            setLocalMessages((_a = props.value) !== null && _a !== void 0 ? _a : []);
+            scrollToBottom(chatBodyRef === null || chatBodyRef === void 0 ? void 0 : chatBodyRef.current);
+        }
+    }, [props.value]);
+    const onChangeReply = (text) => {
+        // Prevents the message starting with a newline
+        if (!text.startsWith('\n')) {
+            setReply(text);
+        }
+    };
+    const onSubmitMessage = () => {
+        var _a;
+        if (reply) {
+            // Create a new message
+            const timestamp = new Date().toISOString();
+            const newMessage = {
+                id: nanoid(),
+                // remove any /n and trailing whitespace
+                message: reply.trim(),
+                created_at: timestamp,
+                updated_at: timestamp,
+                user: props.activeUser,
+            };
+            const newMessages = [...localMessages, newMessage];
+            // Add the new message to the chat
+            (_a = props.onUpdate) === null || _a === void 0 ? void 0 : _a.call(props, newMessages);
+            setLocalMessages(newMessages);
+            // Clear the reply field and scroll to the bottom of the chat to show latest message
+            setReply('');
+            scrollToBottom(chatBodyRef === null || chatBodyRef === void 0 ? void 0 : chatBodyRef.current);
+        }
+    };
+    const onEditMessage = (message) => {
+        var _a;
+        // Find the message to edit and replace it with the new message
+        const newMessages = localMessages.map((m) => {
+            if (m.id === message.id) {
+                return message;
+            }
+            return m;
+        });
+        // Update the chat
+        (_a = props.onUpdate) === null || _a === void 0 ? void 0 : _a.call(props, newMessages);
+        setLocalMessages(newMessages);
+    };
+    const onDeleteMessage = (id) => {
+        var _a;
+        // Remove the message with the given id
+        const newMessages = localMessages.filter((message) => message.id !== id);
+        // Update the chat
+        (_a = props.onUpdate) === null || _a === void 0 ? void 0 : _a.call(props, newMessages);
+        setLocalMessages(newMessages);
+    };
+    React.useLayoutEffect(() => {
+        scrollToBottom(chatBodyRef === null || chatBodyRef === void 0 ? void 0 : chatBodyRef.current);
+    }, []);
+    return (_jsxs(ChatWrapper, { className: props.className, style: props.style, "$isPopup": props.isPopup, children: [_jsxs(ChatTop, { children: [_jsx("span", { children: (_b = props.chatTitle) !== null && _b !== void 0 ? _b : 'Chat' }), props.isPopup && _jsx(CloseIcon, { onClick: props.onClose, "aria-label": "Close chat" })] }), _jsxs(ChatBody, { ref: chatBodyRef, role: "log", children: [localMessages.map((message) => (_jsx(MessageComponent, { onChange: onEditMessage, onDelete: onDeleteMessage, value: message, didUserWriteMessage: didUserWriteMessage(message, props.activeUser), isEditable: !props.isHistoryReadonly }, message.id))), props.loadingComponent] }), _jsxs(ReplyWrapper, { children: [_jsx(TextArea, { onChange: onChangeReply, onComplete: onSubmitMessage, placeholder: (_c = props.placeholder) !== null && _c !== void 0 ? _c : 'Add a comment', resize: "none", maxHeight: 6, value: reply, style: { width: '100%' } }), _jsx(ReplyButtons, { children: _jsx(Button, { "aria-label": "Send", style: { height: '3.4rem' }, disabled: !!props.loadingComponent || !(reply.trim().length > 0), onClick: onSubmitMessage, children: _jsx(PaperPlane, { onClick: onSubmitMessage }) }) })] })] }));
+}
+export default Chat;
+//# sourceMappingURL=chat.js.map

package/dist/chat/chat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat.js","sourceRoot":"","sources":["../../src/chat/chat.tsx"],"names":[],"mappings":"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"}

package/dist/chat/message.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { InteractiveComponentProps, Message } from '../types';
+export interface MessageProps extends InteractiveComponentProps<Message> {
+    /** An optional onChange handler for listening to changes in the input */
+    onChange?: (value: Message, e?: React.SyntheticEvent<HTMLInputElement>) => void | Promise<void>;
+    /** An optional event listener for complete events (enter presses) */
+    onDelete?: (id: string) => void | Promise<void>;
+    /** An optional flag to determine if the message is editable */
+    isEditable?: boolean;
+    /** Flag to check if the user wrote the message */
+    didUserWriteMessage?: boolean;
+}
+/**
+ * A function to get the formatted timestamp to display in the submitted message
+ */
+export declare function getFormattedTimestamp(date: string): string;
+/**
+ * A function to porcess the text for the markdown render
+ */
+export declare function processText(text: string): string;
+/**
+ * A Message component that displays a message with a timestamp and allows for editing and deleting
+ *
+ * @param {MessageProps} props - the component props
+ */
+declare function MessageComponent(props: MessageProps): JSX.Element;
+export default MessageComponent;
+//# sourceMappingURL=message.d.ts.map

package/dist/chat/message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../src/chat/message.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,EAAE,yBAAyB,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAwH9D,MAAM,WAAW,YAAa,SAAQ,yBAAyB,CAAC,OAAO,CAAC;IACpE,yEAAyE;IACzE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAChG,qEAAqE;IACrE,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAChD,+DAA+D;IAC/D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kDAAkD;IAClD,mBAAmB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE1D;AAmCD;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAEhD;AAED;;;;GAIG;AACH,iBAAS,gBAAgB,CAAC,KAAK,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CA8G1D;AAED,eAAe,gBAAgB,CAAC"}

package/dist/chat/message.js

@@ -0,0 +1,220 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Copyright 2024 Impulse Innovations Limited
+ *
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { format, parseISO } from 'date-fns';
+import { isEqual } from 'lodash';
+import * as React from 'react';
+import styled, { useTheme } from '@darajs/styled-components';
+import { PenToSquare, Trash } from '@darajs/ui-icons';
+import Button from '../button/button';
+import Markdown from '../markdown/markdown';
+import TextArea from '../textarea/textarea';
+import Tooltip from '../tooltip/tooltip';
+const InteractiveIcons = styled.div `
+    position: absolute;
+    top: 0.75rem;
+    right: 0.75rem;
+
+    display: none;
+    gap: 0.5rem;
+
+    padding: 0.3rem;
+
+    background-color: ${(props) => props.theme.colors.blue1};
+    border-radius: 0.25rem;
+    box-shadow: ${(props) => props.theme.shadow.medium};
+`;
+const MessageWrapper = styled.div `
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+
+    width: 100%;
+    padding: 1rem;
+
+    background-color: ${(props) => props.$messageFromActiveUser ? props.theme.colors.blue2 : props.theme.colors.blue1};
+    border-radius: 0.25rem;
+    box-shadow: ${(props) => props.theme.shadow.medium};
+
+    :hover ${InteractiveIcons} {
+        display: flex;
+    }
+`;
+const MessageTop = styled.div `
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    font-size: 0.875rem;
+`;
+const MessageTimestamp = styled.span `
+    font-size: 0.75rem;
+    color: ${(props) => props.theme.colors.grey5};
+`;
+const MessageBody = styled.div `
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+
+    width: 100%;
+
+    color: ${(props) => props.theme.colors.text};
+    overflow-wrap: break-word;
+`;
+const EditedText = styled.span `
+    align-self: end;
+    font-size: 0.8rem;
+    color: ${(props) => props.theme.colors.grey4};
+`;
+const DeleteIcon = styled(Trash) `
+    cursor: pointer;
+    height: 0.8rem;
+    color: ${(props) => props.theme.colors.secondary};
+
+    :hover {
+        color: ${(props) => props.theme.colors.secondaryHover}CC;
+    }
+
+    :active {
+        color: ${(props) => props.theme.colors.secondaryDown}99;
+    }
+`;
+const EditIcon = styled(PenToSquare) `
+    cursor: pointer;
+    height: 0.8rem;
+    color: ${(props) => props.theme.colors.secondary};
+
+    :hover {
+        color: ${(props) => props.theme.colors.secondaryHover}CC;
+    }
+
+    :active {
+        color: ${(props) => props.theme.colors.secondaryDown}99;
+    }
+`;
+const EditButtons = styled.div `
+    display: flex;
+    gap: 1rem;
+    justify-content: flex-end;
+`;
+const UserInfoWrapper = styled.div `
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+`;
+const AvatarIcon = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 2rem;
+    height: 2rem;
+
+    font-weight: 700;
+    color: white;
+
+    border-radius: 50%;
+`;
+/**
+ * A function to get the formatted timestamp to display in the submitted message
+ */
+export function getFormattedTimestamp(date) {
+    return format(parseISO(date), 'HH:mm dd/MM/yyyy');
+}
+/**
+ * A function to assign a color to user token depending on their name
+ */
+function selectColor(name, colors) {
+    // Convert the name to lowercase for consistency
+    const lowerCaseName = name.toLowerCase();
+    // Calculate the sum of ASCII values of the characters in the name
+    let asciiSum = 0;
+    for (const char of lowerCaseName) {
+        asciiSum += char.charCodeAt(0);
+    }
+    // Use the remainder to select a color
+    const colorIndex = asciiSum % colors.length;
+    return colors[colorIndex];
+}
+/**
+ * A function to get the user's initials
+ */
+function getInitials(name) {
+    const parts = name.trim().split(/\s+/);
+    let initials = parts[0][0];
+    // If there's a second part, add its first character, so we only get two letter initials
+    if (parts.length > 1) {
+        initials += parts[parts.length - 1][0];
+    }
+    return initials.toUpperCase();
+}
+/**
+ * A function to porcess the text for the markdown render
+ */
+export function processText(text) {
+    return text.replace(/\n/g, '\n\n');
+}
+/**
+ * A Message component that displays a message with a timestamp and allows for editing and deleting
+ *
+ * @param {MessageProps} props - the component props
+ */
+function MessageComponent(props) {
+    var _a, _b;
+    const theme = useTheme();
+    const [editMode, setEditMode] = React.useState(false);
+    const [editMessage, setEditMessage] = React.useState(props.value.message);
+    const [localMessage, setLocalMessage] = React.useState(props.value);
+    if (props.value && !isEqual(props.value, localMessage)) {
+        setLocalMessage(props.value);
+    }
+    // List of colors for user token to pick from
+    const tokenColors = [
+        theme.colors.secondary,
+        theme.colors.violet,
+        theme.colors.turquoise,
+        theme.colors.purple,
+        theme.colors.teal,
+        theme.colors.orange,
+        theme.colors.plum,
+    ];
+    const onAccept = () => {
+        // if the message hasn't changed, just close the edit mode
+        if (editMessage === localMessage.message) {
+            setEditMode(false);
+            return;
+        }
+        // remove any /n and trailing whitespace
+        const newMessage = Object.assign(Object.assign({}, localMessage), { message: editMessage.trim(), updated_at: new Date().toISOString() });
+        props === null || props === void 0 ? void 0 : props.onChange(newMessage);
+        setLocalMessage(newMessage);
+        // reset the textarea message to the message without the /n and trailing whitespace
+        setEditMessage(newMessage.message);
+        setEditMode(false);
+    };
+    const onDelete = () => {
+        if (props.onDelete) {
+            props.onDelete(props.value.id);
+        }
+    };
+    return (_jsxs(MessageWrapper, { role: "listitem", className: props.className, style: props.style, "$messageFromActiveUser": props.didUserWriteMessage, children: [_jsxs(MessageTop, { children: [_jsxs(UserInfoWrapper, { children: [_jsx(AvatarIcon, { "aria-hidden": "true", style: {
+                                    backgroundColor: (_a = localMessage.user.color) !== null && _a !== void 0 ? _a : selectColor(localMessage.user.name, tokenColors),
+                                }, children: (_b = localMessage.user.bubbleContent) !== null && _b !== void 0 ? _b : getInitials(localMessage.user.name) }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [localMessage.user.name, _jsx(MessageTimestamp, { children: getFormattedTimestamp(props.value.created_at) })] }), localMessage.updated_at !== localMessage.created_at && (_jsx(Tooltip, { content: getFormattedTimestamp(props.value.updated_at), children: _jsx(EditedText, { children: " (edited)" }) }))] }), !editMode && props.isEditable && props.didUserWriteMessage && (_jsxs(InteractiveIcons, { children: [_jsx(EditIcon, { "aria-label": "Edit message", "data-testid": "message-edit-button", onClick: () => setEditMode(true), role: "button" }), _jsx(DeleteIcon, { "aria-label": "Delete message", "data-testid": "message-delete-button", onClick: onDelete, role: "button" })] }))] }), editMode && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsx(TextArea, { onChange: setEditMessage, resize: "vertical", value: editMessage }), _jsxs(EditButtons, { children: [_jsx(Button, { onClick: () => setEditMode(false), outline: true, children: "Cancel" }), _jsx(Button, { onClick: onAccept, children: "Save" })] })] })), !editMode && (_jsxs(MessageBody, { children: [_jsx(Markdown, { markdown: processText(localMessage.message) }), props.value.actions] }))] }));
+}
+export default MessageComponent;
+//# sourceMappingURL=message.js.map

package/dist/chat/message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message.js","sourceRoot":"","sources":["../../src/chat/message.tsx"],"names":[],"mappings":"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"}

package/dist/checkbox/checkbox-group.d.ts

@@ -0,0 +1,35 @@
+import { Item } from '../types';
+export interface ItemState {
+    state: boolean;
+    value: any;
+}
+export interface CheckboxGroupProps {
+    /** Standard react className property */
+    className?: string;
+    /** Standard react className property */
+    disabled?: boolean;
+    /** Initial checkboxes that should be checked */
+    initialValue?: Array<Item> | Item;
+    /** Whether to show checkboxes in list style */
+    isListStyle?: boolean;
+    /** The items to pick from the list. Each should have a label and a value */
+    items: Array<Item>;
+    /** An optional onChange handler, will be called whenever the state of the checkbox changes */
+    onChange?: (value: Array<Item> | Item, e?: React.FormEvent<HTMLInputElement>) => void | Promise<void>;
+    /** The maximum number of items that can be selected at one time */
+    selectMax?: number;
+    /** The minimum number of items that should be selected */
+    selectMin?: number;
+    /** Default React style prop */
+    style?: React.CSSProperties;
+    /** An optional value field to put the input into a controlled mode */
+    values?: Array<Item>;
+}
+/**
+ * A checkbox group component
+ *
+ * @param {CheckboxGroupProps} props - the component props
+ */
+declare function CheckboxGroup(props: CheckboxGroupProps): JSX.Element;
+export default CheckboxGroup;
+//# sourceMappingURL=checkbox-group.d.ts.map

package/dist/checkbox/checkbox-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.d.ts","sourceRoot":"","sources":["../../src/checkbox/checkbox-group.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhC,MAAM,WAAW,SAAS;IACtB,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,GAAG,CAAC;CACd;AAkBD,MAAM,WAAW,kBAAkB;IAC/B,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,YAAY,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAClC,+CAA+C;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4EAA4E;IAC5E,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtG,mEAAmE;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,sEAAsE;IACtE,MAAM,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;CACxB;AAmBD;;;;GAIG;AACH,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CA0F7D;AAED,eAAe,aAAa,CAAC"}

package/dist/checkbox/checkbox-group.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Copyright 2023 Impulse Innovations Limited
+ *
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useEffect, useMemo, useState } from 'react';
+import styled from '@darajs/styled-components';
+import Checkbox from './checkbox';
+const CheckboxWrapper = styled.div `
+    user-select: none;
+    display: flex;
+    width: 100%;
+    border: none;
+`;
+const CheckboxGroupWrapper = styled.div `
+    color: ${(props) => props.theme.colors.text};
+`;
+const CheckboxInfo = styled.p `
+    font-size: 0.75rem;
+    color: ${(props) => props.theme.colors.grey4};
+`;
+function getInitialValue(initialValue) {
+    if (Array.isArray(initialValue)) {
+        return initialValue;
+    }
+    if (initialValue) {
+        return [initialValue];
+    }
+    return [];
+}
+function getInitialCheckedState(items, initialValues) {
+    if (initialValues) {
+        return items.map((item) => ({ state: initialValues.includes(item.value), value: item.value }));
+    }
+    return items.map((item) => ({ state: initialValues.includes(item.value), value: false }));
+}
+/**
+ * A checkbox group component
+ *
+ * @param {CheckboxGroupProps} props - the component props
+ */
+function CheckboxGroup(props) {
+    const [values, setValues] = useState(() => getInitialValue(props.values || props.initialValue));
+    const [checkedState, setCheckedState] = useState(() => getInitialCheckedState(props.items, values));
+    const isSelectPermitted = useMemo(() => {
+        if (!props.selectMax || values.length < props.selectMax) {
+            return true;
+        }
+        return false;
+    }, [values, props.selectMax]);
+    const infoMessage = useMemo(() => {
+        if (props.selectMax && props.selectMin) {
+            return `You can select from ${props.selectMin} to ${props.selectMax} options`;
+        }
+        if (props.selectMax) {
+            return `You can select up to ${props.selectMax} options`;
+        }
+        if (props.selectMin) {
+            return `You should select at least ${props.selectMin} options`;
+        }
+    }, [props.selectMax, props.selectMin]);
+    const onChangeValue = (event) => {
+        var _a;
+        const target = event.target;
+        const chosenIndex = Number(target.value);
+        const chosenValue = props.items[chosenIndex].value;
+        let newValues = [...values];
+        // find what the new values would be
+        if (values.includes(chosenValue)) {
+            newValues = newValues.filter((value) => value !== chosenValue);
+        }
+        else {
+            newValues.push(chosenValue);
+        }
+        // if new values would result in above the number permitted, only allow to uncheck selected checkboxes
+        // or if values below above permited/unconstrained then allow it to switch states
+        if ((newValues.length > props.selectMax && checkedState[chosenIndex]) ||
+            newValues.length <= props.selectMax ||
+            !props.selectMax) {
+            const indexToUpdate = checkedState.findIndex((item) => item.value === chosenValue);
+            checkedState[indexToUpdate].state = !checkedState[indexToUpdate].state;
+            setCheckedState(checkedState);
+            setValues(newValues);
+            if (!props.selectMin || newValues.length >= props.selectMin) {
+                (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, props.items.filter((item) => newValues.includes(item.value)), event);
+            }
+        }
+    };
+    useEffect(() => {
+        if (props.values) {
+            const valuesArray = props.values.map((value) => value.value);
+            setCheckedState(props.items.map((item) => ({ state: valuesArray.includes(item.value), value: item.value })));
+            setValues(valuesArray);
+        }
+    }, [props.values, props.items]);
+    return (_jsxs(CheckboxGroupWrapper, { className: props.className, style: props.style, children: [(props.selectMax || props.selectMin) && _jsx(CheckboxInfo, { children: infoMessage }), props.items.map((item, index) => {
+                var _a, _b;
+                return (_jsx(CheckboxWrapper, { "aria-disabled": props.disabled, children: _jsx(Checkbox, { disabled: isSelectPermitted ?
+                            props.disabled
+                            : ((_a = checkedState.find((option) => option.value === item.value)) === null || _a === void 0 ? void 0 : _a.state) === false, id: index, isListStyle: props.isListStyle, label: item.label ? item.label : item.value, onChange: (checked, e) => onChangeValue(e), selected: (_b = checkedState.find((option) => option.value === item.value)) === null || _b === void 0 ? void 0 : _b.state }) }, `item-${index}`));
+            })] }));
+}
+export default CheckboxGroup;
+//# sourceMappingURL=checkbox-group.js.map

package/dist/checkbox/checkbox-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.js","sourceRoot":"","sources":["../../src/checkbox/checkbox-group.tsx"],"names":[],"mappings":"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"}

package/dist/checkbox/checkbox.d.ts

@@ -0,0 +1,27 @@
+import { InteractiveComponentProps } from '../types';
+export interface CheckboxProps extends InteractiveComponentProps<boolean> {
+    /** Standard react className property */
+    className?: string;
+    /** Whether the checkbox is disabled. */
+    disabled?: boolean;
+    /** id of the current checkbox */
+    id?: number;
+    /** Whether to show list style of checkbox */
+    isListStyle?: boolean;
+    /** Sets the label to appear next to the checkbox */
+    label?: string;
+    /** An optional onChange handler, will be called whenever the state of the checkbox changes */
+    onChange?: (checked: boolean, e: React.FormEvent<HTMLInputElement>) => void | Promise<void>;
+    /** An optional onCLick handler */
+    onClick?: (e: React.FormEvent<HTMLInputElement>) => void | Promise<void>;
+    /** Setting this puts the checkbox in controlled mode */
+    selected?: boolean;
+}
+/**
+ * A simple checkbox component
+ *
+ * @param {CheckboxProps} props - the component props
+ */
+declare function Checkbox(props: CheckboxProps): JSX.Element;
+export default Checkbox;
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/checkbox/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/checkbox/checkbox.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AA+HrD,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,OAAO,CAAC;IACrE,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iCAAiC;IACjC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6CAA6C;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5F,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzE,wDAAwD;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;GAIG;AACH,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAuCnD;AAED,eAAe,QAAQ,CAAC"}