@darajs/ui-components 1.0.0-a.1

package/dist/sectioned-list/sectioned-list.js

@@ -0,0 +1,208 @@
+import { createElement as _createElement } from "react";
+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 { useCombobox } from 'downshift';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { usePopper } from 'react-popper';
+import styled, { useTheme } from '@darajs/styled-components';
+import Badge from '../badge/badge';
+import { ChevronButton, Input, InputWrapper, NoItemsLabel, Wrapper } from '../combo-box/combo-box';
+import { Chevron, List, ListItem, sameWidthModifier } from '../utils';
+const { stateChangeTypes } = useCombobox;
+const ListWrapper = styled(List) `
+    margin-left: -1px;
+    border-radius: 0px 0px 0.25rem 0.25rem;
+    box-shadow: ${(props) => props.theme.shadow.light};
+`;
+const getTextColor = (heading, selected, theme) => {
+    if (heading) {
+        return theme.colors.text;
+    }
+    if (selected) {
+        return theme.colors.primary;
+    }
+    return theme.colors.text;
+};
+const ListItemSpan = styled(ListItem) `
+    cursor: ${(props) => ((props === null || props === void 0 ? void 0 : props.heading) ? 'text' : 'pointer')};
+    user-select: ${(props) => ((props === null || props === void 0 ? void 0 : props.heading) ? 'text' : 'none')};
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding: ${(props) => ((props === null || props === void 0 ? void 0 : props.heading) || !props.section ? '0 0.7rem' : '0 1.5rem')};
+    padding-right: 0.7rem;
+
+    font-weight: ${(props) => ((props === null || props === void 0 ? void 0 : props.heading) ? 'bold' : 'normal')};
+    color: ${(props) => getTextColor(props === null || props === void 0 ? void 0 : props.heading, props.selected, props.theme)};
+
+    ${(props) => {
+    if (props.heading) {
+        return `
+                :hover {
+                    background-color: ${props.theme.colors.background};
+                    color: ${props.theme.colors.text};
+                }
+            `;
+    }
+}}
+`;
+function instanceOfSectionItem(item) {
+    return 'items' in item;
+}
+function unpackSectionedList(listItems) {
+    return listItems.reduce((acc, item) => {
+        if (instanceOfSectionItem(item)) {
+            const sectionHeading = { heading: true, label: item.label, value: item.label };
+            const sectionItems = item.items.map((sectionItem) => (Object.assign(Object.assign({}, sectionItem), { section: item.label })));
+            return [...acc, sectionHeading, ...sectionItems];
+        }
+        return [...acc, item];
+    }, []);
+}
+/**
+ * A component for rendering lists, sectioned and non-sectioned. Takes an array of unpacked  ListItem objects and
+ * renders a searchable list.
+ *
+ * @param {SectionedListProps} props - the component props
+ */
+function SectionedList(props) {
+    var _a, _b, _c, _d;
+    const theme = useTheme();
+    const referenceElement = useRef(null);
+    const popperElement = useRef(null);
+    const { styles, attributes, update } = usePopper(referenceElement.current, popperElement.current, {
+        modifiers: [sameWidthModifier],
+        placement: 'bottom-start',
+    });
+    const unpackedItems = useMemo(() => unpackSectionedList(props.items), [props.items]);
+    const [pendingHighlight, setPendingHighlight] = useState(null);
+    const [items, setItems] = useState(unpackedItems);
+    const [inputValue, setInputValue] = useState((_b = (_a = props.selectedItem) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : '');
+    const { selectedItem, isOpen, getMenuProps, getInputProps, getToggleButtonProps, highlightedIndex, getItemProps, setHighlightedIndex, } = useCombobox(Object.assign({ initialIsOpen: false, initialSelectedItem: (_c = props.initialValue) !== null && _c !== void 0 ? _c : props.selectedItem, itemToString: (item) => (item ? item.label : ''), items, onInputValueChange: (change) => {
+            setInputValue(change.inputValue);
+            if (!change.inputValue) {
+                setItems(unpackedItems);
+                return;
+            }
+            const counts = {};
+            const filteredItems = unpackedItems.filter((item) => {
+                const lowercaseInput = change.inputValue.toLowerCase();
+                const lowercaseLabel = item.label.toLowerCase();
+                // Check if search input matches section item
+                if (!item.heading && lowercaseLabel.includes(lowercaseInput)) {
+                    counts[item.label] = counts[item.label] ? counts[item.label] + 1 : 1;
+                    return true;
+                }
+                if (item.heading) {
+                    // search for section headers that contain an item that matches the input
+                    const listSections = props.items.filter((propItem) => propItem.items.find((subItem) => subItem.label.toLowerCase().includes(lowercaseInput)));
+                    if (listSections.length) {
+                        // display section headers that contain a matching item
+                        listSections.forEach((section) => {
+                            counts[section.label] = counts[section.label] ? counts[section.label] + 1 : 1;
+                        });
+                        return true;
+                    }
+                }
+                return false;
+            });
+            setItems(filteredItems.filter((item) => counts[item.label] > 0));
+        }, 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);
+                }
+            }
+        }, stateReducer: (state, { changes, type }) => {
+            var _a, _b, _c;
+            // When props is forcefully updated then clear the input as well
+            if (type === stateChangeTypes.ControlledPropUpdatedSelectedItem) {
+                return Object.assign(Object.assign({}, changes), { inputValue: '' });
+            }
+            // This resets the input when the dropdown is opened
+            if (type === stateChangeTypes.InputFocus ||
+                (type === stateChangeTypes.ToggleButtonClick && 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: '' });
+            }
+            // On item selection make sure the list doesn't filter down to just the selected item
+            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) || '' });
+            }
+            // jump section headings when navigating with keys
+            if (type === stateChangeTypes.InputKeyDownArrowUp && ((_b = items[changes.highlightedIndex]) === null || _b === void 0 ? void 0 : _b.heading)) {
+                return Object.assign(Object.assign({}, changes), { highlightedIndex: changes.highlightedIndex - 1 < 0 ? items.length - 1 : changes.highlightedIndex - 1 });
+            }
+            if (type === stateChangeTypes.InputKeyDownArrowDown && ((_c = items[changes.highlightedIndex]) === null || _c === void 0 ? void 0 : _c.heading)) {
+                return Object.assign(Object.assign({}, changes), { highlightedIndex: changes.highlightedIndex + 1 === items.length ? 0 : changes.highlightedIndex + 1 });
+            }
+            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]);
+    // After the dropdown is opened, trigger an update of it's position, so it positions correctly.
+    useEffect(() => {
+        if (isOpen && update) {
+            update();
+        }
+    }, [isOpen, update]);
+    // Both downshift and popper want a ref to the reference element and popper element, the following blocks combine
+    // these refs into a single function that can be applied to the elements
+    const menuProps = getMenuProps();
+    const setMenuRef = menuProps.ref;
+    delete menuProps.ref;
+    const setMenuReference = (value) => {
+        setMenuRef(value);
+        popperElement.current = value;
+    };
+    return (_jsxs(Wrapper, { className: props.className, isDisabled: props.disabled, isErrored: false, isOpen: isOpen, style: props.style, children: [_jsxs(InputWrapper, { disabled: props.disabled, isOpen: isOpen, ref: referenceElement, children: [_jsx(Input, Object.assign({}, getInputProps({ value: inputValue }))), _jsx(ChevronButton, Object.assign({}, getToggleButtonProps(), { children: _jsx(Chevron, { disabled: props.disabled, isOpen: isOpen }) }))] }), ReactDOM.createPortal(_jsxs(ListWrapper, Object.assign({}, menuProps, attributes.popper, { isOpen: isOpen, ref: setMenuReference, style: Object.assign(Object.assign({}, styles.popper), { width: parseFloat((_d = styles.popper) === null || _d === void 0 ? void 0 : _d.width) + 2, zIndex: 9999 }), children: [items.length > 0 &&
+                        items.map((item, index) => {
+                            const itemProps = getItemProps({ index, item });
+                            if (item.heading) {
+                                delete itemProps.onClick;
+                            }
+                            return (_createElement(ListItemSpan, Object.assign({}, itemProps, { heading: item.heading, hovered: index === highlightedIndex, key: `item-${index}`, section: item.section, selected: item.value === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value), title: item.label }),
+                                item.label || item.section,
+                                item.badge && (_jsx(Badge, { color: item.badge.color || theme.colors.primary, children: item.badge.label }))));
+                        }), items.length === 0 && _jsx(NoItemsLabel, { children: "No Items" })] })), document.body)] }));
+}
+export default SectionedList;
+//# sourceMappingURL=sectioned-list.js.map

package/dist/sectioned-list/sectioned-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sectioned-list.js","sourceRoot":"","sources":["../../src/sectioned-list/sectioned-list.tsx"],"names":[],"mappings":";;AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAiD,WAAW,EAAE,MAAM,WAAW,CAAC;AACvF,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,MAAM,EAAE,EAAgB,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAE3E,OAAO,KAAK,MAAM,gBAAgB,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEnG,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAEtE,MAAM,EAAE,gBAAgB,EAAE,GAAG,WAAW,CAAC;AAEzC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;kBAGd,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;CACpD,CAAC;AASF,MAAM,YAAY,GAAG,CAAC,OAAgB,EAAE,QAAiB,EAAE,KAAmB,EAAU,EAAE;IACtF,IAAI,OAAO,EAAE;QACT,OAAO,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;KAC5B;IACD,IAAI,QAAQ,EAAE;QACV,OAAO,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;KAC/B;IACD,OAAO,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;AAC7B,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAe;cACtC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,EAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;mBAC3C,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,EAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;;;;;;eAMjD,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,KAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC;;;mBAGnE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,EAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;aACrD,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,EAAE,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC;;MAE3E,CAAC,KAAK,EAAE,EAAE;IACR,IAAI,KAAK,CAAC,OAAO,EAAE;QACf,OAAO;;wCAEqB,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU;6BACxC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI;;aAEvC,CAAC;KACL;AACL,CAAC;CACJ,CAAC;AAEF,SAAS,qBAAqB,CAAC,IAAwB;IACnD,OAAO,OAAO,IAAI,IAAI,CAAC;AAC3B,CAAC;AAED,SAAS,mBAAmB,CAAC,SAAc;IACvC,OAAO,SAAS,CAAC,MAAM,CAAC,CAAC,GAAoB,EAAE,IAAwB,EAAE,EAAE;QACvE,IAAI,qBAAqB,CAAC,IAAI,CAAC,EAAE;YAC7B,MAAM,cAAc,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;YAC/E,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,WAAiB,EAAE,EAAE,CAAC,iCACpD,WAAW,KACd,OAAO,EAAE,IAAI,CAAC,KAAK,IACrB,CAAC,CAAC;YACJ,OAAO,CAAC,GAAG,GAAG,EAAE,cAAc,EAAE,GAAG,YAAY,CAAC,CAAC;SACpD;QACD,OAAO,CAAC,GAAG,GAAG,EAAE,IAAI,CAAC,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;AACX,CAAC;AAuBD;;;;;GAKG;AACH,SAAS,aAAa,CAAC,KAAyB;;IAC5C,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACtD,MAAM,aAAa,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAChD,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC,gBAAgB,CAAC,OAAO,EAAE,aAAa,CAAC,OAAO,EAAE;QAC9F,SAAS,EAAE,CAAC,iBAAiB,CAAC;QAC9B,SAAS,EAAE,cAAc;KAC5B,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,mBAAmB,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAErF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;IAClD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,MAAA,MAAA,KAAK,CAAC,YAAY,0CAAE,KAAK,mCAAI,EAAE,CAAC,CAAC;IAE9E,MAAM,EACF,YAAY,EACZ,MAAM,EACN,YAAY,EACZ,aAAa,EACb,oBAAoB,EACpB,gBAAgB,EAChB,YAAY,EACZ,mBAAmB,GACtB,GAAG,WAAW,iBACX,aAAa,EAAE,KAAK,EACpB,mBAAmB,EAAE,MAAA,KAAK,CAAC,YAAY,mCAAI,KAAK,CAAC,YAAY,EAC7D,YAAY,EAAE,CAAC,IAAU,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,EACtD,KAAK,EACL,kBAAkB,EAAE,CAAC,MAAM,EAAE,EAAE;YAC3B,aAAa,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;YAEjC,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE;gBACpB,QAAQ,CAAC,aAAa,CAAC,CAAC;gBACxB,OAAO;aACV;YAED,MAAM,MAAM,GAA4B,EAAE,CAAC;YAC3C,MAAM,aAAa,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,IAAc,EAAE,EAAE;gBAC1D,MAAM,cAAc,GAAG,MAAM,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;gBACvD,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;gBAEhD,6CAA6C;gBAC7C,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,cAAc,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;oBAC1D,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBACrE,OAAO,IAAI,CAAC;iBACf;gBAED,IAAI,IAAI,CAAC,OAAO,EAAE;oBACd,yEAAyE;oBACzE,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,QAAqB,EAAE,EAAE,CAC9D,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC,CACzF,CAAC;oBAEF,IAAI,YAAY,CAAC,MAAM,EAAE;wBACrB,uDAAuD;wBACvD,YAAY,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;4BAC7B,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;wBAClF,CAAC,CAAC,CAAC;wBACH,OAAO,IAAI,CAAC;qBACf;iBACJ;gBAED,OAAO,KAAK,CAAC;YACjB,CAAC,CAAC,CAAC;YAEH,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QACrE,CAAC,EACD,oBAAoB,EAAE,CAAC,OAAO,EAAE,EAAE;;YAC9B,IAAI,KAAK,CAAC,QAAQ,EAAE;gBAChB,IACI,CAAC,KAAK,CAAC,YAAY,IAAI,CAAA,MAAA,OAAO,CAAC,YAAY,0CAAE,KAAK,OAAK,MAAA,KAAK,CAAC,YAAY,0CAAE,KAAK,CAAA,CAAC;oBACjF,CAAC,KAAK,CAAC,YAAY,EACrB;oBACE,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;iBACxC;aACJ;QACL,CAAC,EACD,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAmC,EAAE;;YACxE,gEAAgE;YAChE,IAAI,IAAI,KAAK,gBAAgB,CAAC,iCAAiC,EAAE;gBAC7D,uCACO,OAAO,KACV,UAAU,EAAE,EAAE,IAChB;aACL;YAED,oDAAoD;YACpD,IACI,IAAI,KAAK,gBAAgB,CAAC,UAAU;gBACpC,CAAC,IAAI,KAAK,gBAAgB,CAAC,iBAAiB,IAAI,OAAO,CAAC,MAAM,CAAC,EACjE;gBACE,sGAAsG;gBACtG,mBAAmB,CACf,OAAO,CAAC,YAAY;oBAChB,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAW,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,OAAO,CAAC,YAAY,CAAC,KAAK,CAAC;oBAChF,CAAC,CAAC,CAAC,CACV,CAAC;gBACF,uCACO,OAAO,KACV,UAAU,EAAE,EAAE,IAChB;aACL;YAED,qFAAqF;YACrF,IAEQ;gBACI,gBAAgB,CAAC,iBAAiB;gBAClC,gBAAgB,CAAC,SAAS;gBAC1B,gBAAgB,CAAC,SAAS;gBAC1B,gBAAgB,CAAC,kBAAkB;gBACnC,gBAAgB,CAAC,iBAAiB;aAEzC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAClB;gBACE,uCACO,OAAO,KACV,UAAU,EAAE,CAAA,MAAA,OAAO,CAAC,YAAY,0CAAE,KAAK,KAAI,EAAE,IAC/C;aACL;YACD,kDAAkD;YAClD,IAAI,IAAI,KAAK,gBAAgB,CAAC,mBAAmB,KAAI,MAAA,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,0CAAE,OAAO,CAAA,EAAE;gBAC3F,uCACO,OAAO,KACV,gBAAgB,EACZ,OAAO,CAAC,gBAAgB,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,gBAAgB,GAAG,CAAC,IACxF;aACL;YACD,IAAI,IAAI,KAAK,gBAAgB,CAAC,qBAAqB,KAAI,MAAA,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,0CAAE,OAAO,CAAA,EAAE;gBAC7F,uCACO,OAAO,KACV,gBAAgB,EAAE,OAAO,CAAC,gBAAgB,GAAG,CAAC,KAAK,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,gBAAgB,GAAG,CAAC,IACpG;aACL;YACD,OAAO,OAAO,CAAC;QACnB,CAAC,IAEE,CAAC,cAAc,IAAI,KAAK,IAAI,EAAE,YAAY,EAAE,KAAK,CAAC,YAAY,EAAE,CAAC,EACtE,CAAC;IACH,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,MAAM,IAAI,gBAAgB,KAAK,IAAI,EAAE;YACrC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;YACtC,mBAAmB,CAAC,IAAI,CAAC,CAAC;SAC7B;IACL,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAEpD,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,KAAK,CAAC,YAAY,KAAK,IAAI,EAAE;YAC7B,aAAa,CAAC,EAAE,CAAC,CAAC;SACrB;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC;IAEzB,+FAA+F;IAC/F,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,MAAM,IAAI,MAAM,EAAE;YAClB,MAAM,EAAE,CAAC;SACZ;IACL,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAErB,iHAAiH;IACjH,wEAAwE;IACxE,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,UAAU,GAAG,SAAS,CAAC,GAAG,CAAC;IACjC,OAAO,SAAS,CAAC,GAAG,CAAC;IACrB,MAAM,gBAAgB,GAAG,CAAC,KAAU,EAAQ,EAAE;QAC1C,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;IAClC,CAAC,CAAC;IAEF,OAAO,CACH,MAAC,OAAO,IACJ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,UAAU,EAAE,KAAK,CAAC,QAAQ,EAC1B,SAAS,EAAE,KAAK,EAChB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,CAAC,KAAK,aAElB,MAAC,YAAY,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,gBAAgB,aACzE,KAAC,KAAK,oBAAK,aAAa,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,EAAI,EACnD,KAAC,aAAa,oBAAK,oBAAoB,EAAE,cACrC,KAAC,OAAO,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,GAAI,IACzC,IACL,EACd,QAAQ,CAAC,YAAY,CAClB,MAAC,WAAW,oBACJ,SAAS,EACT,UAAU,CAAC,MAAM,IACrB,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,gBAAgB,EACrB,KAAK,kCACE,MAAM,CAAC,MAAM,KAEhB,KAAK,EAAE,UAAU,CAAC,MAAC,MAAM,CAAC,MAAc,0CAAE,KAAK,CAAC,GAAG,CAAC,EACpD,MAAM,EAAE,IAAI,gBAGf,KAAK,CAAC,MAAM,GAAG,CAAC;wBACb,KAAK,CAAC,GAAG,CAAC,CAAC,IAAc,EAAE,KAAa,EAAE,EAAE;4BACxC,MAAM,SAAS,GAAG,YAAY,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;4BAChD,IAAI,IAAI,CAAC,OAAO,EAAE;gCACd,OAAO,SAAS,CAAC,OAAO,CAAC;6BAC5B;4BACD,OAAO,CACH,eAAC,YAAY,oBACL,SAAS,IACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,KAAK,KAAK,gBAAgB,EACnC,GAAG,EAAE,QAAQ,KAAK,EAAE,EACpB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,KAAK,MAAK,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,KAAK,CAAA,EAC5C,KAAK,EAAE,IAAI,CAAC,KAAK;gCAEhB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO;gCAC1B,IAAI,CAAC,KAAK,IAAI,CACX,KAAC,KAAK,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,YACjD,IAAI,CAAC,KAAK,CAAC,KAAK,GACb,CACX,CACU,CAClB,CAAC;wBACN,CAAC,CAAC,EACL,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,KAAC,YAAY,2BAAwB,KAClD,EACd,QAAQ,CAAC,IAAI,CAChB,IACK,CACb,CAAC;AACN,CAAC;AAED,eAAe,aAAa,CAAC"}

package/dist/select/select.d.ts

@@ -0,0 +1,54 @@
+/**
+ * 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 '@popperjs/core';
+import * as React from 'react';
+import { InteractiveComponentProps, Item } from '../types';
+export interface SelectProps extends InteractiveComponentProps<Item> {
+    /** Whether to force the list to the same width as the parent, defaults to true */
+    applySameWidthModifier?: boolean;
+    /** A function taking an element for the ref of the dropdown  */
+    dropdownRef?: (element: any) => void;
+    /** Whether to open the select dropdown on load or not, defaults to false */
+    initialIsOpen?: boolean;
+    /** 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>;
+    /** The maximum number of items to display, defaults to 5 */
+    maxItems?: number;
+    /** 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>;
+    /** An optional placeholder for the input field to display when nothing is selected, defaults to '' */
+    placeholder?: string;
+    /** Specify a specific placement for the list */
+    placement?: Placement;
+    /** Set the selected value to a specific value, will put the component in controlled mode. Set to `null` to reset the value */
+    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 Select(props: SelectProps): JSX.Element;
+export default Select;
+//# sourceMappingURL=select.d.ts.map

package/dist/select/select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/select/select.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAG3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,yBAAyB,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AA8G3D,MAAM,WAAW,WAAY,SAAQ,yBAAyB,CAAC,IAAI,CAAC;IAChE,kFAAkF;IAClF,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,gEAAgE;IAChE,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,4EAA4E;IAC5E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB;IACrB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACxF,iFAAiF;IACjF,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAChD,sGAAsG;IACtG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,8HAA8H;IAC9H,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;GAKG;AACH,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAkH/C;AAED,eAAe,MAAM,CAAC"}

package/dist/select/select.js

@@ -0,0 +1,159 @@
+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 { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSelect } from 'downshift';
+import { useEffect, useRef } from 'react';
+import ReactDOM from 'react-dom';
+import { usePopper } from 'react-popper';
+import styled from '@darajs/styled-components';
+import Tooltip from '../tooltip/tooltip';
+import { Chevron, List, ListItem, sameWidthModifier } from '../utils';
+const SelectedItem = styled.div `
+    overflow: hidden;
+
+    /* The space available is that of the wrapper minus of the chevron */
+    width: calc(100% - 1rem);
+    margin-right: 0.5rem;
+
+    font-size: ${(props) => (props.size ? `${props.size}rem` : '1rem')};
+    font-weight: 300;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+`;
+const Wrapper = styled.div `
+    display: inline-flex;
+
+    width: 100%;
+    min-width: 4rem;
+    height: 2.5rem;
+
+    border-radius: ${(props) => (props.isOpen ? '0.25rem 0.25rem 0rem 0rem' : '0.25rem')};
+
+    ${(props) => {
+    if (props.isDisabled) {
+        return `
+                border: 1px solid ${props.theme.colors.grey1};
+                cursor: not-allowed;
+            `;
+    }
+    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};
+
+            }
+        `;
+}}
+`;
+const SelectButton = styled.button `
+    display: inline-flex;
+    flex: 1 1 auto;
+    align-items: center;
+    justify-content: space-between;
+
+    width: 100%;
+    height: 100%;
+    padding: 0 0.5rem 0rem 1rem;
+
+    font-size: 1rem;
+    color: ${(props) => props.theme.colors.text};
+
+    background-color: ${(props) => props.theme.colors.grey1};
+    border: none;
+    border-radius: ${(props) => (props.isOpen ? '0.25rem 0.25rem 0rem 0rem' : '0.25rem')};
+    outline: 0;
+
+    :not(:enabled) {
+        cursor: not-allowed;
+    }
+
+    :disabled {
+        color: ${(props) => props.theme.colors.grey2};
+        background-color: ${(props) => props.theme.colors.grey1};
+
+        svg {
+            color: ${(props) => props.theme.colors.grey2};
+        }
+    }
+
+    :hover:enabled {
+        background-color: ${(props) => props.theme.colors.grey2};
+    }
+
+    svg {
+        width: 1rem !important;
+        height: 0.8rem;
+    }
+`;
+const DropdownList = styled(List) `
+    margin-left: -1px;
+    border-radius: 0px 0px 0.25rem 0.25rem;
+    outline: 0;
+    box-shadow: ${(props) => props.theme.shadow.light};
+`;
+/**
+ * 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
+ */
+function Select(props) {
+    var _a, _b, _c, _d, _e, _f;
+    const referenceElement = useRef(null);
+    const popperElement = useRef(null);
+    const { styles, attributes, update } = usePopper(referenceElement.current, popperElement.current, {
+        modifiers: props.applySameWidthModifier === false ? [] : [sameWidthModifier],
+        placement: props.placement || 'bottom-start',
+    });
+    const { isOpen, selectedItem, getToggleButtonProps, getMenuProps, highlightedIndex, getItemProps } = useSelect(Object.assign({ initialIsOpen: props.initialIsOpen, initialSelectedItem: props.initialValue, itemToString: (item) => item.label, items: props.items, onSelectedItemChange: (changes) => {
+            var _a;
+            const selected = changes.selectedItem;
+            (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, selected);
+        } }, ('selectedItem' in props && { selectedItem: props.selectedItem })));
+    // After the dropdown is opened, trigger an update of it's position, so it positions correctly.
+    useEffect(() => {
+        if (isOpen && update) {
+            update();
+        }
+    }, [isOpen, update]);
+    // Both downshift and popper want a ref to the reference element and popper element, the following blocks combine
+    // these refs into a single function that can be applied to the elements
+    const buttonProps = getToggleButtonProps({ disabled: props.disabled });
+    const setButtonRef = buttonProps.ref;
+    delete buttonProps.ref;
+    const setButtonReference = (value) => {
+        setButtonRef(value);
+        referenceElement.current = value;
+    };
+    const menuProps = getMenuProps();
+    const setMenuRef = menuProps.ref;
+    delete menuProps.ref;
+    const setMenuReference = (value) => {
+        var _a;
+        setMenuRef(value);
+        popperElement.current = value;
+        (_a = props.dropdownRef) === null || _a === void 0 ? void 0 : _a.call(props, value);
+    };
+    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, onClick: props.onClick, style: props.style, children: [_jsxs(SelectButton, Object.assign({ disabled: props.disabled, isOpen: isOpen }, buttonProps, { ref: setButtonReference, type: "button", children: [_jsx(SelectedItem, { size: props.size, children: (_b = (_a = (selectedItem === null ? props.placeholder : selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label)) !== null && _a !== void 0 ? _a : props.placeholder) !== null && _b !== void 0 ? _b : 'Select' }), _jsx(Chevron, { disabled: props.disabled, isOpen: isOpen })] })), ReactDOM.createPortal(_jsx(DropdownList, Object.assign({}, menuProps, attributes.popper, { className: `${(_c = menuProps === null || menuProps === void 0 ? void 0 : menuProps.className) !== null && _c !== void 0 ? _c : ''} ${(_e = (_d = attributes === null || attributes === void 0 ? void 0 : attributes.popper) === null || _d === void 0 ? void 0 : _d.className) !== null && _e !== void 0 ? _e : ''} ${props.itemClass}`, isOpen: isOpen, maxItems: props.maxItems, ref: setMenuReference, style: Object.assign(Object.assign({}, styles.popper), { width: props.applySameWidthModifier === false
+                            ? undefined
+                            : parseFloat((_f = styles.popper) === null || _f === void 0 ? void 0 : _f.width) + 2, zIndex: 9999 }), children: props.items.map((item, index) => {
+                        const _a = getItemProps({ index, item }), { itemClassName } = _a, itemProps = __rest(_a, ["itemClassName"]);
+                        return (_createElement(ListItem, Object.assign({}, itemProps, { className: `${itemClassName} ${props.itemClass}`, hovered: index === highlightedIndex, key: `item-${index}`, size: props.size, title: item.label }), item.label));
+                    }) })), document.body)] }) }));
+}
+export default Select;
+//# sourceMappingURL=select.js.map

package/dist/select/select.js.map

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

package/dist/slider/slider-inputs.d.ts

@@ -0,0 +1,36 @@
+/**
+ * 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 { FunctionComponent } from 'react';
+interface SliderInputsProps {
+    /** The domain defines the range of possible values that the slider can take */
+    domain: [number, number];
+    /** The error message callback for inputs when value is out of domain range */
+    getErrorMsg: (value: number, index: number) => string;
+    /** Slider Values state setter */
+    setSliderValues: React.Dispatch<React.SetStateAction<number[]>>;
+    /** Slider Values */
+    sliderValues: number[];
+}
+/**
+ * The SliderInputs component displays the actual input values of the slider in a horizontal scrollable view
+ * that can be edited and have the changes reflected on the slider.
+ *
+ * @param {SliderInputsProps} props - the props for the component
+ */
+declare const SliderInputs: FunctionComponent<SliderInputsProps>;
+export default SliderInputs;
+//# sourceMappingURL=slider-inputs.d.ts.map

package/dist/slider/slider-inputs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-inputs.d.ts","sourceRoot":"","sources":["../../src/slider/slider-inputs.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,iBAAiB,EAAuB,MAAM,OAAO,CAAC;AAgD/D,UAAU,iBAAiB;IACvB,+EAA+E;IAC/E,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzB,8EAA8E;IAC9E,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACtD,iCAAiC;IACjC,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IAChE,oBAAoB;IACpB,YAAY,EAAE,MAAM,EAAE,CAAC;CAC1B;AAED;;;;;GAKG;AACH,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CA0CtD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/slider/slider-inputs.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx } 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 { useCallback, useRef } from 'react';
+import styled from '@darajs/styled-components';
+import { useIntersectionObserver } from '@darajs/ui-utils';
+import NumericInput from '../numeric-input/numeric-input';
+const InputWrapper = styled.div `
+    position: relative;
+    display: flex;
+    flex: 1 1 auto;
+    height: 3rem;
+    div {
+        flex: 1 1 auto;
+    }
+
+    input {
+        height: 100%;
+
+        ::before {
+            content: ' ';
+
+            position: sticky;
+            top: 0;
+            left: 0;
+
+            width: ${(props) => (!props.firstInputVisible ? '8px' : 0)};
+            height: 2.5rem;
+        }
+
+        ::after {
+            content: '';
+
+            position: sticky;
+            top: 0;
+            right: 0;
+
+            width: ${(props) => (!props.lastInputVisible ? '8px' : 0)};
+            height: 2.5rem;
+        }
+    }
+`;
+/**
+ * The SliderInputs component displays the actual input values of the slider in a horizontal scrollable view
+ * that can be edited and have the changes reflected on the slider.
+ *
+ * @param {SliderInputsProps} props - the props for the component
+ */
+const SliderInputs = ({ getErrorMsg, sliderValues, setSliderValues, domain, }) => {
+    const firstInputRef = useRef();
+    const lastInputRef = useRef();
+    const firstInputVisible = useIntersectionObserver(firstInputRef, '0px', 0.5);
+    const lastInputVisible = useIntersectionObserver(lastInputRef, '0px', 0.5);
+    const onInputChange = useCallback((value, index) => {
+        setSliderValues((currSliderValues) => {
+            const updatedValues = [...currSliderValues];
+            updatedValues[index] = Number.isNaN(value) ? domain[0] : value;
+            return updatedValues;
+        });
+    }, [domain, setSliderValues]);
+    return (_jsx(InputWrapper, { firstInputVisible: firstInputVisible, lastInputVisible: lastInputVisible, children: sliderValues.map((value, index) => {
+            let inputRef = null;
+            if (index === 0)
+                inputRef = firstInputRef;
+            if (index === sliderValues.length - 1)
+                inputRef = lastInputRef;
+            return (_jsx("div", { ref: inputRef, children: _jsx(NumericInput, { errorMsg: getErrorMsg(value, index), onChange: (val) => onInputChange(val, index), style: { height: '2rem', margin: '0.25rem 0.5rem' }, value: value }) }, index));
+        }) }));
+};
+export default SliderInputs;
+//# sourceMappingURL=slider-inputs.js.map

package/dist/slider/slider-inputs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-inputs.js","sourceRoot":"","sources":["../../src/slider/slider-inputs.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAqB,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAC/C,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAE3D,OAAO,YAAY,MAAM,gCAAgC,CAAC;AAO1D,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAmB;;;;;;;;;;;;;;;;;;;qBAmB7B,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;;;;;;;;;;;qBAWjD,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;;;;CAIpE,CAAC;AAaF;;;;;GAKG;AACH,MAAM,YAAY,GAAyC,CAAC,EACxD,WAAW,EACX,YAAY,EACZ,eAAe,EACf,MAAM,GACT,EAAe,EAAE;IACd,MAAM,aAAa,GAAG,MAAM,EAAE,CAAC;IAC/B,MAAM,YAAY,GAAG,MAAM,EAAE,CAAC;IAE9B,MAAM,iBAAiB,GAAG,uBAAuB,CAAC,aAAa,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;IAC7E,MAAM,gBAAgB,GAAG,uBAAuB,CAAC,YAAY,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;IAE3E,MAAM,aAAa,GAAG,WAAW,CAC7B,CAAC,KAAa,EAAE,KAAa,EAAQ,EAAE;QACnC,eAAe,CAAC,CAAC,gBAAgB,EAAE,EAAE;YACjC,MAAM,aAAa,GAAG,CAAC,GAAG,gBAAgB,CAAC,CAAC;YAC5C,aAAa,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YAC/D,OAAO,aAAa,CAAC;QACzB,CAAC,CAAC,CAAC;IACP,CAAC,EACD,CAAC,MAAM,EAAE,eAAe,CAAC,CAC5B,CAAC;IAEF,OAAO,CACH,KAAC,YAAY,IAAC,iBAAiB,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,gBAAgB,YACjF,YAAY,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YAC/B,IAAI,QAAQ,GAAG,IAAI,CAAC;YACpB,IAAI,KAAK,KAAK,CAAC;gBAAE,QAAQ,GAAG,aAAa,CAAC;YAC1C,IAAI,KAAK,KAAK,YAAY,CAAC,MAAM,GAAG,CAAC;gBAAE,QAAQ,GAAG,YAAY,CAAC;YAC/D,OAAO,CACH,cAAiB,GAAG,EAAE,QAAQ,YAC1B,KAAC,YAAY,IACT,QAAQ,EAAE,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,EACnC,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,aAAa,CAAC,GAAG,EAAE,KAAK,CAAC,EAC5C,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,EACnD,KAAK,EAAE,KAAK,GACd,IANI,KAAK,CAOT,CACT,CAAC;QACN,CAAC,CAAC,GACS,CAClB,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/slider/slider.d.ts

@@ -0,0 +1,53 @@
+import { InteractiveComponentProps } from '../types';
+/**
+ * Compute what step should be used for the given domain difference
+ *
+ * @param difference difference
+ */
+export declare function computeStep(difference: number): number;
+export interface BaseSliderProps<T> extends InteractiveComponentProps<Array<number>> {
+    /** An optional flag to disable the input alternative switch render, its false by default */
+    disableInputAlternative?: boolean;
+    /** The domain defines the range of possible values that the slider can take */
+    domain: [number, number];
+    /** The getValueLabel can be used to map a numeric value to something else when displayed in the UI */
+    getValueLabel?: (value: number) => T;
+    /** An optional onChange handler that will be called when the current value of any handle changes */
+    onChange?: (values: Array<T>) => void | Promise<void>;
+    /** The step size for changes in the slider */
+    step?: number;
+    /**
+     * An optional parameter to control the number of ticks, alternatively an array can be passed to specify a specific
+     * set of ticks to display
+     */
+    ticks?: Array<number> | number;
+    /** An array of track labels that will be shown above the tracks */
+    trackLabels?: Array<string>;
+    /** Whether a track should be drawn from the right most handle to the end of the rail */
+    trackToEnd?: boolean;
+    /** Whether a track should be drawn from the left most handle to the start of the rail */
+    trackToStart?: boolean;
+    /** The starting values for the handles, the number of values === the number of handles created */
+    values?: Array<number>;
+}
+/**
+ *  A simple numeric slider, essentially the same as BaseSlider
+ *
+ * @param props - the component props
+ */
+export declare function Slider(props: BaseSliderProps<number>): JSX.Element;
+export interface CategoricalSliderProps extends Omit<BaseSliderProps<string>, 'domain' | 'initialValue' | 'disableInputAlternative'> {
+    /** The set of string values to have as options on the slider */
+    domain: Array<string>;
+    /** the initialValue of the slider */
+    initialValue?: Array<string>;
+}
+/**
+ * The Categorical slider component accepts an array of string values to use on the slider, e.g.
+ *
+ * domain = ['low', 'med', 'high']
+ *
+ * @param {BaseSliderProps<string>} props - the component props
+ */
+export declare function CategoricalSlider(props: CategoricalSliderProps): JSX.Element;
+//# sourceMappingURL=slider.d.ts.map

package/dist/slider/slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../src/slider/slider.tsx"],"names":[],"mappings":"AA0BA,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AAGrD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAYtD;AAgJD,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,yBAAyB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAChF,4FAA4F;IAC5F,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,+EAA+E;IAC/E,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzB,sGAAsG;IACtG,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC,CAAC;IACrC,oGAAoG;IACpG,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtD,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC;IAC/B,mEAAmE;IACnE,WAAW,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC5B,wFAAwF;IACxF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yFAAyF;IACzF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kGAAkG;IAClG,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;CAC1B;AAkOD;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,eAAe,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CAQlE;AAED,MAAM,WAAW,sBACb,SAAQ,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE,QAAQ,GAAG,cAAc,GAAG,yBAAyB,CAAC;IAC5F,gEAAgE;IAChE,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACtB,qCAAqC;IACrC,YAAY,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;CAChC;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,CAe5E"}