@darajs/ui-components 1.0.0-a.1

package/dist/multiselect/multiselect.d.ts

@@ -0,0 +1,31 @@
+import { InteractiveComponentProps, Item } from '../types';
+export interface MultiSelectProps extends InteractiveComponentProps<Array<Item>> {
+    /** Whether to open the select dropdown on load or not, defaults to false */
+    initialIsOpen?: boolean;
+    /** The items to pick from the list. Each should have a label and a value */
+    items: Array<Item>;
+    /** An optional property for the maximum number of rows of items to show. Defaults to 3 */
+    maxRows?: number;
+    /** An optional max-width property in pixels or a percentage of parent. Defaults to 100% */
+    maxWidth?: string;
+    /** An optional onSelect handler for listening to changes in the selected item */
+    onSelect?: (item: Array<Item>) => void | Promise<void>;
+    /** An optional handler when the search term is changed */
+    onTermChange?: (term: string) => void | Promise<void>;
+    /** An optional placeholder for the input field to display when nothing is selected, defaults to '' */
+    placeholder?: string;
+    /** Set the selected items to a specific value, will put the component in controlled mode */
+    selectedItems?: Item[];
+    /** Font size in rem to show in the Select */
+    size?: number;
+}
+/**
+ * A multiselect select combobox component, accepts a list of items to select from and an onSelect handler to listen for
+ * changes. Renders currently selected items as list of tags which have a cross for removing them. Component will expand
+ * vertically to fit all selected items.
+ *
+ * @param {MultiSelectProps} props - the component props
+ */
+declare function MultiSelect({ maxWidth, maxRows, ...props }: MultiSelectProps): JSX.Element;
+export default MultiSelect;
+//# sourceMappingURL=multiselect.d.ts.map

package/dist/multiselect/multiselect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multiselect.d.ts","sourceRoot":"","sources":["../../src/multiselect/multiselect.tsx"],"names":[],"mappings":"AA0BA,OAAO,EAAE,yBAAyB,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAuM3D,MAAM,WAAW,gBAAiB,SAAQ,yBAAyB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC5E,4EAA4E;IAC5E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,4EAA4E;IAC5E,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,0FAA0F;IAC1F,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvD,0DAA0D;IAC1D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtD,sGAAsG;IACtG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4FAA4F;IAC5F,aAAa,CAAC,EAAE,IAAI,EAAE,CAAC;IACvB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;GAMG;AACH,iBAAS,WAAW,CAAC,EAAE,QAAiB,EAAE,OAAW,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAgKhG;AAED,eAAe,WAAW,CAAC"}

package/dist/multiselect/multiselect.js

@@ -0,0 +1,282 @@
+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";
+/**
+ * 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, useMultipleSelection } from 'downshift';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { usePopper } from 'react-popper';
+import styled from '@darajs/styled-components';
+import { Cross } from '@darajs/ui-icons';
+import Button from '../button/button';
+import Tooltip from '../tooltip/tooltip';
+import { Chevron, List, ListItem, sameWidthModifier } from '../utils';
+const { stateChangeTypes } = useCombobox;
+const tagHeight = 2;
+const tagTopMargin = 0.5;
+const Wrapper = styled.div `
+    display: inline-flex;
+    ${(props) => {
+    if (props.isDisabled) {
+        return `
+                cursor: not-allowed;
+            `;
+    }
+}}
+
+    width: 100%;
+    max-width: ${(props) => props.maxWidth};
+    max-height: ${(props) => props.maxRows * (tagHeight + tagTopMargin)}rem;
+
+    border-radius: ${(props) => (props.isOpen ? '0.25rem 0.25rem 0rem 0rem' : '0.25rem')};
+`;
+const InputWrapper = styled.div `
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    justify-content: space-between;
+
+    width: 100%;
+    min-width: 10rem;
+    min-height: 2.5rem;
+    margin-right: 0.25rem;
+    padding: 0.25rem 0.5rem 0.25rem 1rem;
+
+    color: ${(props) => (props.isDisabled ? 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 0rem 0rem' : '0.25rem')};
+
+    :hover {
+        background-color: ${(props) => (props.isDisabled ? props.theme.colors.grey1 : props.theme.colors.grey2)};
+    }
+
+    svg {
+        height: 0.8rem;
+    }
+
+    ${(props) => {
+    if (props.isDisabled) {
+        return `
+                border: 1px solid ${props.theme.colors.grey1};
+
+                svg {
+                    color: ${props.theme.colors.grey2};
+                    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 Input = styled.input `
+    overflow: hidden;
+    flex: 1 1 auto;
+
+    height: 100%;
+    margin-right: 0.5rem;
+    padding: 0rem;
+
+    font-size: ${(props) => (props.size ? `${props.size}rem` : props.theme.font.size)};
+    font-weight: 300;
+    color: ${(props) => props.theme.colors.grey6};
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    background-color: transparent;
+    border: none;
+    outline: 0;
+
+    :disabled {
+        cursor: not-allowed;
+    }
+`;
+const TagWrapper = styled.div `
+    overflow: auto;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: center;
+
+    width: 100%;
+    max-height: ${(props) => props.maxRows * (tagHeight + tagTopMargin) - 0.25}rem;
+`;
+const Tag = styled.span `
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+
+    height: ${tagHeight}rem;
+    padding: 0 0.75rem;
+
+    font-size: 0.875rem;
+    color: ${(props) => (props.disabled ? props.theme.colors.grey3 : props.theme.colors.text)};
+
+    background-color: ${(props) => (props.disabled ? props.theme.colors.grey3 : props.theme.colors.blue3)};
+    border: 1px solid ${(props) => props.theme.colors.primary};
+    border-radius: 1rem;
+
+    svg {
+        width: 0.85rem;
+        height: 0.85rem;
+        margin-left: 0.25rem;
+        color: ${(props) => (props.disabled ? props.theme.colors.grey3 : props.theme.colors.text)};
+
+        :hover {
+            color: ${(props) => (props.disabled ? props.theme.colors.grey3 : props.theme.colors.primary)};
+        }
+    }
+`;
+const TagText = styled.span `
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+`;
+const NoItemsLabel = styled.span `
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    justify-content: center;
+
+    height: 2rem;
+
+    font-size: 1rem;
+    color: ${(props) => props.theme.colors.grey4};
+
+    background-color: ${(props) => props.theme.colors.blue1};
+`;
+const DropdownList = styled(List) `
+    border-radius: 0px 0px 0.25rem 0.25rem;
+    outline: 0;
+    box-shadow: ${(props) => props.theme.shadow.light};
+`;
+const ChevronButton = 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;
+`;
+/**
+ * A multiselect select combobox component, accepts a list of items to select from and an onSelect handler to listen for
+ * changes. Renders currently selected items as list of tags which have a cross for removing them. Component will expand
+ * vertically to fit all selected items.
+ *
+ * @param {MultiSelectProps} props - the component props
+ */
+function MultiSelect(_a) {
+    var _b, _c;
+    var { maxWidth = '100%', maxRows = 3 } = _a, props = __rest(_a, ["maxWidth", "maxRows"]);
+    const referenceElement = useRef(null);
+    const popperElement = useRef(null);
+    const { styles, attributes, update } = usePopper(referenceElement.current, popperElement.current, {
+        modifiers: [sameWidthModifier],
+        placement: 'bottom-start',
+    });
+    const [inputValue, setInputValue] = useState('');
+    const { getSelectedItemProps, getDropdownProps, addSelectedItem, removeSelectedItem, selectedItems } = useMultipleSelection(Object.assign({ initialSelectedItems: (_b = props.initialValue) !== null && _b !== void 0 ? _b : [], onSelectedItemsChange: (changes) => {
+            if (props.onSelect) {
+                props.onSelect(changes.selectedItems);
+            }
+            update();
+        } }, ('selectedItems' in props && { selectedItems: props.selectedItems })));
+    const onTermChange = useCallback((term) => {
+        setInputValue(term);
+        if (props.onTermChange) {
+            props.onTermChange(term);
+        }
+    }, []);
+    // If there is a term change function passed in then don't filter locally
+    const filteredItems = props.onTermChange
+        ? props.items
+        : props.items.filter((item) => { var _a; return !selectedItems.includes(item) && ((_a = item.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(inputValue.toLowerCase())); });
+    const { isOpen, getMenuProps, getInputProps, highlightedIndex, getItemProps, openMenu, getToggleButtonProps } = useCombobox({
+        defaultHighlightedIndex: -1,
+        initialIsOpen: props.initialIsOpen,
+        inputValue,
+        itemToString: (item) => (item === null || item === void 0 ? void 0 : item.label) || '',
+        items: filteredItems,
+        onStateChange: ({ inputValue: internalInputVal, selectedItem, type }) => {
+            if (type === stateChangeTypes.InputChange) {
+                onTermChange(internalInputVal);
+            }
+            if ([
+                stateChangeTypes.InputKeyDownEnter,
+                stateChangeTypes.ItemClick,
+                stateChangeTypes.InputBlur,
+            ].includes(type)) {
+                if (selectedItem) {
+                    onTermChange('');
+                    addSelectedItem(selectedItem);
+                }
+            }
+        },
+        selectedItem: null,
+        stateReducer: (state, { changes, type }) => {
+            if (type === stateChangeTypes.ItemClick || type === stateChangeTypes.InputKeyDownEnter) {
+                return Object.assign(Object.assign({}, changes), { isOpen: true });
+            }
+            return changes;
+        },
+    });
+    // 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, isOpen: isOpen, maxRows: maxRows, maxWidth: maxWidth, style: props.style, children: [_jsx(Tooltip, { content: props.errorMsg, disabled: !props.errorMsg, styling: "error", children: _jsxs(InputWrapper, { isDisabled: props.disabled, isOpen: isOpen, ref: referenceElement, children: [_jsxs(TagWrapper, { maxRows: maxRows, children: [selectedItems.map((selectedItem, index) => (_jsxs(Tag, Object.assign({ disabled: props.disabled }, getSelectedItemProps({ index, selectedItem }), { children: [_jsx(TagText, { children: selectedItem.label }), _jsx(Cross, { asButton: true, onClick: (e) => {
+                                                // See https://github.com/downshift-js/downshift/issues/1188
+                                                e.stopPropagation();
+                                                return removeSelectedItem(selectedItem);
+                                            } })] }), selectedItem.value))), _jsx(Input, Object.assign({}, getInputProps(getDropdownProps({ preventKeyAction: isOpen })), { disabled: props.disabled, onFocus: openMenu, placeholder: props.placeholder, size: props.size }))] }), _jsx(ChevronButton, Object.assign({}, getToggleButtonProps(), { children: _jsx(Chevron, { disabled: props.disabled, isOpen: isOpen }) }))] }) }), ReactDOM.createPortal(_jsxs(DropdownList, Object.assign({}, menuProps, attributes.popper, { isOpen: isOpen, ref: setMenuReference, style: Object.assign(Object.assign({}, styles.popper), { width: parseFloat((_c = styles.popper) === null || _c === void 0 ? void 0 : _c.width), zIndex: 9999 }), children: [filteredItems.length > 0 &&
+                        filteredItems.map((item, index) => (_createElement(ListItem, Object.assign({}, getItemProps({ index, item }), { hovered: index === highlightedIndex, key: `item-${index}`, size: props.size, title: item.label }), item.label))), filteredItems.length === 0 && _jsx(NoItemsLabel, { children: "No Items" })] })), document.body)] }));
+}
+export default MultiSelect;
+//# sourceMappingURL=multiselect.js.map

package/dist/multiselect/multiselect.js.map

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

package/dist/numeric-input/input-stepper.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.
+ */
+import { FunctionComponent } from 'react';
+interface InputStepperProps {
+    /** property that disables the stepper */
+    disabled: boolean;
+    /** callback that determines the logic for increasing or decreasing input value */
+    step: (value: number) => void;
+    /** Optional property to set how many steps the stepper should take */
+    stepSkip?: number;
+}
+/**
+ * A simple stepper component that can be added to an input component to increase or decrease its value
+ *
+ * @param props the component props
+ */
+declare const InputStepper: FunctionComponent<InputStepperProps>;
+export default InputStepper;
+//# sourceMappingURL=input-stepper.d.ts.map

package/dist/numeric-input/input-stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-stepper.d.ts","sourceRoot":"","sources":["../../src/numeric-input/input-stepper.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAkD1C,UAAU,iBAAiB;IACvB,yCAAyC;IACzC,QAAQ,EAAE,OAAO,CAAC;IAClB,kFAAkF;IAClF,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;GAIG;AAEH,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAgBtD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/numeric-input/input-stepper.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@darajs/styled-components';
+import { ChevronDown, ChevronUp } from '@darajs/ui-icons';
+import Button from '../button/button';
+const StepperWrapper = styled.div `
+    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+
+    box-sizing: border-box;
+    padding: 0.25rem 0rem;
+
+    border-radius: 0rem 0.25rem 0.25rem 0rem;
+`;
+const StepperButton = styled(Button) `
+    min-width: 0.75rem;
+    height: max-content;
+    padding: 0;
+    background-color: transparent !important;
+
+    svg {
+        cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+        width: 0.75rem;
+        height: 0.75rem;
+        color: ${(props) => (props.disabled ? props.theme.colors.grey3 : props.theme.colors.grey4)};
+    }
+
+    :hover:not(:disabled) {
+        svg {
+            color: ${(props) => props.theme.colors.grey5};
+        }
+    }
+
+    :active:not(:disabled) {
+        svg {
+            transform: scale(0.75);
+        }
+    }
+`;
+/**
+ * A simple stepper component that can be added to an input component to increase or decrease its value
+ *
+ * @param props the component props
+ */
+const InputStepper = ({ disabled, step, stepSkip }) => {
+    const amountToStep = Math.abs(stepSkip !== null && stepSkip !== void 0 ? stepSkip : 1);
+    const stepUp = () => step(amountToStep);
+    const stepDown = () => step(amountToStep * -1);
+    return (_jsxs(StepperWrapper, { disabled: disabled, children: [_jsx(StepperButton, { disabled: disabled, onClick: stepUp, styling: "ghost", tabIndex: -1, children: _jsx(ChevronUp, {}) }), _jsx(StepperButton, { disabled: disabled, onClick: stepDown, styling: "ghost", tabIndex: -1, children: _jsx(ChevronDown, {}) })] }));
+};
+export default InputStepper;
+//# sourceMappingURL=input-stepper.js.map

package/dist/numeric-input/input-stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-stepper.js","sourceRoot":"","sources":["../../src/numeric-input/input-stepper.tsx"],"names":[],"mappings":";AAkBA,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE1D,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAMtC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAqB;cACxC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;;;;;;;;;;CAUpE,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;;;;;;kBAOlB,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;;;iBAGxD,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;;;;;qBAK7E,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;;;;;CASvD,CAAC;AAWF;;;;GAIG;AAEH,MAAM,YAAY,GAAyC,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxF,MAAM,YAAY,GAAW,IAAI,CAAC,GAAG,CAAC,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,CAAC,CAAC,CAAC;IACrD,MAAM,MAAM,GAAG,GAAS,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC9C,MAAM,QAAQ,GAAG,GAAS,EAAE,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC;IAErD,OAAO,CACH,MAAC,cAAc,IAAC,QAAQ,EAAE,QAAQ,aAC9B,KAAC,aAAa,IAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAC,OAAO,EAAC,QAAQ,EAAE,CAAC,CAAC,YAC5E,KAAC,SAAS,KAAG,GACD,EAEhB,KAAC,aAAa,IAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAC,OAAO,EAAC,QAAQ,EAAE,CAAC,CAAC,YAC9E,KAAC,WAAW,KAAG,GACH,IACH,CACpB,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/numeric-input/numeric-input.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 * as React from 'react';
+import { InteractiveComponentProps } from '../types';
+export interface NumericInputProps extends InteractiveComponentProps<number> {
+    /** An optional prop to focus the input upon mounting it */
+    autoFocus?: boolean;
+    /** An optional parameter to restrict the field to just integers */
+    integerOnly?: boolean;
+    /** An optional property to set the maximum accepted value */
+    maxValue?: number;
+    /** An optional property to set the minimum accepted value */
+    minValue?: number;
+    /** An optional onBlur handler for listening to input blur events */
+    onBlur?: (e: React.SyntheticEvent<HTMLInputElement>) => void | Promise<void>;
+    /** An optional onChange handler for listening to changes in the input */
+    onChange?: (value: number, e?: React.SyntheticEvent<HTMLInputElement>) => void | Promise<void>;
+    /** An optional event listener for complete events (enter presses) */
+    onComplete?: () => void | Promise<void>;
+    /** An optional placeholder that will be used when the input is empty, defaults to '' */
+    placeholder?: string;
+    /** An optional property to set how many steps the stepper should take */
+    stepSkip?: number;
+    /** An optional property to show input stepper control */
+    stepper?: boolean;
+}
+/**
+ * NumericInput is a wrapper around the input component that restricts the value to be numeric, either float or integer.
+ *
+ * @param props the component props
+ */
+declare const NumericInput: React.ForwardRefExoticComponent<NumericInputProps & React.RefAttributes<HTMLInputElement>>;
+export default NumericInput;
+//# sourceMappingURL=numeric-input.d.ts.map

package/dist/numeric-input/numeric-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"numeric-input.d.ts","sourceRoot":"","sources":["../../src/numeric-input/numeric-input.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AAgHrD,MAAM,WAAW,iBAAkB,SAAQ,yBAAyB,CAAC,MAAM,CAAC;IACxE,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mEAAmE;IACnE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7E,yEAAyE;IACzE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/F,qEAAqE;IACrE,UAAU,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACxC,wFAAwF;IACxF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;GAIG;AACH,QAAA,MAAM,YAAY,4FA2FjB,CAAC;AAGF,eAAe,YAAY,CAAC"}