@darajs/ui-components 0.4.8

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 '@floating-ui/react';
+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,EAAkE,MAAM,oBAAoB,CAAC;AAE/G,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,yBAAyB,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAwG3D,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,CAiG/C;AAED,eAAe,MAAM,CAAC"}

package/dist/select/select.js

@@ -0,0 +1,143 @@
+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, shift, useFloating, useInteractions, useRole } from '@floating-ui/react';
+import { useSelect } from 'downshift';
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import styled from '@darajs/styled-components';
+import DropdownList from '../shared/dropdown-list';
+import Tooltip from '../tooltip/tooltip';
+import { Chevron, matchWidthToReference } from '../utils';
+import { syncKbdHighlightIdx } from '../utils/syncKbdHighlightIdx';
+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 0 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;
+    }
+
+    :hover:enabled {
+        background-color: ${(props) => props.theme.colors.grey2};
+    }
+
+    svg {
+        width: 1rem !important;
+        height: 0.8rem;
+    }
+
+    :disabled {
+        color: ${(props) => props.theme.colors.grey2};
+        background-color: ${(props) => props.theme.colors.grey1};
+
+        svg {
+            color: ${(props) => props.theme.colors.grey2};
+        }
+    }
+`;
+/**
+ * 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;
+    const { applySameWidthModifier = true } = props;
+    const [kbdHighlightIdx, setKbdHighlightIdx] = React.useState();
+    const { isOpen, selectedItem, getToggleButtonProps, getMenuProps, getItemProps } = useSelect(Object.assign(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);
+        } }, syncKbdHighlightIdx(setKbdHighlightIdx)), ('selectedItem' in props && { selectedItem: props.selectedItem })));
+    const { refs, floatingStyles, context } = useFloating({
+        open: isOpen,
+        placement: props.placement || 'bottom-start',
+        middleware: [flip(), shift(), ...(applySameWidthModifier ? [matchWidthToReference(+2)] : [])],
+        whileElementsMounted: isOpen ? autoUpdate : undefined,
+    });
+    const role = useRole(context, { role: 'listbox' });
+    const { getReferenceProps, getFloatingProps } = useInteractions([role]);
+    const setFloatingRef = refs.setFloating;
+    const { dropdownRef } = props;
+    const mergedDropdownRef = React.useCallback((node) => {
+        setFloatingRef(node);
+        dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef(node);
+    }, [setFloatingRef, dropdownRef]);
+    const menuProps = React.useMemo(() => getMenuProps({ ref: mergedDropdownRef }), [mergedDropdownRef, getMenuProps]);
+    const toggleButtonProps = React.useMemo(() => getToggleButtonProps({ disabled: props.disabled, ref: refs.setReference }), [props.disabled, refs.setReference, getToggleButtonProps]);
+    const dropdownStyle = React.useMemo(() => (Object.assign(Object.assign({}, floatingStyles), { marginLeft: -1 })), [floatingStyles]);
+    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 }, toggleButtonProps, getReferenceProps(), { 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, { items: props.items, getItemProps: getItemProps, getFloatingProps: getFloatingProps, style: dropdownStyle, isOpen: isOpen, getMenuProps: getMenuProps, size: props.size, ref: refs.setFloating, className: `${(_c = menuProps === null || menuProps === void 0 ? void 0 : menuProps.className) !== null && _c !== void 0 ? _c : ''} ${props.itemClass}`, itemClass: props.itemClass, maxItems: props.maxItems, selectedItem: selectedItem, kbdHighlightIdx: kbdHighlightIdx }), 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/shared/chevron-button.d.ts

@@ -0,0 +1,13 @@
+import { GetPropsCommonOptions, UseSelectGetToggleButtonPropsOptions } from 'downshift';
+import React from 'react';
+type Props = {
+    /** Function to get props for the toggle button */
+    getToggleButtonProps: (options?: UseSelectGetToggleButtonPropsOptions, otherOptions?: GetPropsCommonOptions) => Record<string, unknown>;
+    /** Boolean to indicate if the button is disabled */
+    disabled: boolean;
+    /** Boolean to indicate if the dropdown is open */
+    isOpen: boolean;
+};
+declare const _default: React.MemoExoticComponent<({ getToggleButtonProps, disabled, isOpen, ...props }: Props) => JSX.Element>;
+export default _default;
+//# sourceMappingURL=chevron-button.d.ts.map

package/dist/shared/chevron-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chevron-button.d.ts","sourceRoot":"","sources":["../../src/shared/chevron-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,oCAAoC,EAAE,MAAM,WAAW,CAAC;AACxF,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,KAAK,KAAK,GAAG;IACT,kDAAkD;IAClD,oBAAoB,EAAE,CAClB,OAAO,CAAC,EAAE,oCAAoC,EAC9C,YAAY,CAAC,EAAE,qBAAqB,KACnC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7B,oDAAoD;IACpD,QAAQ,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,MAAM,EAAE,OAAO,CAAC;CACnB,CAAC;yGAO2E,KAAK,KAAG,GAAG,CAAC,OAAO;AAMhG,wBAAyC"}

package/dist/shared/chevron-button.js

@@ -0,0 +1,35 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import styled from '@darajs/styled-components';
+import Button from '../button/button';
+import { Chevron } from '../utils';
+const StyledChevronButton = styled(Button).attrs((attrs) => (Object.assign(Object.assign({}, attrs), { styling: 'ghost' }))) `
+    min-width: 0;
+    height: auto;
+    margin: 0;
+    padding: 0 0.25rem;
+
+    background-color: transparent !important;
+`;
+/**
+ * ChevronButton component for rendering a button with a chevron icon.
+ *
+ * @param {Props} props - The props for the component
+ */
+const ChevronButton = (_a) => {
+    var { getToggleButtonProps, disabled, isOpen } = _a, props = __rest(_a, ["getToggleButtonProps", "disabled", "isOpen"]);
+    return (_jsx(StyledChevronButton, Object.assign({}, getToggleButtonProps(), props, { children: _jsx(Chevron, { disabled: disabled, isOpen: isOpen }) })));
+};
+export default React.memo(ChevronButton);
+//# sourceMappingURL=chevron-button.js.map

package/dist/shared/chevron-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chevron-button.js","sourceRoot":"","sources":["../../src/shared/chevron-button.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAE/C,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,iCAAM,KAAK,KAAE,OAAO,EAAE,OAAO,IAAG,CAAC,CAAA;;;;;;;CAO5F,CAAC;AAcF;;;;GAIG;AACH,MAAM,aAAa,GAAG,CAAC,EAA2D,EAAe,EAAE;QAA5E,EAAE,oBAAoB,EAAE,QAAQ,EAAE,MAAM,OAAmB,EAAd,KAAK,cAAlD,8CAAoD,CAAF;IAA2B,OAAA,CAChG,KAAC,mBAAmB,oBAAK,oBAAoB,EAAE,EAAM,KAAK,cACtD,KAAC,OAAO,IAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,GAAI,IAC7B,CACzB,CAAA;CAAA,CAAC;AAEF,eAAe,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC"}

package/dist/shared/dropdown-list.d.ts

@@ -0,0 +1,34 @@
+import { GetPropsCommonOptions, UseComboboxGetItemPropsOptions, UseComboboxGetMenuPropsOptions } from 'downshift';
+import React from 'react';
+import { Item } from '../types';
+type Props = {
+    /** Array of items to display in the dropdown */
+    items: Item[];
+    /** Function to get props for an item */
+    getItemProps: (options: UseComboboxGetItemPropsOptions<Item>) => any;
+    /** Function to get props for the floating element */
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    /** Style object to customize the dropdown list */
+    style: React.CSSProperties;
+    /** Boolean to indicate if the dropdown is open */
+    isOpen: boolean;
+    /** Optional size for the list items */
+    size?: number;
+    /** Function to get props for the menu. */
+    getMenuProps?: (options?: UseComboboxGetMenuPropsOptions, otherOptions?: GetPropsCommonOptions) => any;
+    /** Maximum number of items to display in the dropdown */
+    maxItems?: number;
+    /** CSS classname for individual items */
+    itemClass?: string;
+    /** CSS classname for the dropdown list */
+    className?: string;
+    /** Optional function to render custom children. By default, it renders the ListItem with the item label */
+    children?: (item: Item, index: number) => React.ReactNode;
+    /** The item to scroll into view when the menu is opened */
+    selectedItem?: Item;
+    /** The item to highlight when keyboard is used. Otherwise CSS :hover is used. */
+    kbdHighlightIdx?: number;
+};
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>>;
+export default _default;
+//# sourceMappingURL=dropdown-list.d.ts.map

package/dist/shared/dropdown-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-list.d.ts","sourceRoot":"","sources":["../../src/shared/dropdown-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,8BAA8B,EAAE,8BAA8B,EAAE,MAAM,WAAW,CAAC;AAElH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAiBhC,KAAK,KAAK,GAAG;IACT,gDAAgD;IAChD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,wCAAwC;IACxC,YAAY,EAAE,CAAC,OAAO,EAAE,8BAA8B,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC;IACrE,qDAAqD;IACrD,gBAAgB,EAAE,CAAC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,KAAK,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxF,kDAAkD;IAClD,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC;IAC3B,kDAAkD;IAClD,MAAM,EAAE,OAAO,CAAC;IAChB,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,YAAY,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,8BAA8B,EAAE,YAAY,CAAC,EAAE,qBAAqB,KAAK,GAAG,CAAC;IACvG,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2GAA2G;IAC3G,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1D,2DAA2D;IAC3D,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,iFAAiF;IACjF,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;;AAkEF,wBAAwC"}

package/dist/shared/dropdown-list.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isEmpty } from 'lodash';
+import React from 'react';
+import styled from '@darajs/styled-components';
+import { List, NoItemsLabel } from '../utils/list-styles';
+import ListItem from './list-item';
+const StyledDropdownList = styled(List) `
+    border-radius: 0 0 0.25rem 0.25rem;
+    outline: 0;
+    box-shadow: ${(props) => props.theme.shadow.light};
+`;
+const InnerItem = styled.span `
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+`;
+/**
+ * DropdownList component to display a list of items in a dropdown.
+ *
+ * @param {Props} props - The props for the component
+ */
+const DropdownList = React.forwardRef(({ items, getItemProps, getFloatingProps, isOpen, getMenuProps, size, style, maxItems, itemClass, className, children, selectedItem, kbdHighlightIdx, }, ref) => (_jsx(StyledDropdownList, Object.assign({}, (getMenuProps ? getMenuProps({ ref }) : { ref }), getFloatingProps(), { isOpen: isOpen, maxItems: maxItems, style: Object.assign(Object.assign({}, style), { zIndex: 9999 }), className: className, children: !isEmpty(items) ?
+        items.map((item, index) => {
+            const isSelected = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) === item.label;
+            return children ?
+                children(item, index)
+                : _jsxs(ListItem, { getItemProps: getItemProps, size: size, title: item.label, item: item, index: index, itemClass: itemClass, isHighlighted: isOpen && kbdHighlightIdx !== undefined && kbdHighlightIdx === index, isSelected: isSelected, children: [_jsx(InnerItem, { children: item.label }), item.icon] }, `item-${index}-${isOpen && isSelected}`);
+        })
+        : _jsx(NoItemsLabel, { children: "No Items" }) }))));
+DropdownList.displayName = 'DropdownList';
+export default React.memo(DropdownList);
+//# sourceMappingURL=dropdown-list.js.map

package/dist/shared/dropdown-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-list.js","sourceRoot":"","sources":["../../src/shared/dropdown-list.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAG/C,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;kBAGrB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;CACpD,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;CAK5B,CAAC;AA+BF;;;;GAIG;AACH,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CACjC,CACI,EACI,KAAK,EACL,YAAY,EACZ,gBAAgB,EAChB,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,eAAe,GAClB,EACD,GAAG,EACQ,EAAE,CAAC,CACd,KAAC,kBAAkB,oBACX,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAChD,gBAAgB,EAAE,IACtB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,KAAK,kCACE,KAAK,KACR,MAAM,EAAE,IAAI,KAEhB,SAAS,EAAE,SAAS,YAEnB,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;QACd,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACtB,MAAM,UAAU,GAAG,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,KAAK,MAAK,IAAI,CAAC,KAAK,CAAC;YACtD,OAAO,QAAQ,CAAC,CAAC;gBACT,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC;gBACzB,CAAC,CAAG,MAAC,QAAQ,IACL,YAAY,EAAE,YAAY,EAK1B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,MAAM,IAAI,eAAe,KAAK,SAAS,IAAI,eAAe,KAAK,KAAK,EACnF,UAAU,EAAE,UAAU,aAEtB,KAAC,SAAS,cAAE,IAAI,CAAC,KAAK,GAAa,EAClC,IAAI,CAAC,IAAI,KAVL,QAAQ,KAAK,IAAI,MAAM,IAAI,UAAU,EAAE,CAWrC,CAAC;QACxB,CAAC,CAAC;QACN,CAAC,CAAG,KAAC,YAAY,2BAAwB,IACxB,CACxB,CACJ,CAAC;AACF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAE1C,eAAe,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC"}

package/dist/shared/list-item.d.ts

@@ -0,0 +1,35 @@
+import { UseComboboxGetItemPropsOptions } from 'downshift';
+import React from 'react';
+import { Item } from '../types';
+interface ListItemProps {
+    isHighlighted?: boolean;
+    isSelected?: boolean;
+    size?: number;
+}
+export declare const StyledListItem: import("styled-components").StyledComponent<"span", import("@darajs/styled-components").DefaultTheme, ListItemProps, never>;
+type Props = {
+    /** Optional font size for the list item */
+    size?: number;
+    /** Title of the list item */
+    title: string;
+    /** Item data */
+    item: Item;
+    /** Index of the item in the list */
+    index: number;
+    /** Whether the item is highlighted. For example when using keyboard navigation */
+    isHighlighted?: boolean;
+    /** Whether the item is selected */
+    isSelected?: boolean;
+    /** Function to get props for the item */
+    getItemProps: (options: UseComboboxGetItemPropsOptions<Item>) => any;
+    /** Optional CSS classname for the list item */
+    itemClass?: string;
+    /** Children nodes to be rendered inside the list item */
+    children?: React.ReactNode;
+};
+declare const _default: React.MemoExoticComponent<{
+    ({ size, title, item, index, getItemProps, itemClass, children, isHighlighted, isSelected, }: Props): JSX.Element;
+    displayName: string;
+}>;
+export default _default;
+//# sourceMappingURL=list-item.d.ts.map

package/dist/shared/list-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-item.d.ts","sourceRoot":"","sources":["../../src/shared/list-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,8BAA8B,EAAE,MAAM,WAAW,CAAC;AAC3D,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,UAAU,aAAa;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,cAAc,6HA0C1B,CAAC;AAEF,KAAK,KAAK,GAAG;IACT,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB;IAChB,IAAI,EAAE,IAAI,CAAC;IACX,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,kFAAkF;IAClF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mCAAmC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yCAAyC;IACzC,YAAY,EAAE,CAAC,OAAO,EAAE,8BAA8B,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC;IACrE,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,CAAC;;kGAiBC,KAAK,GAAG,GAAG,CAAC,OAAO;;;AAmBtB,wBAAoC"}

package/dist/shared/list-item.js

@@ -0,0 +1,69 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import styled from '@darajs/styled-components';
+export const StyledListItem = styled.span `
+    cursor: pointer;
+    user-select: none;
+
+    overflow: hidden;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    min-height: 2rem;
+    padding: 0.25rem 1rem;
+
+    font-size: ${(props) => (props.size ? `${props.size}rem` : '1rem')};
+    font-weight: 300;
+    color: ${(props) => props.theme.colors.text};
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    background-color: ${(props) => {
+    if (props.isSelected) {
+        return props.theme.colors.blue3;
+    }
+    if (props.isHighlighted) {
+        return props.theme.colors.grey2;
+    }
+    return props.theme.colors.blue1;
+}};
+    border-bottom: 1px solid ${(props) => props.theme.colors.grey3};
+
+    :hover {
+        background-color: ${(props) => props.theme.colors.grey2};
+    }
+
+    :active {
+        color: ${(props) => props.theme.colors.blue1};
+        background-color: ${(props) => props.theme.colors.blue4};
+    }
+
+    &:last-child {
+        border-bottom: none;
+    }
+`;
+/**
+ * ListItem component for rendering a single item in a dropdown list.
+ *
+ * @param {Props} props - The props for the component
+ * */
+const ListItem = ({ size, title, item, index, getItemProps, itemClass, children, isHighlighted, isSelected, }) => {
+    const _a = getItemProps({ index, item }), { itemClassName } = _a, itemProps = __rest(_a, ["itemClassName"]);
+    return (_jsx(StyledListItem, Object.assign({}, itemProps, { className: itemClass ? `${itemClassName} ${itemClass}` : itemClassName, title: title, size: size, item: item, isHighlighted: isHighlighted, isSelected: isSelected, children: children })));
+};
+ListItem.displayName = 'ListItem';
+export default React.memo(ListItem);
+//# sourceMappingURL=list-item.js.map

package/dist/shared/list-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-item.js","sourceRoot":"","sources":["../../src/shared/list-item.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAU/C,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAe;;;;;;;;;;;;;iBAavC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC;;aAEzD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI;;;;wBAIvB,CAAC,KAAK,EAAE,EAAE;IAC1B,IAAI,KAAK,CAAC,UAAU,EAAE,CAAC;QACnB,OAAO,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;IACpC,CAAC;IACD,IAAI,KAAK,CAAC,aAAa,EAAE,CAAC;QACtB,OAAO,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;IACpC,CAAC;IACD,OAAO,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;AACpC,CAAC;+BAC0B,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;4BAGtC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;iBAI9C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;4BACxB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;;CAM9D,CAAC;AAuBF;;;;KAIK;AACL,MAAM,QAAQ,GAAG,CAAC,EACd,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,aAAa,EACb,UAAU,GACN,EAAe,EAAE;IACrB,MAAM,KAAkC,YAAY,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAA/D,EAAE,aAAa,OAAgD,EAA3C,SAAS,cAA7B,iBAA+B,CAAgC,CAAC;IAEtE,OAAO,CACH,KAAC,cAAc,oBACP,SAAS,IACb,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,aAAuB,IAAI,SAAS,EAAE,CAAC,CAAC,CAAE,aAAwB,EAC5F,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,YAErB,QAAQ,IACI,CACpB,CAAC;AACN,CAAC,CAAC;AACF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;AAElC,eAAe,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC"}

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;AAiD/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,CA8CtD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/slider/slider-inputs.js

@@ -0,0 +1,88 @@
+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;;;;;;;;;;;;;;;;;;;;qBAoB7B,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,EAAE,CAAC;gBACd,QAAQ,GAAG,aAAa,CAAC;YAC7B,CAAC;YACD,IAAI,KAAK,KAAK,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACpC,QAAQ,GAAG,YAAY,CAAC;YAC5B,CAAC;YACD,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"}