@atlaskit/react-select 0.0.2

package/dist/esm/state-manager.js

@@ -0,0 +1,22 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef } from 'react';
+import Select from './select';
+import useStateManager from './use-state-manager';
+
+/**
+ * __StateManagedSelect__
+ *
+ * A state managed select {description}.
+ *
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ */
+
+var StateManagedSelect = /*#__PURE__*/forwardRef(function (props, ref) {
+  var baseSelectProps = useStateManager(props);
+  return /*#__PURE__*/React.createElement(Select, _extends({
+    ref: ref
+  }, baseSelectProps));
+});
+export default StateManagedSelect;

package/dist/esm/styles.js

@@ -0,0 +1,58 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { containerCSS, indicatorsContainerCSS, valueContainerCSS } from './components/containers';
+import { css as controlCSS } from './components/control';
+import { groupCSS, groupHeadingCSS } from './components/group';
+import { clearIndicatorCSS, dropdownIndicatorCSS, indicatorSeparatorCSS, loadingIndicatorCSS } from './components/indicators';
+import { inputCSS } from './components/input';
+import { loadingMessageCSS, menuCSS, menuListCSS, menuPortalCSS, noOptionsMessageCSS } from './components/menu';
+import { multiValueCSS, multiValueLabelCSS, multiValueRemoveCSS } from './components/multi-value';
+import { optionCSS } from './components/option';
+import { placeholderCSS } from './components/placeholder';
+import { css as singleValueCSS } from './components/single-value';
+export var defaultStyles = {
+  clearIndicator: clearIndicatorCSS,
+  container: containerCSS,
+  control: controlCSS,
+  dropdownIndicator: dropdownIndicatorCSS,
+  group: groupCSS,
+  groupHeading: groupHeadingCSS,
+  indicatorsContainer: indicatorsContainerCSS,
+  indicatorSeparator: indicatorSeparatorCSS,
+  input: inputCSS,
+  loadingIndicator: loadingIndicatorCSS,
+  loadingMessage: loadingMessageCSS,
+  menu: menuCSS,
+  menuList: menuListCSS,
+  menuPortal: menuPortalCSS,
+  multiValue: multiValueCSS,
+  multiValueLabel: multiValueLabelCSS,
+  multiValueRemove: multiValueRemoveCSS,
+  noOptionsMessage: noOptionsMessageCSS,
+  option: optionCSS,
+  placeholder: placeholderCSS,
+  singleValue: singleValueCSS,
+  valueContainer: valueContainerCSS
+};
+// Merge Utility
+// Allows consumers to extend a base Select with additional styles
+
+export function mergeStyles(source) {
+  var target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  // initialize with source styles
+  var styles = _objectSpread({}, source);
+
+  // massage in target styles
+  Object.keys(target).forEach(function (keyAsString) {
+    var key = keyAsString;
+    if (source[key]) {
+      styles[key] = function (rsCss, props) {
+        return target[key](source[key](rsCss, props), props);
+      };
+    } else {
+      styles[key] = target[key];
+    }
+  });
+  return styles;
+}

package/dist/esm/theme.js

@@ -0,0 +1,36 @@
+export var colors = {
+  primary: '#2684FF',
+  primary75: '#4C9AFF',
+  primary50: '#B2D4FF',
+  primary25: '#DEEBFF',
+  danger: '#DE350B',
+  dangerLight: '#FFBDAD',
+  neutral0: 'hsl(0, 0%, 100%)',
+  neutral5: 'hsl(0, 0%, 95%)',
+  neutral10: 'hsl(0, 0%, 90%)',
+  neutral20: 'hsl(0, 0%, 80%)',
+  neutral30: 'hsl(0, 0%, 70%)',
+  neutral40: 'hsl(0, 0%, 60%)',
+  neutral50: 'hsl(0, 0%, 50%)',
+  neutral60: 'hsl(0, 0%, 40%)',
+  neutral70: 'hsl(0, 0%, 30%)',
+  neutral80: 'hsl(0, 0%, 20%)',
+  neutral90: 'hsl(0, 0%, 10%)'
+};
+var borderRadius = 4;
+// Used to calculate consistent margin/padding on elements
+var baseUnit = 4;
+// The minimum height of the control
+var controlHeight = 38;
+// The amount of space between the control and menu */
+var menuGutter = baseUnit * 2;
+export var spacing = {
+  baseUnit: baseUnit,
+  controlHeight: controlHeight,
+  menuGutter: menuGutter
+};
+export var defaultTheme = {
+  borderRadius: borderRadius,
+  colors: colors,
+  spacing: spacing
+};

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/use-async.js

@@ -0,0 +1,149 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["defaultOptions", "cacheOptions", "loadOptions", "options", "isLoading", "onInputChange", "filterOption"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { handleInputChange } from './utils';
+// TODO: Fill in the hook {description}.
+/**
+ * {description}.
+ */
+export default function useAsync(_ref) {
+  var _ref$defaultOptions = _ref.defaultOptions,
+    propsDefaultOptions = _ref$defaultOptions === void 0 ? false : _ref$defaultOptions,
+    _ref$cacheOptions = _ref.cacheOptions,
+    cacheOptions = _ref$cacheOptions === void 0 ? false : _ref$cacheOptions,
+    propsLoadOptions = _ref.loadOptions,
+    propsOptions = _ref.options,
+    _ref$isLoading = _ref.isLoading,
+    propsIsLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    propsOnInputChange = _ref.onInputChange,
+    _ref$filterOption = _ref.filterOption,
+    filterOption = _ref$filterOption === void 0 ? null : _ref$filterOption,
+    restSelectProps = _objectWithoutProperties(_ref, _excluded);
+  var propsInputValue = restSelectProps.inputValue;
+  var lastRequest = useRef(undefined);
+  var mounted = useRef(false);
+  var _useState = useState(Array.isArray(propsDefaultOptions) ? propsDefaultOptions : undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    defaultOptions = _useState2[0],
+    setDefaultOptions = _useState2[1];
+  var _useState3 = useState(typeof propsInputValue !== 'undefined' ? propsInputValue : ''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    stateInputValue = _useState4[0],
+    setStateInputValue = _useState4[1];
+  var _useState5 = useState(propsDefaultOptions === true),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isLoading = _useState6[0],
+    setIsLoading = _useState6[1];
+  var _useState7 = useState(undefined),
+    _useState8 = _slicedToArray(_useState7, 2),
+    loadedInputValue = _useState8[0],
+    setLoadedInputValue = _useState8[1];
+  var _useState9 = useState([]),
+    _useState10 = _slicedToArray(_useState9, 2),
+    loadedOptions = _useState10[0],
+    setLoadedOptions = _useState10[1];
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    passEmptyOptions = _useState12[0],
+    setPassEmptyOptions = _useState12[1];
+  var _useState13 = useState({}),
+    _useState14 = _slicedToArray(_useState13, 2),
+    optionsCache = _useState14[0],
+    setOptionsCache = _useState14[1];
+  var _useState15 = useState(undefined),
+    _useState16 = _slicedToArray(_useState15, 2),
+    prevDefaultOptions = _useState16[0],
+    setPrevDefaultOptions = _useState16[1];
+  var _useState17 = useState(undefined),
+    _useState18 = _slicedToArray(_useState17, 2),
+    prevCacheOptions = _useState18[0],
+    setPrevCacheOptions = _useState18[1];
+  if (cacheOptions !== prevCacheOptions) {
+    setOptionsCache({});
+    setPrevCacheOptions(cacheOptions);
+  }
+  if (propsDefaultOptions !== prevDefaultOptions) {
+    setDefaultOptions(Array.isArray(propsDefaultOptions) ? propsDefaultOptions : undefined);
+    setPrevDefaultOptions(propsDefaultOptions);
+  }
+  useEffect(function () {
+    mounted.current = true;
+    return function () {
+      mounted.current = false;
+    };
+  }, []);
+  var loadOptions = useCallback(function (inputValue, callback) {
+    if (!propsLoadOptions) {
+      return callback();
+    }
+    var loader = propsLoadOptions(inputValue, callback);
+    if (loader && typeof loader.then === 'function') {
+      loader.then(callback, function () {
+        return callback();
+      });
+    }
+  }, [propsLoadOptions]);
+  useEffect(function () {
+    if (propsDefaultOptions === true) {
+      loadOptions(stateInputValue, function (options) {
+        if (!mounted.current) {
+          return;
+        }
+        setDefaultOptions(options || []);
+        setIsLoading(!!lastRequest.current);
+      });
+    }
+    // NOTE: this effect is designed to only run when the component mounts,
+    // so we don't want to include any hook dependencies
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onInputChange = useCallback(function (newValue, actionMeta) {
+    var inputValue = handleInputChange(newValue, actionMeta, propsOnInputChange);
+    if (!inputValue) {
+      lastRequest.current = undefined;
+      setStateInputValue('');
+      setLoadedInputValue('');
+      setLoadedOptions([]);
+      setIsLoading(false);
+      setPassEmptyOptions(false);
+      return;
+    }
+    if (cacheOptions && optionsCache[inputValue]) {
+      setStateInputValue(inputValue);
+      setLoadedInputValue(inputValue);
+      setLoadedOptions(optionsCache[inputValue]);
+      setIsLoading(false);
+      setPassEmptyOptions(false);
+    } else {
+      var request = lastRequest.current = {};
+      setStateInputValue(inputValue);
+      setIsLoading(true);
+      setPassEmptyOptions(!loadedInputValue);
+      loadOptions(inputValue, function (options) {
+        if (!mounted) {
+          return;
+        }
+        if (request !== lastRequest.current) {
+          return;
+        }
+        lastRequest.current = undefined;
+        setIsLoading(false);
+        setLoadedInputValue(inputValue);
+        setLoadedOptions(options || []);
+        setPassEmptyOptions(false);
+        setOptionsCache(options ? _objectSpread(_objectSpread({}, optionsCache), {}, _defineProperty({}, inputValue, options)) : optionsCache);
+      });
+    }
+  }, [cacheOptions, loadOptions, loadedInputValue, optionsCache, propsOnInputChange]);
+  var options = passEmptyOptions ? [] : stateInputValue && loadedInputValue ? loadedOptions : defaultOptions || [];
+  return _objectSpread(_objectSpread({}, restSelectProps), {}, {
+    options: options,
+    isLoading: isLoading || propsIsLoading,
+    onInputChange: onInputChange,
+    filterOption: filterOption
+  });
+}

package/dist/esm/use-creatable.js

@@ -0,0 +1,107 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { useCallback, useMemo } from 'react';
+import { getOptionLabel as baseGetOptionLabel, getOptionValue as baseGetOptionValue } from './builtins';
+import { cleanValue, valueTernary } from './utils';
+var compareOption = function compareOption() {
+  var inputValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  var option = arguments.length > 1 ? arguments[1] : undefined;
+  var accessors = arguments.length > 2 ? arguments[2] : undefined;
+  var candidate = String(inputValue).toLowerCase();
+  var optionValue = String(accessors.getOptionValue(option)).toLowerCase();
+  var optionLabel = String(accessors.getOptionLabel(option)).toLowerCase();
+  return optionValue === candidate || optionLabel === candidate;
+};
+var builtins = {
+  formatCreateLabel: function formatCreateLabel(inputValue) {
+    return "Create \"".concat(inputValue, "\"");
+  },
+  isValidNewOption: function isValidNewOption(inputValue, selectValue, selectOptions, accessors) {
+    return !(!inputValue || selectValue.some(function (option) {
+      return compareOption(inputValue, option, accessors);
+    }) || selectOptions.some(function (option) {
+      return compareOption(inputValue, option, accessors);
+    }));
+  },
+  getNewOptionData: function getNewOptionData(inputValue, optionLabel) {
+    return {
+      label: optionLabel,
+      value: inputValue,
+      __isNew__: true
+    };
+  }
+};
+
+// TODO: Fill in the hook {description}.
+/**
+ * {description}.
+ */
+export default function useCreatable(_ref) {
+  var _ref$allowCreateWhile = _ref.allowCreateWhileLoading,
+    allowCreateWhileLoading = _ref$allowCreateWhile === void 0 ? false : _ref$allowCreateWhile,
+    _ref$createOptionPosi = _ref.createOptionPosition,
+    createOptionPosition = _ref$createOptionPosi === void 0 ? 'last' : _ref$createOptionPosi,
+    _ref$formatCreateLabe = _ref.formatCreateLabel,
+    formatCreateLabel = _ref$formatCreateLabe === void 0 ? builtins.formatCreateLabel : _ref$formatCreateLabe,
+    _ref$isValidNewOption = _ref.isValidNewOption,
+    isValidNewOption = _ref$isValidNewOption === void 0 ? builtins.isValidNewOption : _ref$isValidNewOption,
+    _ref$getNewOptionData = _ref.getNewOptionData,
+    getNewOptionData = _ref$getNewOptionData === void 0 ? builtins.getNewOptionData : _ref$getNewOptionData,
+    onCreateOption = _ref.onCreateOption,
+    _ref$options = _ref.options,
+    propsOptions = _ref$options === void 0 ? [] : _ref$options,
+    propsOnChange = _ref.onChange,
+    restSelectProps = _objectWithoutProperties(_ref, _excluded);
+  var _restSelectProps$getO = restSelectProps.getOptionValue,
+    getOptionValue = _restSelectProps$getO === void 0 ? baseGetOptionValue : _restSelectProps$getO,
+    _restSelectProps$getO2 = restSelectProps.getOptionLabel,
+    getOptionLabel = _restSelectProps$getO2 === void 0 ? baseGetOptionLabel : _restSelectProps$getO2,
+    inputValue = restSelectProps.inputValue,
+    isLoading = restSelectProps.isLoading,
+    isMulti = restSelectProps.isMulti,
+    value = restSelectProps.value,
+    name = restSelectProps.name;
+  var newOption = useMemo(function () {
+    return (
+      //@ts-ignore
+      isValidNewOption(inputValue, cleanValue(value), propsOptions, {
+        getOptionValue: getOptionValue,
+        getOptionLabel: getOptionLabel
+      }) ? getNewOptionData(inputValue, formatCreateLabel(inputValue)) : undefined
+    );
+  }, [formatCreateLabel, getNewOptionData, getOptionLabel, getOptionValue, inputValue, isValidNewOption, propsOptions, value]);
+  var options = useMemo(function () {
+    return (allowCreateWhileLoading || !isLoading) && newOption ? createOptionPosition === 'first' ? [newOption].concat(_toConsumableArray(propsOptions)) : [].concat(_toConsumableArray(propsOptions), [newOption]) : propsOptions;
+  }, [allowCreateWhileLoading, createOptionPosition, isLoading, newOption, propsOptions]);
+  var onChange = useCallback(function (newValue, actionMeta) {
+    if (actionMeta.action !== 'select-option') {
+      return propsOnChange(newValue, actionMeta);
+    }
+    var valueArray = Array.isArray(newValue) ? newValue : [newValue];
+    if (valueArray[valueArray.length - 1] === newOption) {
+      if (onCreateOption) {
+        onCreateOption(inputValue);
+      } else {
+        var newOptionData = getNewOptionData(inputValue, inputValue);
+        var newActionMeta = {
+          action: 'create-option',
+          name: name,
+          option: newOptionData
+        };
+        propsOnChange(
+        //@ts-ignore
+        valueTernary(isMulti, [].concat(_toConsumableArray(cleanValue(value)), [newOptionData]), newOptionData), newActionMeta);
+      }
+      return;
+    }
+    propsOnChange(newValue, actionMeta);
+  }, [getNewOptionData, inputValue, isMulti, name, newOption, onCreateOption, propsOnChange, value]);
+  return _objectSpread(_objectSpread({}, restSelectProps), {}, {
+    options: options,
+    onChange: onChange
+  });
+}

package/dist/esm/use-state-manager.js

@@ -0,0 +1,76 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["defaultInputValue", "defaultMenuIsOpen", "defaultValue", "inputValue", "menuIsOpen", "onChange", "onInputChange", "onMenuClose", "onMenuOpen", "value"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { useCallback, useState } from 'react';
+// TODO: Fill in the hook {description}.
+/**
+ * {description}.
+ */
+export default function useStateManager(_ref) {
+  var _ref$defaultInputValu = _ref.defaultInputValue,
+    defaultInputValue = _ref$defaultInputValu === void 0 ? '' : _ref$defaultInputValu,
+    _ref$defaultMenuIsOpe = _ref.defaultMenuIsOpen,
+    defaultMenuIsOpen = _ref$defaultMenuIsOpe === void 0 ? false : _ref$defaultMenuIsOpe,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? null : _ref$defaultValue,
+    propsInputValue = _ref.inputValue,
+    propsMenuIsOpen = _ref.menuIsOpen,
+    propsOnChange = _ref.onChange,
+    propsOnInputChange = _ref.onInputChange,
+    propsOnMenuClose = _ref.onMenuClose,
+    propsOnMenuOpen = _ref.onMenuOpen,
+    propsValue = _ref.value,
+    restSelectProps = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(propsInputValue !== undefined ? propsInputValue : defaultInputValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    stateInputValue = _useState2[0],
+    setStateInputValue = _useState2[1];
+  var _useState3 = useState(propsMenuIsOpen !== undefined ? propsMenuIsOpen : defaultMenuIsOpen),
+    _useState4 = _slicedToArray(_useState3, 2),
+    stateMenuIsOpen = _useState4[0],
+    setStateMenuIsOpen = _useState4[1];
+  var _useState5 = useState(propsValue !== undefined ? propsValue : defaultValue),
+    _useState6 = _slicedToArray(_useState5, 2),
+    stateValue = _useState6[0],
+    setStateValue = _useState6[1];
+  var onChange = useCallback(function (value, actionMeta) {
+    if (typeof propsOnChange === 'function') {
+      propsOnChange(value, actionMeta);
+    }
+    setStateValue(value);
+  }, [propsOnChange]);
+  var onInputChange = useCallback(function (value, actionMeta) {
+    var newValue;
+    if (typeof propsOnInputChange === 'function') {
+      newValue = propsOnInputChange(value, actionMeta);
+    }
+    setStateInputValue(newValue !== undefined ? newValue : value);
+  }, [propsOnInputChange]);
+  var onMenuOpen = useCallback(function () {
+    if (typeof propsOnMenuOpen === 'function') {
+      propsOnMenuOpen();
+    }
+    setStateMenuIsOpen(true);
+  }, [propsOnMenuOpen]);
+  var onMenuClose = useCallback(function () {
+    if (typeof propsOnMenuClose === 'function') {
+      propsOnMenuClose();
+    }
+    setStateMenuIsOpen(false);
+  }, [propsOnMenuClose]);
+  var inputValue = propsInputValue !== undefined ? propsInputValue : stateInputValue;
+  var menuIsOpen = propsMenuIsOpen !== undefined ? propsMenuIsOpen : stateMenuIsOpen;
+  var value = propsValue !== undefined ? propsValue : stateValue;
+  return _objectSpread(_objectSpread({}, restSelectProps), {}, {
+    inputValue: inputValue,
+    menuIsOpen: menuIsOpen,
+    onChange: onChange,
+    onInputChange: onInputChange,
+    onMenuClose: onMenuClose,
+    onMenuOpen: onMenuOpen,
+    value: value
+  });
+}