glints-aries 4.1.3 → 4.1.4

package/lib/Input/DownshiftSelect/Select.js

@@ -0,0 +1,251 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.itemToString = exports.defaultTransformFunction = exports.defaultEmptyListText = exports.SubComponents = exports.Select = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireWildcard(require("react"));
+var _downshift = require("downshift");
+var _lodash = require("lodash");
+var _reactIdGenerator = require("react-id-generator");
+var internalComponents = _interopRequireWildcard(require("./SelectStyle"));
+var _components = require("../../General/Icon/components");
+var _excluded = ["items", "transformFunction", "components", "isLoading", "isOpenInitially", "helperText", "downshift", "placeholder", "label", "disabled", "disableTyping", "isOpen", "invalid", "onIsOpenChange", "selectedItem", "onSelectedItemChange", "inputValue", "onInputValueChange", "onClear", "onFocus", "onBlur", "emptyListText", "groupKey"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var defaultTransformFunction = function defaultTransformFunction(items, inputValue) {
+  return items.filter(function (item) {
+    return item.label.toLowerCase().includes(inputValue.toLowerCase());
+  });
+};
+exports.defaultTransformFunction = defaultTransformFunction;
+var itemToString = function itemToString(item) {
+  return item ? item.label : '';
+};
+exports.itemToString = itemToString;
+var defaultEmptyListText = 'No results found. Try another keyword to search for.';
+
+// These are our custom props for our subcomponents. We need this because
+// sometimes we want to make additional props available to the subcomponent,
+// e.g. a Item subcomponent needs to know the item it represents.
+exports.defaultEmptyListText = defaultEmptyListText;
+var SubComponents = internalComponents;
+exports.SubComponents = SubComponents;
+var Select = function Select(_ref) {
+  var items = _ref.items,
+    _ref$transformFunctio = _ref.transformFunction,
+    transformFunction = _ref$transformFunctio === void 0 ? defaultTransformFunction : _ref$transformFunctio,
+    _ref$components = _ref.components,
+    externalComponents = _ref$components === void 0 ? {} : _ref$components,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    _ref$isOpenInitially = _ref.isOpenInitially,
+    isOpenInitially = _ref$isOpenInitially === void 0 ? false : _ref$isOpenInitially,
+    helperText = _ref.helperText,
+    _ref$downshift = _ref.downshift,
+    downshift = _ref$downshift === void 0 ? {} : _ref$downshift,
+    placeholder = _ref.placeholder,
+    label = _ref.label,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$disableTyping = _ref.disableTyping,
+    disableTyping = _ref$disableTyping === void 0 ? false : _ref$disableTyping,
+    isOpenExternal = _ref.isOpen,
+    _ref$invalid = _ref.invalid,
+    invalid = _ref$invalid === void 0 ? false : _ref$invalid,
+    onIsOpenChangeExternal = _ref.onIsOpenChange,
+    selectedItemExternal = _ref.selectedItem,
+    onSelectedItemChangeExternal = _ref.onSelectedItemChange,
+    inputValueExternal = _ref.inputValue,
+    onInputValueChangeExternal = _ref.onInputValueChange,
+    onClear = _ref.onClear,
+    onFocusExternal = _ref.onFocus,
+    onBlurExternal = _ref.onBlur,
+    _ref$emptyListText = _ref.emptyListText,
+    emptyListText = _ref$emptyListText === void 0 ? defaultEmptyListText : _ref$emptyListText,
+    groupKey = _ref.groupKey,
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var mergedComponents = (0, _extends2["default"])({}, internalComponents, externalComponents);
+  var Container = mergedComponents.Container,
+    Label = mergedComponents.Label,
+    Combobox = mergedComponents.Combobox,
+    Input = mergedComponents.Input,
+    IndicatorsContainer = mergedComponents.IndicatorsContainer,
+    LoadingIndicator = mergedComponents.LoadingIndicator,
+    ClearButton = mergedComponents.ClearButton,
+    ToggleButton = mergedComponents.ToggleButton,
+    Menu = mergedComponents.Menu,
+    Item = mergedComponents.Item,
+    EmptyList = mergedComponents.EmptyList,
+    HelperText = mergedComponents.HelperText,
+    GroupContainer = mergedComponents.GroupContainer,
+    Group = mergedComponents.Group,
+    GroupHeading = mergedComponents.GroupHeading;
+  var _useState = (0, _react.useState)(''),
+    inputValueInternal = _useState[0],
+    setInputValueInternal = _useState[1];
+  var inputValue = inputValueExternal || inputValueInternal;
+  var setInputValue = onInputValueChangeExternal || setInputValueInternal;
+  var displayItems = transformFunction(items, inputValue);
+  var _useCombobox = (0, _downshift.useCombobox)((0, _extends2["default"])({
+      items: displayItems,
+      inputValue: inputValue,
+      onInputValueChange: function onInputValueChange(_ref2) {
+        var inputValue = _ref2.inputValue;
+        setInputValue(inputValue);
+      },
+      itemToString: itemToString,
+      initialIsOpen: isOpenInitially
+    }, !(0, _lodash.isUndefined)(isOpenExternal) && {
+      isOpen: isOpenExternal
+    }, (0, _lodash.isFunction)(onIsOpenChangeExternal) && {
+      onIsOpenChange: function onIsOpenChange(_ref3) {
+        var isOpen = _ref3.isOpen;
+        return onIsOpenChangeExternal(isOpen);
+      }
+    }, !(0, _lodash.isUndefined)(selectedItemExternal) && {
+      selectedItem: selectedItemExternal
+    }, (0, _lodash.isFunction)(onSelectedItemChangeExternal) && {
+      onSelectedItemChange: function onSelectedItemChange(_ref4) {
+        var selectedItem = _ref4.selectedItem;
+        return onSelectedItemChangeExternal(selectedItem);
+      }
+    }, downshift)),
+    selectedItem = _useCombobox.selectedItem,
+    isOpen = _useCombobox.isOpen,
+    getLabelProps = _useCombobox.getLabelProps,
+    getComboboxProps = _useCombobox.getComboboxProps,
+    getInputProps = _useCombobox.getInputProps,
+    getToggleButtonProps = _useCombobox.getToggleButtonProps,
+    getMenuProps = _useCombobox.getMenuProps,
+    getItemProps = _useCombobox.getItemProps,
+    reset = _useCombobox.reset,
+    openMenu = _useCombobox.openMenu;
+  var _useId = (0, _reactIdGenerator.useId)(1, 'description-'),
+    helperId = _useId[0];
+  var handleClear = function handleClear() {
+    if ((0, _lodash.isFunction)(onClear)) {
+      onClear();
+    }
+    reset();
+    setInputValue('');
+    // reset does not call onSelectedItemChange on reset, but we want this
+    // for convenience
+    if ((0, _lodash.isFunction)(onSelectedItemChangeExternal)) {
+      onSelectedItemChangeExternal(null);
+    }
+  };
+  var _useState2 = (0, _react.useState)(false),
+    isFocused = _useState2[0],
+    setIsFocused = _useState2[1];
+  var onFocusInternal = function onFocusInternal() {
+    setIsFocused(true);
+  };
+  var onBlurInternal = function onBlurInternal() {
+    setIsFocused(false);
+  };
+  var onFocus = function onFocus() {
+    if ((0, _lodash.isFunction)(onFocusExternal)) {
+      onFocusExternal();
+    }
+    onFocusInternal();
+  };
+  var onBlur = function onBlur() {
+    if ((0, _lodash.isFunction)(onBlurExternal)) {
+      onBlurExternal();
+    }
+    onBlurInternal();
+  };
+  var groups = groupKey && (0, _lodash.groupBy)(displayItems, groupKey);
+  return /*#__PURE__*/_react["default"].createElement(Container, {
+    "data-testid": "container"
+  }, label && /*#__PURE__*/_react["default"].createElement(Label, (0, _extends2["default"])({}, getLabelProps(), {
+    "data-active": isFocused,
+    "data-disabled": disabled,
+    "data-invalid": invalid,
+    "data-testid": "label"
+  }), label), /*#__PURE__*/_react["default"].createElement(Combobox, (0, _extends2["default"])({}, getComboboxProps(), {
+    "data-disabled": disabled,
+    "data-invalid": invalid,
+    "data-active": isFocused,
+    onClick: disabled ? _lodash.noop : openMenu,
+    "data-testid": "combobox"
+  }), /*#__PURE__*/_react["default"].createElement(Input, (0, _extends2["default"])({}, getInputProps((0, _extends2["default"])({
+    disabled: disabled,
+    readOnly: disableTyping,
+    placeholder: placeholder,
+    onFocus: onFocus,
+    onBlur: onBlur
+  }, props)), {
+    "aria-invalid": invalid
+  }, helperText && {
+    'aria-describedby': helperId
+  }, selectedItem && {
+    title: selectedItem.label
+  }, {
+    "data-testid": "input"
+  })), /*#__PURE__*/_react["default"].createElement(IndicatorsContainer, {
+    "data-testid": "indicators-container"
+  }, isLoading && /*#__PURE__*/_react["default"].createElement(LoadingIndicator, {
+    "data-testid": "loading-indicator"
+  }), selectedItem && /*#__PURE__*/_react["default"].createElement(ClearButton, {
+    type: "button",
+    onClick: handleClear,
+    "aria-label": "clear selection",
+    "data-testid": "clear-button"
+  }, /*#__PURE__*/_react["default"].createElement(_components.CloseCircleSolidIcon, null)), /*#__PURE__*/_react["default"].createElement(ToggleButton, (0, _extends2["default"])({
+    type: "button"
+  }, getToggleButtonProps({
+    disabled: disabled,
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }), {
+    "aria-label": "toggle menu",
+    "data-testid": "toggle-button"
+    // getToggleButtonProps adds a ref here, but functional components don't support them. Overriding the ref here prevents a React warning
+    ,
+    ref: undefined
+  }), isOpen ? /*#__PURE__*/_react["default"].createElement(_components.ArrowUpIcon, null) : /*#__PURE__*/_react["default"].createElement(_components.ArrowDownIcon, null)))), /*#__PURE__*/_react["default"].createElement(Menu, (0, _extends2["default"])({}, getMenuProps(), {
+    "data-testid": "menu"
+  }), function () {
+    var renderItem = function renderItem(item) {
+      return /*#__PURE__*/_react["default"].createElement(Item, (0, _extends2["default"])({}, getItemProps({
+        item: item,
+        index: (0, _lodash.indexOf)(displayItems, item),
+        disabled: disabled || item.disabled
+      }), {
+        key: item.value,
+        item: item,
+        title: item.label + (0, _lodash.indexOf)(displayItems, item)
+        // getToggleButtonProps adds a ref here, but functional components don't support them. Overriding the ref here prevents a React warning
+        ,
+        ref: undefined
+      }), itemToString(item));
+    };
+    if (isOpen) {
+      if (groups && Object.keys(groups).length > 0) {
+        return Object.keys(groups).map(function (groupKey) {
+          return /*#__PURE__*/_react["default"].createElement(GroupContainer, {
+            key: groupKey
+          }, /*#__PURE__*/_react["default"].createElement(Group, null, /*#__PURE__*/_react["default"].createElement(GroupHeading, {
+            disabled: true,
+            "data-testid": "group-heading"
+          }, groupKey), groups[groupKey].map(renderItem)));
+        });
+      } else if (displayItems.length > 0) {
+        return displayItems.map(renderItem);
+      }
+    }
+    return /*#__PURE__*/_react["default"].createElement(EmptyList, {
+      "data-testid": "empty-list"
+    }, emptyListText);
+  }()), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
+    id: helperId,
+    "data-invalid": invalid,
+    "data-testid": "helper-text"
+  }, helperText));
+};
+exports.Select = Select;
+Select.Components = internalComponents;

package/lib/Input/DownshiftSelect/Select.stories.d.ts

@@ -0,0 +1,31 @@
+import { Story, Meta } from '@storybook/react';
+import { Props } from './Select';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;
+export declare const RealisticExample: Story<Props>;
+export declare const Groups: any;
+export declare const TransformFunctionForCustomFilter: any;
+export declare const TransformFunctionForNoFilter: any;
+export declare const CustomComponents: any;
+export declare const RemoveToggleButton: any;
+export declare const LoadingState: any;
+export declare const InitiallyOpen: any;
+export declare const HelperText: any;
+export declare const Placeholder: any;
+export declare const Label: any;
+export declare const DownshiftOptions: any;
+export declare const Disabled: any;
+export declare const DisableTyping: any;
+export declare const DisabledOptions: any;
+export declare const ControlledSelectedItem: Story<Props>;
+export declare const ControlledIsOpen: Story<Props>;
+export declare const ControlledInputValue: Story<Props>;
+export declare const Invalid: any;
+export declare const DisableAutocomplete: any;
+export declare const FocusCallbacks: Story<Props>;
+export declare const OnClearCallback: Story<Props>;
+export declare const ConfigurableWidth: any;
+export declare const Small: any;
+export declare const EmptyListText: any;
+export declare const AsyncItems: Story<Props>;

package/lib/Input/DownshiftSelect/Select.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/lib/Input/DownshiftSelect/SelectStyle.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { ItemProps } from './Select';
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<"label", any, {}, never>;
+export declare const Combobox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Input: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const IndicatorsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const _IndicatorButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const ClearButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const ToggleButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const LoadingIndicator: import("styled-components").StyledComponent<import("react").FC<import("../../General/Loading/Loading").Props>, any, {}, never>;
+export declare const Menu: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const Item: import("styled-components").StyledComponent<"li", any, ItemProps, never>;
+export declare const EmptyList: import("styled-components").StyledComponent<"li", any, {}, never>;
+export declare const HelperText: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const GroupContainer: import("styled-components").StyledComponent<"li", any, {}, never>;
+export declare const Group: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const GroupHeading: import("styled-components").StyledComponent<"li", any, {}, never>;

package/lib/Input/DownshiftSelect/SelectStyle.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports._IndicatorButton = exports.ToggleButton = exports.Menu = exports.LoadingIndicator = exports.Label = exports.Item = exports.Input = exports.IndicatorsContainer = exports.HelperText = exports.GroupHeading = exports.GroupContainer = exports.Group = exports.EmptyList = exports.Container = exports.Combobox = exports.ClearButton = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Loading = _interopRequireDefault(require("../../General/Loading"));
+var _Colors = require("../../Utils/Colors");
+var _Shadow = require("../../Utils/Shadow");
+var Container = _styledComponents["default"].div.withConfig({
+  displayName: "SelectStyle__Container",
+  componentId: "sc-qr1jv6-0"
+})(["position:relative;font-size:16px;"]);
+exports.Container = Container;
+var Label = _styledComponents["default"].label.withConfig({
+  displayName: "SelectStyle__Label",
+  componentId: "sc-qr1jv6-1"
+})(["display:block;margin-bottom:8px;color:", ";font-weight:500;&[data-active='true']{color:", ";}&[data-disabled='true']{color:", ";}&[data-invalid='true']{color:", ";}"], _Colors.Greyscale.devilsgrey, _Colors.SecondaryColor.actionblue, _Colors.Greyscale.lightgrey, _Colors.PrimaryColor.glintsred);
+exports.Label = Label;
+var Combobox = _styledComponents["default"].div.withConfig({
+  displayName: "SelectStyle__Combobox",
+  componentId: "sc-qr1jv6-2"
+})(["display:grid;grid-template-columns:1fr auto;grid-column-gap:0.75em;padding:0.75em 1em 0.75em 1em;border-radius:0.5em;background-color:#ebf5fa;:hover{background-color:#d6eaf2;}&[aria-expanded='true'],&[data-active='true']{background-color:#c2e0ed;}&[data-disabled='true']{background-color:", ";}&[data-invalid='true']{background-color:#feeeee;}"], _Colors.Greyscale.softgrey);
+exports.Combobox = Combobox;
+var Input = _styledComponents["default"].input.withConfig({
+  displayName: "SelectStyle__Input",
+  componentId: "sc-qr1jv6-3"
+})(["border:none;background-color:transparent;outline:none;color:", ";font-size:inherit;text-overflow:ellipsis;&:not([value='']){color:black;}:disabled::placeholder{color:", ";}"], _Colors.Greyscale.devilsgrey, _Colors.Greyscale.lightgrey);
+exports.Input = Input;
+var IndicatorsContainer = _styledComponents["default"].div.withConfig({
+  displayName: "SelectStyle__IndicatorsContainer",
+  componentId: "sc-qr1jv6-4"
+})(["display:flex;flex-direction:row;> :not(:last-child){margin-right:0.75em;}"]);
+exports.IndicatorsContainer = IndicatorsContainer;
+var _IndicatorButton = _styledComponents["default"].button.withConfig({
+  displayName: "SelectStyle___IndicatorButton",
+  componentId: "sc-qr1jv6-5"
+})(["padding:0;border:none;background:none;color:", ";font-size:inherit;"], _Colors.Greyscale.devilsgrey);
+exports._IndicatorButton = _IndicatorButton;
+var ClearButton = (0, _styledComponents["default"])(_IndicatorButton).withConfig({
+  displayName: "SelectStyle__ClearButton",
+  componentId: "sc-qr1jv6-6"
+})([""]);
+exports.ClearButton = ClearButton;
+var ToggleButton = (0, _styledComponents["default"])(_IndicatorButton).withConfig({
+  displayName: "SelectStyle__ToggleButton",
+  componentId: "sc-qr1jv6-7"
+})([""]);
+exports.ToggleButton = ToggleButton;
+var LoadingIndicator = (0, _styledComponents["default"])(_Loading["default"]).withConfig({
+  displayName: "SelectStyle__LoadingIndicator",
+  componentId: "sc-qr1jv6-8"
+})(["align-items:center;font-size:0.5625em;"]);
+exports.LoadingIndicator = LoadingIndicator;
+var Menu = _styledComponents["default"].ul.withConfig({
+  displayName: "SelectStyle__Menu",
+  componentId: "sc-qr1jv6-9"
+})(["margin-top:4px;position:absolute;width:100%;padding:0.5em 0 0.5em 0;border:1px solid #eeeeee;border-radius:0.5em;box-shadow:", ";background-color:white;z-index:1;[aria-expanded='false'] + &{visibility:hidden;}"], _Shadow.Shadow.down3);
+exports.Menu = Menu;
+var Item = _styledComponents["default"].li.withConfig({
+  displayName: "SelectStyle__Item",
+  componentId: "sc-qr1jv6-10"
+})(["padding:0.5em 1em;list-style-type:none;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;&[aria-selected='true']{background-color:", ";color:", ";}&[disabled]{background-color:transparent;color:", ";cursor:not-allowed;}"], _Colors.Greyscale.softgrey, _Colors.SecondaryColor.actionblue, _Colors.Greyscale.lightgrey);
+exports.Item = Item;
+var EmptyList = _styledComponents["default"].li.withConfig({
+  displayName: "SelectStyle__EmptyList",
+  componentId: "sc-qr1jv6-11"
+})(["padding:0.5em 1em;list-style-type:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:", ";cursor:not-allowed;"], _Colors.Greyscale.lightgrey);
+exports.EmptyList = EmptyList;
+var HelperText = _styledComponents["default"].span.withConfig({
+  displayName: "SelectStyle__HelperText",
+  componentId: "sc-qr1jv6-12"
+})(["margin-top:4px;color:", ";font-size:0.875em;&[data-invalid='true']{color:", ";}"], _Colors.Greyscale.devilsgrey, _Colors.PrimaryColor.glintsred);
+exports.HelperText = HelperText;
+var GroupContainer = _styledComponents["default"].li.withConfig({
+  displayName: "SelectStyle__GroupContainer",
+  componentId: "sc-qr1jv6-13"
+})(["margin-bottom:0.5em;padding:0;list-style-type:none;"]);
+exports.GroupContainer = GroupContainer;
+var Group = _styledComponents["default"].ul.withConfig({
+  displayName: "SelectStyle__Group",
+  componentId: "sc-qr1jv6-14"
+})(["padding:0;"]);
+exports.Group = Group;
+var GroupHeading = _styledComponents["default"].li.withConfig({
+  displayName: "SelectStyle__GroupHeading",
+  componentId: "sc-qr1jv6-15"
+})(["padding:0.5em 1em;list-style-type:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:", ";font-size:0.75em;text-transform:uppercase;"], _Colors.Greyscale.devilsgrey);
+exports.GroupHeading = GroupHeading;

package/lib/Input/NumberInput/NumberInput.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { TextFieldInput } from '../TextField/TextFieldStyle';
+/** Use onChange to listen to input changes.
+ * Use onBlur to listen to focus loss.
+ * <br/>
+ * Use status to set different styles for the Input Field based on status.
+ * <br/>
+ * Use small to set the size of the input field. The ...rest is passed to the
+ * internal field input. */
+export declare const NumberInput: (props: Props) => JSX.Element;
+export declare type Props = React.ComponentPropsWithoutRef<typeof TextFieldInput> & {
+    /** Placeholder for the text field. */
+    label: string;
+    disabled?: boolean;
+    className?: string;
+    removeFloatingLabel?: boolean;
+    /** Minimum value of the input */
+    min?: number;
+    /** Maximum value of the input. */
+    max?: number;
+    /** Step value for the input */
+    step?: number;
+    forwardedRef?: React.RefObject<HTMLInputElement>;
+    /** Icon at the start of the input element. */
+    startIcon?: React.ReactNode;
+};
+export default NumberInput;

package/lib/Input/NumberInput/NumberInput.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = exports.NumberInput = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _TextField = _interopRequireDefault(require("../TextField"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/** Use onChange to listen to input changes.
+ * Use onBlur to listen to focus loss.
+ * <br/>
+ * Use status to set different styles for the Input Field based on status.
+ * <br/>
+ * Use small to set the size of the input field. The ...rest is passed to the
+ * internal field input. */
+var NumberInput = function NumberInput(props) {
+  return /*#__PURE__*/React.createElement(_TextField["default"], (0, _extends2["default"])({}, props, {
+    type: "number"
+  }));
+};
+exports.NumberInput = NumberInput;
+var _default = NumberInput;
+exports["default"] = _default;

package/lib/Input/NumberInput/NumberInput.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;
+export declare const MinimumValue3AndMaximumValue10: any;
+export declare const StepValue2: any;

package/lib/Input/NumberInput/NumberInput.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/lib/Input/NumberInput/index.d.ts

@@ -0,0 +1,3 @@
+import NumberInput from './NumberInput';
+export { NumberInput };
+export default NumberInput;

package/lib/Input/NumberInput/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _NumberInput = _interopRequireDefault(require("./NumberInput"));
+exports.NumberInput = _NumberInput["default"];
+var _default = _NumberInput["default"];
+exports["default"] = _default;

package/lib/Input/PhoneNumberInput/PhoneNumberInput.d.ts

@@ -0,0 +1,29 @@
+import React, { ReactNode } from 'react';
+export declare const PhoneNumberInput: ({ value, onChange, onFocus, onBlur, callingCodeOptions: callingCodeOptionsExternal, onInputChange, filterValue, isLoadingCallingCodeOptions, label, featuredOptionsLabel, otherOptionsLabel, callingCodeFilterInputPlaceholder, callingCodeNoOptionsLabel, error, addon, ...restProps }: Props) => JSX.Element;
+export interface Props {
+    value: PhoneNumber;
+    onChange: (value: PhoneNumber) => void;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    error?: ReactNode;
+    addon?: ReactNode;
+    callingCodeOptions: CallingCodeOption[];
+    filterValue?: string | null;
+    onInputChange?: (inputValue: string | null) => void;
+    isLoadingCallingCodeOptions?: boolean;
+    callingCodeInputRootId?: string;
+    label: string;
+    featuredOptionsLabel: string;
+    otherOptionsLabel: string;
+    callingCodeFilterInputPlaceholder: string;
+    callingCodeNoOptionsLabel: string;
+}
+export interface PhoneNumber {
+    callingCode: number;
+    significantNumber: string | null;
+}
+export interface CallingCodeOption {
+    label: string;
+    callingCode: number;
+    isFeatured: boolean;
+}