@darajs/ui-components 0.4.8

package/dist/combo-box/combo-box.js

@@ -0,0 +1,176 @@
+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 { autoUpdate, flip, offset, shift, useFloating, useInteractions, useRole } from '@floating-ui/react';
+import { useCombobox } from 'downshift';
+import React, { useEffect, useMemo, useState } from 'react';
+import ReactDOM from 'react-dom';
+import styled from '@darajs/styled-components';
+import ChevronButton from '../shared/chevron-button';
+import DropdownList from '../shared/dropdown-list';
+import Tooltip from '../tooltip/tooltip';
+import { matchWidthToReference } from '../utils';
+import { syncKbdHighlightIdx } from '../utils/syncKbdHighlightIdx';
+const { stateChangeTypes } = useCombobox;
+export const Wrapper = styled.div `
+    display: inline-flex;
+
+    width: 100%;
+    min-width: 4rem;
+    height: 2.5rem;
+
+    border-radius: ${(props) => (props.isOpen ? '0.25rem 0.25rem 0px 0px' : '0.25rem')};
+
+    ${(props) => {
+    if (props.isDisabled) {
+        return `
+                border: 1px solid ${props.theme.colors.grey2};
+
+                svg {
+                    color: ${props.theme.colors.grey2};
+                }
+            `;
+    }
+    if (props.isErrored) {
+        return `border: 1px solid ${props.theme.colors.error};`;
+    }
+    return `
+            border: 1px solid ${props.isOpen ? props.theme.colors.grey3 : props.theme.colors.grey1};
+            :hover {
+                border: 1px solid ${props.theme.colors.grey3};
+
+            }
+        `;
+}}
+`;
+export const InputWrapper = styled.div `
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    justify-content: space-between;
+
+    width: calc(100% - 1rem);
+    height: 100%;
+    padding: 0 0.25rem 0 1rem;
+
+    color: ${(props) => (props.disabled ? props.theme.colors.grey2 : props.theme.colors.text)};
+
+    background-color: ${(props) => props.theme.colors.grey1};
+    border: none;
+    border-radius: ${(props) => (props.isOpen ? '0.25rem 0.25rem 0px 0px' : '0.25rem')};
+
+    :hover {
+        background-color: ${(props) => (props.disabled ? props.theme.colors.grey1 : props.theme.colors.grey2)};
+    }
+
+    svg {
+        height: 0.8rem;
+    }
+`;
+export const Input = styled.input `
+    overflow: hidden;
+    flex: 1 1 auto;
+
+    height: 100%;
+    margin-right: 0.5rem;
+    padding: 0;
+
+    font-size: ${(props) => (props.size ? `${props.size}rem` : props.theme.font.size)};
+    font-weight: 300;
+    color: ${(props) => props.theme.colors.text};
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    background-color: transparent;
+    border: none;
+    outline: 0;
+
+    :disabled {
+        cursor: not-allowed;
+        color: ${(props) => props.theme.colors.grey2};
+    }
+`;
+/**
+ * A single select combobox component, accepts a list of items to select from and an onSelect handler to listen for
+ * changes. Allows to search for item by typing in combo box.
+ *
+ * @param {ComboBoxProps} props - the component props
+ */
+function ComboBox(props) {
+    var _a, _b, _c, _d, _e, _f;
+    const [inputValue, setInputValue] = useState((_d = (_b = (_a = props.initialValue) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : (_c = props.selectedItem) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : '');
+    const [pendingHighlight, setPendingHighlight] = useState(null);
+    const filteredItems = useMemo(() => props.items.filter((item) => { var _a; return inputValue ? (_a = item.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(inputValue === null || inputValue === void 0 ? void 0 : inputValue.toLowerCase()) : true; }), [inputValue, props.items]);
+    const [kbdHighlightIdx, setKbdHighlightIdx] = React.useState();
+    const { selectedItem, isOpen, getMenuProps, getInputProps, getToggleButtonProps, getItemProps, setHighlightedIndex, } = useCombobox(Object.assign(Object.assign(Object.assign({ initialIsOpen: props.initialIsOpen, initialSelectedItem: (_e = props.initialValue) !== null && _e !== void 0 ? _e : props.selectedItem, itemToString: (item) => (item ? item.label : ''), items: filteredItems, onInputValueChange: (change) => {
+            setInputValue(change.inputValue);
+        }, onSelectedItemChange: (changes) => {
+            var _a, _b;
+            if (props.onSelect) {
+                if ((props.selectedItem && ((_a = changes.selectedItem) === null || _a === void 0 ? void 0 : _a.value) !== ((_b = props.selectedItem) === null || _b === void 0 ? void 0 : _b.value)) ||
+                    !props.selectedItem) {
+                    props.onSelect(changes.selectedItem);
+                }
+            }
+        } }, syncKbdHighlightIdx(setKbdHighlightIdx)), { stateReducer: (state, { changes, type }) => {
+            var _a;
+            // This resets the input when the dropdown is opened
+            if (type === stateChangeTypes.InputFocus ||
+                (type === stateChangeTypes.ToggleButtonClick && changes.isOpen) ||
+                (type === stateChangeTypes.ControlledPropUpdatedSelectedItem && changes.isOpen)) {
+                // This is a hack to change the highlight in the next render cycle so filteredItems had time to update
+                setPendingHighlight(changes.selectedItem ? props.items.findIndex((i) => i.value === changes.selectedItem.value) : 0);
+                return Object.assign(Object.assign({}, changes), { inputValue: '' });
+            }
+            // This restores the input value when the dropdown is closed or an item is picked
+            if ([
+                stateChangeTypes.InputKeyDownEnter,
+                stateChangeTypes.ItemClick,
+                stateChangeTypes.InputBlur,
+                stateChangeTypes.InputKeyDownEscape,
+                stateChangeTypes.ToggleButtonClick,
+            ].includes(type)) {
+                return Object.assign(Object.assign({}, changes), { inputValue: ((_a = changes.selectedItem) === null || _a === void 0 ? void 0 : _a.label) || '' });
+            }
+            return changes;
+        } }), ('selectedItem' in props && { selectedItem: props.selectedItem })));
+    useEffect(() => {
+        if (isOpen && pendingHighlight !== null) {
+            setHighlightedIndex(pendingHighlight);
+            setPendingHighlight(null);
+        }
+    }, [isOpen, pendingHighlight, setHighlightedIndex]);
+    useEffect(() => {
+        if (props.selectedItem === null) {
+            setInputValue('');
+        }
+    }, [props.selectedItem]);
+    const { refs, floatingStyles, context } = useFloating({
+        open: isOpen,
+        middleware: [flip(), shift(), offset({ crossAxis: 1 }), matchWidthToReference(+2)],
+        whileElementsMounted: isOpen ? autoUpdate : undefined,
+    });
+    const dropdownStyle = useMemo(() => (Object.assign(Object.assign({}, floatingStyles), { marginLeft: -1 })), [floatingStyles]);
+    const role = useRole(context, { role: 'combobox' });
+    const { getReferenceProps, getFloatingProps } = useInteractions([role]);
+    return (_jsx(Tooltip, { content: props.errorMsg, disabled: !props.errorMsg, styling: "error", children: _jsxs(Wrapper, { className: props.className, isDisabled: props.disabled, isErrored: !!props.errorMsg, isOpen: isOpen, style: props.style, children: [_jsxs(InputWrapper, { disabled: props.disabled, isOpen: isOpen, ref: refs.setReference, children: [_jsx(Input, Object.assign({}, getInputProps({
+                            disabled: props.disabled,
+                        }), getReferenceProps(), { placeholder: (_f = (selectedItem === null ? props.placeholder : selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label)) !== null && _f !== void 0 ? _f : props.placeholder, size: props.size })), _jsx(ChevronButton, { disabled: props.disabled, isOpen: isOpen, getToggleButtonProps: getToggleButtonProps })] }), ReactDOM.createPortal(_jsx(DropdownList, { items: filteredItems, getItemProps: getItemProps, getFloatingProps: getFloatingProps, style: dropdownStyle, isOpen: isOpen, getMenuProps: getMenuProps, size: props.size, ref: refs.setFloating, selectedItem: selectedItem, kbdHighlightIdx: kbdHighlightIdx }), document.body)] }) }));
+}
+export default ComboBox;
+//# sourceMappingURL=combo-box.js.map

package/dist/combo-box/combo-box.js.map

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

package/dist/component-select-list/component-select-list.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ComponentSelectItem } from '../types';
+export interface ComponentSelectListProps {
+    /** Standard react className property */
+    className?: string;
+    /** The items to display, each should have a title, subtitle and component */
+    items: Array<ComponentSelectItem>;
+    /** An optional prop to specify the number of items per row, 3 by default */
+    itemsPerRow?: number;
+    /** An optional flag for allowing selecting multiple cards, false by default */
+    multiSelect?: boolean;
+    /** An optional onSelect handler for listening to changes in the selected items */
+    onSelect?: (items: Array<string>) => void | Promise<void>;
+    /** The optional selected items, can be an array of titles if multiSelect is true otherwise a title */
+    selectedItems?: Array<string>;
+    /** Pass through of style property to the root element */
+    style?: React.CSSProperties;
+}
+/**
+ * The ComponentSelectList component creates a list of card of selectable cards containing either images or plots.
+ * The plot should be passed as a JSX element.
+ *
+ * @param props the component props
+ */
+declare function ComponentSelectList(props: ComponentSelectListProps): JSX.Element;
+export default ComponentSelectList;
+//# sourceMappingURL=component-select-list.d.ts.map

package/dist/component-select-list/component-select-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-select-list.d.ts","sourceRoot":"","sources":["../../src/component-select-list/component-select-list.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAKhE,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AA6G/C,MAAM,WAAW,wBAAwB;IACrC,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6EAA6E;IAC7E,KAAK,EAAE,KAAK,CAAC,mBAAmB,CAAC,CAAC;IAClC,4EAA4E;IAC5E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,sGAAsG;IACtG,aAAa,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC9B,yDAAyD;IACzD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC/B;AAED;;;;;GAKG;AACH,iBAAS,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,GAAG,GAAG,CAAC,OAAO,CAuCzE;AAED,eAAe,mBAAmB,CAAC"}

package/dist/component-select-list/component-select-list.js

@@ -0,0 +1,131 @@
+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 castArray from 'lodash/castArray';
+import { useCallback, useEffect, useState } from 'react';
+import styled from '@darajs/styled-components';
+import { CheckSquare } from '@darajs/ui-icons';
+const Wrapper = styled.div `
+    overflow: auto;
+    display: grid;
+    grid-template-columns: repeat(${(props) => props.itemsPerRow}, 1fr);
+
+    max-height: 100%;
+    margin: 2rem;
+    padding: 1rem;
+
+    color: ${(props) => props.theme.colors.text};
+
+    background-color: ${(props) => props.theme.colors.grey1};
+    border-radius: 0.25rem;
+`;
+const Card = styled.div `
+    cursor: pointer;
+
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    margin: 1rem;
+    padding: 1rem;
+
+    text-align: center;
+
+    background-color: ${(props) => props.theme.colors.blue1};
+    border: ${(props) => `2px solid ${props.selected ? props.theme.colors.primary : 'transparent'}`};
+    border-radius: 0.25rem;
+
+    :hover {
+        border: ${(props) => `2px solid ${props.selected ? props.theme.colors.primary : props.theme.colors.grey3}`};
+    }
+`;
+const CardTitle = styled.h2 `
+    margin-top: 1rem;
+`;
+const CardSubtitle = styled.h4 `
+    margin-top: 1rem;
+    color: ${(props) => props.theme.colors.grey6};
+`;
+const StyledCheckSquare = styled(CheckSquare) `
+    cursor: pointer;
+
+    position: absolute;
+    z-index: 3;
+    top: 10px;
+    right: 10px;
+
+    color: ${(props) => props.theme.colors.primary};
+`;
+const ComponentWrapper = styled.div `
+    cursor: pointer;
+    display: flex;
+    width: 100%;
+`;
+/**
+ * Helper function to get the index of the selected item in the items array
+ *
+ * @param selectedItems the item that is selected
+ * @param item the array of items to find the index in
+ */
+function getSelectedIndex(selectedItems, item) {
+    return selectedItems.findIndex((selectedItem) => selectedItem === item.title);
+}
+/**
+ * Helper function for updating the selected items once a card is clicked
+ *
+ * @param prevSelections the previously selected card
+ * @param item the currently clicked card
+ * @param multiSelect flag for allowing multi selection
+ */
+function updateSelectedItems(prevSelections, item, multiSelect) {
+    const selectedIndex = getSelectedIndex(prevSelections, item);
+    // Remove from selections if item is already selected
+    if (selectedIndex > -1) {
+        return prevSelections.filter((_, index) => index !== selectedIndex);
+    }
+    // Add to selection if multi-select is allowed
+    if (multiSelect) {
+        return [...prevSelections, item.title];
+    }
+    return [item.title];
+}
+/**
+ * The ComponentSelectList component creates a list of card of selectable cards containing either images or plots.
+ * The plot should be passed as a JSX element.
+ *
+ * @param props the component props
+ */
+function ComponentSelectList(props) {
+    const [selectedCards, setSelectedCards] = useState(props.selectedItems ? castArray(props.selectedItems) : []);
+    useEffect(() => {
+        setSelectedCards(props.selectedItems ? castArray(props.selectedItems) : []);
+    }, [props.selectedItems]);
+    const onClick = useCallback((index) => {
+        var _a;
+        const updatedSelectedCards = updateSelectedItems(selectedCards, props.items[index], props.multiSelect);
+        setSelectedCards(updatedSelectedCards);
+        (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, updatedSelectedCards);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.items, props.multiSelect, selectedCards, setSelectedCards]);
+    return (_jsx(Wrapper, { className: props.className, itemsPerRow: props.itemsPerRow && props.itemsPerRow > 0 ? props.itemsPerRow : 3, style: props.style, children: props.items.map((item, index) => (_jsxs(Card, { onClick: () => onClick(index), selected: getSelectedIndex(selectedCards, item) > -1, children: [getSelectedIndex(selectedCards, item) > -1 && _jsx(StyledCheckSquare, { size: "2x" }), _jsx(ComponentWrapper, { children: item.component }), _jsx(CardTitle, { children: item.title }), item.subtitle && _jsx(CardSubtitle, { children: item.subtitle })] }, `${item.title}-${index}`))) }));
+}
+export default ComponentSelectList;
+//# sourceMappingURL=component-select-list.js.map

package/dist/component-select-list/component-select-list.js.map

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

package/dist/constants.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 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.
+ */
+export declare enum Key {
+    BACKSPACE = "Backspace",
+    CTRL = "Control",
+    DOWN = "ArrowDown",
+    ENTER = "Enter",
+    ESCAPE = "Escape",
+    LEFT = "ArrowLeft",
+    META = "Meta",
+    MINUS = "-",
+    PERIOD = ".",
+    RIGHT = "ArrowRight",
+    SHIFT = "Shift",
+    TAB = "Tab",
+    UP = "ArrowUp"
+}
+export declare const CONTROL_KEYS: string[];
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,oBAAY,GAAG;IACX,SAAS,cAAc;IACvB,IAAI,YAAY;IAChB,IAAI,cAAc;IAClB,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,cAAc;IAClB,IAAI,SAAS;IACb,KAAK,MAAM;IACX,MAAM,MAAM;IACZ,KAAK,eAAe;IACpB,KAAK,UAAU;IACf,GAAG,QAAQ;IACX,EAAE,YAAY;CACjB;AAGD,eAAO,MAAM,YAAY,EAAE,MAAM,EAYhC,CAAC"}

package/dist/constants.js

@@ -0,0 +1,47 @@
+/**
+ * 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.
+ */
+export var Key;
+(function (Key) {
+    Key["BACKSPACE"] = "Backspace";
+    Key["CTRL"] = "Control";
+    Key["DOWN"] = "ArrowDown";
+    Key["ENTER"] = "Enter";
+    Key["ESCAPE"] = "Escape";
+    Key["LEFT"] = "ArrowLeft";
+    Key["META"] = "Meta";
+    Key["MINUS"] = "-";
+    Key["PERIOD"] = ".";
+    Key["RIGHT"] = "ArrowRight";
+    Key["SHIFT"] = "Shift";
+    Key["TAB"] = "Tab";
+    Key["UP"] = "ArrowUp";
+})(Key || (Key = {}));
+// A list of keys for the common controls / modifiers
+export const CONTROL_KEYS = [
+    Key.ESCAPE,
+    Key.TAB,
+    Key.ENTER,
+    Key.BACKSPACE,
+    Key.CTRL,
+    Key.SHIFT,
+    Key.UP,
+    Key.DOWN,
+    Key.LEFT,
+    Key.RIGHT,
+    Key.META,
+];
+//# sourceMappingURL=constants.js.map

package/dist/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAN,IAAY,GAcX;AAdD,WAAY,GAAG;IACX,8BAAuB,CAAA;IACvB,uBAAgB,CAAA;IAChB,yBAAkB,CAAA;IAClB,sBAAe,CAAA;IACf,wBAAiB,CAAA;IACjB,yBAAkB,CAAA;IAClB,oBAAa,CAAA;IACb,kBAAW,CAAA;IACX,mBAAY,CAAA;IACZ,2BAAoB,CAAA;IACpB,sBAAe,CAAA;IACf,kBAAW,CAAA;IACX,qBAAc,CAAA;AAClB,CAAC,EAdW,GAAG,KAAH,GAAG,QAcd;AAED,qDAAqD;AACrD,MAAM,CAAC,MAAM,YAAY,GAAa;IAClC,GAAG,CAAC,MAAM;IACV,GAAG,CAAC,GAAG;IACP,GAAG,CAAC,KAAK;IACT,GAAG,CAAC,SAAS;IACb,GAAG,CAAC,IAAI;IACR,GAAG,CAAC,KAAK;IACT,GAAG,CAAC,EAAE;IACN,GAAG,CAAC,IAAI;IACR,GAAG,CAAC,IAAI;IACR,GAAG,CAAC,KAAK;IACT,GAAG,CAAC,IAAI;CACX,CAAC"}

package/dist/context-menu/context-menu.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export interface MenuAction {
+    action: () => void;
+    label: string;
+}
+export interface ContextMenuProps<T> {
+    /** An array of actions to show in the context menu */
+    actions: Array<MenuAction>;
+    /** Pass through children onto the root element */
+    children?: React.ReactNode;
+    /** Pass through className onto the root element */
+    className?: string;
+    /** Any element props for the root element */
+    elementProps?: T;
+}
+/**
+ * The ContextMenu is a higher order component that wraps another react component and overrides its context menu to be a
+ * custom list of actions, defined by the actions prop.
+ *
+ * @param Component the component to wrap and draw as the root
+ */
+declare function ContextMenu<T>(Component: React.ComponentType<T> | string): (props: ContextMenuProps<T>) => JSX.Element;
+export default ContextMenu;
+//# sourceMappingURL=context-menu.d.ts.map

package/dist/context-menu/context-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.d.ts","sourceRoot":"","sources":["../../src/context-menu/context-menu.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAOnD,MAAM,WAAW,UAAU;IACvB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC;IAC/B,sDAAsD;IACtD,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC3B,kDAAkD;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,CAAC,CAAC;CACpB;AAED;;;;;GAKG;AACH,iBAAS,WAAW,CAAC,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,MAAM,GAAG,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,OAAO,CAgI/G;AAED,eAAe,WAAW,CAAC"}

package/dist/context-menu/context-menu.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, Fragment as _Fragment, 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 { flip, offset, shift, useFloating, useInteractions, useRole } from '@floating-ui/react';
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { Key } from '../constants';
+import DropdownList from '../shared/dropdown-list';
+/**
+ * The ContextMenu is a higher order component that wraps another react component and overrides its context menu to be a
+ * custom list of actions, defined by the actions prop.
+ *
+ * @param Component the component to wrap and draw as the root
+ */
+function ContextMenu(Component) {
+    function WrappedContextMenu(props) {
+        const [showMenu, setShowMenu] = useState(false);
+        // Handle clicking outside the menu or hitting escape and make sure the menu closes.
+        useEffect(() => {
+            const keyHandler = (e) => {
+                if (e.key === Key.ESCAPE) {
+                    setShowMenu(false);
+                }
+            };
+            const mouseHandler = () => {
+                setShowMenu(false);
+            };
+            if (showMenu) {
+                document.addEventListener('keydown', keyHandler);
+                document.addEventListener('click', mouseHandler);
+                document.addEventListener('contextmenu', mouseHandler);
+            }
+            return () => {
+                document.removeEventListener('keydown', keyHandler);
+                document.removeEventListener('click', mouseHandler);
+                document.removeEventListener('contextmenu', mouseHandler);
+            };
+        }, [showMenu]);
+        // Set a timer on opening the dropdown before it can be closed, prevents first menu item being selected
+        // immediately, but lets user select action with the mouse up if they want to.
+        const [canClose, setCanClose] = useState(true);
+        useEffect(() => {
+            if (showMenu) {
+                setCanClose(false);
+                const timeout = setTimeout(() => {
+                    setCanClose(true);
+                }, 300);
+                return () => {
+                    setCanClose(true);
+                    clearTimeout(timeout);
+                };
+            }
+        }, [showMenu]);
+        const { refs, floatingStyles, context } = useFloating({
+            open: showMenu,
+            placement: 'bottom-start',
+            middleware: [
+                offset({
+                    mainAxis: 4,
+                    alignmentAxis: 4,
+                }),
+                shift(),
+                flip(),
+            ],
+        });
+        const onContextMenu = (e) => {
+            // dispatch event of a right click to close other context menu in the page
+            document.dispatchEvent(new Event('contextmenu'));
+            e.preventDefault();
+            e.stopPropagation();
+            refs.setReference({
+                getBoundingClientRect: () => ({
+                    x: e.clientX,
+                    y: e.clientY,
+                    width: 0,
+                    height: 0,
+                    top: e.clientY,
+                    right: e.clientX,
+                    bottom: e.clientY,
+                    left: e.clientX,
+                }),
+            });
+            setShowMenu(true);
+        };
+        const onAction = React.useCallback((action) => {
+            if (canClose) {
+                setShowMenu(false);
+                action.action();
+            }
+        }, [canClose]);
+        const role = useRole(context, { role: 'menu' });
+        const { getFloatingProps } = useInteractions([role]);
+        const dropdownStyle = React.useMemo(() => (Object.assign(Object.assign({}, floatingStyles), { 'overflow-y': 'auto', minWidth: 150, borderRadius: '0.25rem' })), [floatingStyles]);
+        const getItemProps = React.useCallback(({ item }) => ({
+            onMouseUp: () => onAction(item),
+        }), [onAction]);
+        return (_jsxs(_Fragment, { children: [_jsx(Component, Object.assign({}, props.elementProps, { className: props.className, onContextMenu: onContextMenu, children: props.children })), ReactDOM.createPortal(_jsx(DropdownList, { items: props.actions, getItemProps: getItemProps, getFloatingProps: getFloatingProps, style: dropdownStyle, isOpen: showMenu, ref: refs.setFloating }), document.body)] }));
+    }
+    return WrappedContextMenu;
+}
+export default ContextMenu;
+//# sourceMappingURL=context-menu.js.map

package/dist/context-menu/context-menu.js.map

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

package/dist/datepicker/datepicker-select.d.ts

@@ -0,0 +1,48 @@
+/**
+ * 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 { Placement } from '@floating-ui/react';
+import * as React from 'react';
+import { InteractiveComponentProps, Item } from '../types';
+export interface SelectProps extends InteractiveComponentProps<Item> {
+    /** The left displacement from dropdown the items should show */
+    displacement?: number;
+    /** A function taking an element for the ref of the dropdown  */
+    dropdownRef?: (element: any) => void;
+    /** className property to put on the select's items and the item wrapper */
+    itemClass?: string;
+    /** The items to pick from the list. Each should have a label and a value */
+    items: Array<Item>;
+    /** onClick event. */
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void | Promise<void>;
+    /** An optional onSelect handler for listening to changes in the selected item */
+    onSelect?: (item: Item) => void | Promise<void>;
+    /** Specify a specific placement for the list */
+    placement?: Placement;
+    /** Set the selected value to a specific value, will put the component in controlled mode */
+    selectedItem?: Item;
+    /** Font size in rem to show in the Select */
+    size?: number;
+}
+/**
+ * A single select dropdown component that has no search capability, accepts a list of items to select from and an
+ * onSelect handler to listen for changes in the selection
+ *
+ * @param {SelectProps} props - the props of the component
+ */
+declare function DatepickerSelect(props: SelectProps): JSX.Element;
+export default DatepickerSelect;
+//# sourceMappingURL=datepicker-select.d.ts.map