@atlaskit/react-select 0.0.2

package/dist/es2019/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)
+ */
+
+const StateManagedSelect = /*#__PURE__*/forwardRef((props, ref) => {
+  const baseSelectProps = useStateManager(props);
+  return /*#__PURE__*/React.createElement(Select, _extends({
+    ref: ref
+  }, baseSelectProps));
+});
+export default StateManagedSelect;

package/dist/es2019/styles.js

@@ -0,0 +1,56 @@
+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 const 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, target = {}) {
+  // initialize with source styles
+  const styles = {
+    ...source
+  };
+
+  // massage in target styles
+  Object.keys(target).forEach(keyAsString => {
+    const key = keyAsString;
+    if (source[key]) {
+      styles[key] = (rsCss, props) => {
+        return target[key](source[key](rsCss, props), props);
+      };
+    } else {
+      styles[key] = target[key];
+    }
+  });
+  return styles;
+}

package/dist/es2019/theme.js

@@ -0,0 +1,36 @@
+export const 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%)'
+};
+const borderRadius = 4;
+// Used to calculate consistent margin/padding on elements
+const baseUnit = 4;
+// The minimum height of the control
+const controlHeight = 38;
+// The amount of space between the control and menu */
+const menuGutter = baseUnit * 2;
+export const spacing = {
+  baseUnit,
+  controlHeight,
+  menuGutter
+};
+export const defaultTheme = {
+  borderRadius,
+  colors,
+  spacing
+};

package/dist/es2019/types.js

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

package/dist/es2019/use-async.js

@@ -0,0 +1,117 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { handleInputChange } from './utils';
+// TODO: Fill in the hook {description}.
+/**
+ * {description}.
+ */
+export default function useAsync({
+  defaultOptions: propsDefaultOptions = false,
+  cacheOptions = false,
+  loadOptions: propsLoadOptions,
+  options: propsOptions,
+  isLoading: propsIsLoading = false,
+  onInputChange: propsOnInputChange,
+  filterOption = null,
+  ...restSelectProps
+}) {
+  const {
+    inputValue: propsInputValue
+  } = restSelectProps;
+  const lastRequest = useRef(undefined);
+  const mounted = useRef(false);
+  const [defaultOptions, setDefaultOptions] = useState(Array.isArray(propsDefaultOptions) ? propsDefaultOptions : undefined);
+  const [stateInputValue, setStateInputValue] = useState(typeof propsInputValue !== 'undefined' ? propsInputValue : '');
+  const [isLoading, setIsLoading] = useState(propsDefaultOptions === true);
+  const [loadedInputValue, setLoadedInputValue] = useState(undefined);
+  const [loadedOptions, setLoadedOptions] = useState([]);
+  const [passEmptyOptions, setPassEmptyOptions] = useState(false);
+  const [optionsCache, setOptionsCache] = useState({});
+  const [prevDefaultOptions, setPrevDefaultOptions] = useState(undefined);
+  const [prevCacheOptions, setPrevCacheOptions] = useState(undefined);
+  if (cacheOptions !== prevCacheOptions) {
+    setOptionsCache({});
+    setPrevCacheOptions(cacheOptions);
+  }
+  if (propsDefaultOptions !== prevDefaultOptions) {
+    setDefaultOptions(Array.isArray(propsDefaultOptions) ? propsDefaultOptions : undefined);
+    setPrevDefaultOptions(propsDefaultOptions);
+  }
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  const loadOptions = useCallback((inputValue, callback) => {
+    if (!propsLoadOptions) {
+      return callback();
+    }
+    const loader = propsLoadOptions(inputValue, callback);
+    if (loader && typeof loader.then === 'function') {
+      loader.then(callback, () => callback());
+    }
+  }, [propsLoadOptions]);
+  useEffect(() => {
+    if (propsDefaultOptions === true) {
+      loadOptions(stateInputValue, 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
+  }, []);
+  const onInputChange = useCallback((newValue, actionMeta) => {
+    const 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 {
+      const request = lastRequest.current = {};
+      setStateInputValue(inputValue);
+      setIsLoading(true);
+      setPassEmptyOptions(!loadedInputValue);
+      loadOptions(inputValue, options => {
+        if (!mounted) {
+          return;
+        }
+        if (request !== lastRequest.current) {
+          return;
+        }
+        lastRequest.current = undefined;
+        setIsLoading(false);
+        setLoadedInputValue(inputValue);
+        setLoadedOptions(options || []);
+        setPassEmptyOptions(false);
+        setOptionsCache(options ? {
+          ...optionsCache,
+          [inputValue]: options
+        } : optionsCache);
+      });
+    }
+  }, [cacheOptions, loadOptions, loadedInputValue, optionsCache, propsOnInputChange]);
+  const options = passEmptyOptions ? [] : stateInputValue && loadedInputValue ? loadedOptions : defaultOptions || [];
+  return {
+    ...restSelectProps,
+    options,
+    isLoading: isLoading || propsIsLoading,
+    onInputChange,
+    filterOption
+  };
+}

package/dist/es2019/use-creatable.js

@@ -0,0 +1,81 @@
+import { useCallback, useMemo } from 'react';
+import { getOptionLabel as baseGetOptionLabel, getOptionValue as baseGetOptionValue } from './builtins';
+import { cleanValue, valueTernary } from './utils';
+const compareOption = (inputValue = '', option, accessors) => {
+  const candidate = String(inputValue).toLowerCase();
+  const optionValue = String(accessors.getOptionValue(option)).toLowerCase();
+  const optionLabel = String(accessors.getOptionLabel(option)).toLowerCase();
+  return optionValue === candidate || optionLabel === candidate;
+};
+const builtins = {
+  formatCreateLabel: inputValue => `Create "${inputValue}"`,
+  isValidNewOption: (inputValue, selectValue, selectOptions, accessors) => !(!inputValue || selectValue.some(option => compareOption(inputValue, option, accessors)) || selectOptions.some(option => compareOption(inputValue, option, accessors))),
+  getNewOptionData: (inputValue, optionLabel) => ({
+    label: optionLabel,
+    value: inputValue,
+    __isNew__: true
+  })
+};
+
+// TODO: Fill in the hook {description}.
+/**
+ * {description}.
+ */
+export default function useCreatable({
+  allowCreateWhileLoading = false,
+  createOptionPosition = 'last',
+  formatCreateLabel = builtins.formatCreateLabel,
+  //@ts-ignore
+  isValidNewOption = builtins.isValidNewOption,
+  //@ts-ignore
+  getNewOptionData = builtins.getNewOptionData,
+  onCreateOption,
+  options: propsOptions = [],
+  onChange: propsOnChange,
+  ...restSelectProps
+}) {
+  const {
+    getOptionValue = baseGetOptionValue,
+    getOptionLabel = baseGetOptionLabel,
+    inputValue,
+    isLoading,
+    isMulti,
+    value,
+    name
+  } = restSelectProps;
+  const newOption = useMemo(() =>
+  //@ts-ignore
+  isValidNewOption(inputValue, cleanValue(value), propsOptions, {
+    getOptionValue,
+    getOptionLabel
+  }) ? getNewOptionData(inputValue, formatCreateLabel(inputValue)) : undefined, [formatCreateLabel, getNewOptionData, getOptionLabel, getOptionValue, inputValue, isValidNewOption, propsOptions, value]);
+  const options = useMemo(() => (allowCreateWhileLoading || !isLoading) && newOption ? createOptionPosition === 'first' ? [newOption, ...propsOptions] : [...propsOptions, newOption] : propsOptions, [allowCreateWhileLoading, createOptionPosition, isLoading, newOption, propsOptions]);
+  const onChange = useCallback((newValue, actionMeta) => {
+    if (actionMeta.action !== 'select-option') {
+      return propsOnChange(newValue, actionMeta);
+    }
+    const valueArray = Array.isArray(newValue) ? newValue : [newValue];
+    if (valueArray[valueArray.length - 1] === newOption) {
+      if (onCreateOption) {
+        onCreateOption(inputValue);
+      } else {
+        const newOptionData = getNewOptionData(inputValue, inputValue);
+        const newActionMeta = {
+          action: 'create-option',
+          name,
+          option: newOptionData
+        };
+        propsOnChange(
+        //@ts-ignore
+        valueTernary(isMulti, [...cleanValue(value), newOptionData], newOptionData), newActionMeta);
+      }
+      return;
+    }
+    propsOnChange(newValue, actionMeta);
+  }, [getNewOptionData, inputValue, isMulti, name, newOption, onCreateOption, propsOnChange, value]);
+  return {
+    ...restSelectProps,
+    options,
+    onChange
+  };
+}

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

@@ -0,0 +1,60 @@
+import { useCallback, useState } from 'react';
+// TODO: Fill in the hook {description}.
+/**
+ * {description}.
+ */
+export default function useStateManager({
+  defaultInputValue = '',
+  defaultMenuIsOpen = false,
+  defaultValue = null,
+  inputValue: propsInputValue,
+  menuIsOpen: propsMenuIsOpen,
+  onChange: propsOnChange,
+  onInputChange: propsOnInputChange,
+  onMenuClose: propsOnMenuClose,
+  onMenuOpen: propsOnMenuOpen,
+  value: propsValue,
+  ...restSelectProps
+}) {
+  const [stateInputValue, setStateInputValue] = useState(propsInputValue !== undefined ? propsInputValue : defaultInputValue);
+  const [stateMenuIsOpen, setStateMenuIsOpen] = useState(propsMenuIsOpen !== undefined ? propsMenuIsOpen : defaultMenuIsOpen);
+  const [stateValue, setStateValue] = useState(propsValue !== undefined ? propsValue : defaultValue);
+  const onChange = useCallback((value, actionMeta) => {
+    if (typeof propsOnChange === 'function') {
+      propsOnChange(value, actionMeta);
+    }
+    setStateValue(value);
+  }, [propsOnChange]);
+  const onInputChange = useCallback((value, actionMeta) => {
+    let newValue;
+    if (typeof propsOnInputChange === 'function') {
+      newValue = propsOnInputChange(value, actionMeta);
+    }
+    setStateInputValue(newValue !== undefined ? newValue : value);
+  }, [propsOnInputChange]);
+  const onMenuOpen = useCallback(() => {
+    if (typeof propsOnMenuOpen === 'function') {
+      propsOnMenuOpen();
+    }
+    setStateMenuIsOpen(true);
+  }, [propsOnMenuOpen]);
+  const onMenuClose = useCallback(() => {
+    if (typeof propsOnMenuClose === 'function') {
+      propsOnMenuClose();
+    }
+    setStateMenuIsOpen(false);
+  }, [propsOnMenuClose]);
+  const inputValue = propsInputValue !== undefined ? propsInputValue : stateInputValue;
+  const menuIsOpen = propsMenuIsOpen !== undefined ? propsMenuIsOpen : stateMenuIsOpen;
+  const value = propsValue !== undefined ? propsValue : stateValue;
+  return {
+    ...restSelectProps,
+    inputValue,
+    menuIsOpen,
+    onChange,
+    onInputChange,
+    onMenuClose,
+    onMenuOpen,
+    value
+  };
+}

package/dist/es2019/utils.js

@@ -0,0 +1,309 @@
+// ==============================
+// NO OP
+// ==============================
+
+export const noop = () => {};
+export const emptyString = () => '';
+
+// ==============================
+// Class Name Prefixer
+// ==============================
+
+/**
+ * String representation of component state for styling with class names.
+ *
+ * Expects an array of strings OR a string/object pair:
+ * - className(['comp', 'comp-arg', 'comp-arg-2'])
+ * @returns 'react-select__comp react-select__comp-arg react-select__comp-arg-2'
+ * - className('comp', { some: true, state: false })
+ * @returns 'react-select__comp react-select__comp--some'
+ */
+function applyPrefixToName(prefix, name) {
+  if (!name) {
+    return prefix;
+  } else if (name[0] === '-') {
+    return prefix + name;
+  } else {
+    return prefix + '__' + name;
+  }
+}
+export function classNames(prefix, state, ...classNameList) {
+  const arr = [...classNameList];
+  if (state && prefix) {
+    for (let key in state) {
+      if (state.hasOwnProperty(key) && state[key]) {
+        arr.push(`${applyPrefixToName(prefix, key)}`);
+      }
+    }
+  }
+  return arr.filter(i => i).map(i => String(i).trim()).join(' ');
+}
+// ==============================
+// Clean Value
+// ==============================
+
+export const cleanValue = value => {
+  if (isArray(value)) {
+    return value.filter(Boolean);
+  }
+  if (typeof value === 'object' && value !== null) {
+    return [value];
+  }
+  return [];
+};
+
+// ==============================
+// Clean Common Props
+// ==============================
+
+export const cleanCommonProps = props => {
+  //className
+  const {
+    className,
+    // not listed in commonProps documentation, needs to be removed to allow Emotion to generate classNames
+    clearValue,
+    cx,
+    getStyles,
+    getClassNames,
+    getValue,
+    hasValue,
+    isMulti,
+    isRtl,
+    options,
+    // not listed in commonProps documentation
+    selectOption,
+    selectProps,
+    setValue,
+    theme,
+    // not listed in commonProps documentation
+    ...innerProps
+  } = props;
+  return {
+    ...innerProps
+  };
+};
+
+// ==============================
+// Get Style Props
+// ==============================
+
+export const getStyleProps = (props, name, classNamesState) => {
+  const {
+    cx,
+    getStyles,
+    getClassNames,
+    className
+  } = props;
+  return {
+    css: getStyles(name, props),
+    className: cx(classNamesState !== null && classNamesState !== void 0 ? classNamesState : {}, getClassNames(name, props), className)
+  };
+};
+
+// ==============================
+// Handle Input Change
+// ==============================
+
+export function handleInputChange(inputValue, actionMeta, onInputChange) {
+  if (onInputChange) {
+    const newValue = onInputChange(inputValue, actionMeta);
+    if (typeof newValue === 'string') {
+      return newValue;
+    }
+  }
+  return inputValue;
+}
+
+// ==============================
+// Scroll Helpers
+// ==============================
+
+export function isDocumentElement(el) {
+  return [document.documentElement, document.body, window].indexOf(el) > -1;
+}
+
+// Normalized Scroll Top
+// ------------------------------
+
+export function normalizedHeight(el) {
+  if (isDocumentElement(el)) {
+    return window.innerHeight;
+  }
+  return el.clientHeight;
+}
+
+// Normalized scrollTo & scrollTop
+// ------------------------------
+
+export function getScrollTop(el) {
+  if (isDocumentElement(el)) {
+    return window.pageYOffset;
+  }
+  return el.scrollTop;
+}
+export function scrollTo(el, top) {
+  // with a scroll distance, we perform scroll on the element
+  if (isDocumentElement(el)) {
+    window.scrollTo(0, top);
+    return;
+  }
+  el.scrollTop = top;
+}
+
+// Get Scroll Parent
+// ------------------------------
+
+export function getScrollParent(element) {
+  let style = getComputedStyle(element);
+  const excludeStaticParent = style.position === 'absolute';
+  const overflowRx = /(auto|scroll)/;
+  if (style.position === 'fixed') {
+    return document.documentElement;
+  }
+  for (let parent = element; parent = parent.parentElement;) {
+    style = getComputedStyle(parent);
+    if (excludeStaticParent && style.position === 'static') {
+      continue;
+    }
+    if (overflowRx.test(style.overflow + style.overflowY + style.overflowX)) {
+      return parent;
+    }
+  }
+  return document.documentElement;
+}
+
+// Animated Scroll To
+// ------------------------------
+
+/**
+ * @param t: time (elapsed)
+ * @param b: initial value
+ * @param c: amount of change
+ * @param d: duration
+ */
+function easeOutCubic(t, b, c, d) {
+  return c * ((t = t / d - 1) * t * t + 1) + b;
+}
+export function animatedScrollTo(element, to, duration = 200, callback = noop) {
+  const start = getScrollTop(element);
+  const change = to - start;
+  const increment = 10;
+  let currentTime = 0;
+  function animateScroll() {
+    currentTime += increment;
+    const val = easeOutCubic(currentTime, start, change, duration);
+    scrollTo(element, val);
+    if (currentTime < duration) {
+      window.requestAnimationFrame(animateScroll);
+    } else {
+      callback(element);
+    }
+  }
+  animateScroll();
+}
+
+// Scroll Into View
+// ------------------------------
+
+export function scrollIntoView(menuEl, focusedEl) {
+  const menuRect = menuEl.getBoundingClientRect();
+  const focusedRect = focusedEl.getBoundingClientRect();
+  const overScroll = focusedEl.offsetHeight / 3;
+  if (focusedRect.bottom + overScroll > menuRect.bottom) {
+    scrollTo(menuEl, Math.min(focusedEl.offsetTop + focusedEl.clientHeight - menuEl.offsetHeight + overScroll, menuEl.scrollHeight));
+  } else if (focusedRect.top - overScroll < menuRect.top) {
+    scrollTo(menuEl, Math.max(focusedEl.offsetTop - overScroll, 0));
+  }
+}
+
+// ==============================
+// Get bounding client object
+// ==============================
+
+// cannot get keys using array notation with DOMRect
+export function getBoundingClientObj(element) {
+  const rect = element.getBoundingClientRect();
+  return {
+    bottom: rect.bottom,
+    height: rect.height,
+    left: rect.left,
+    right: rect.right,
+    top: rect.top,
+    width: rect.width
+  };
+}
+// ==============================
+// String to Key (kebabify)
+// ==============================
+
+export function toKey(str) {
+  return str.replace(/\W/g, '-');
+}
+
+// ==============================
+// Touch Capability Detector
+// ==============================
+
+export function isTouchCapable() {
+  try {
+    document.createEvent('TouchEvent');
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+// ==============================
+// Mobile Device Detector
+// ==============================
+
+export function isMobileDevice() {
+  try {
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+  } catch (e) {
+    return false;
+  }
+}
+
+// ==============================
+// Passive Event Detector
+// ==============================
+
+// https://github.com/rafgraph/detect-it/blob/main/src/index.ts#L19-L36
+let passiveOptionAccessed = false;
+const options = {
+  get passive() {
+    return passiveOptionAccessed = true;
+  }
+};
+// check for SSR
+const w = typeof window !== 'undefined' ? window : {};
+if (w.addEventListener && w.removeEventListener) {
+  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+  w.addEventListener('p', noop, options);
+  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+  w.removeEventListener('p', noop, false);
+}
+export const supportsPassiveEvents = passiveOptionAccessed;
+export function notNullish(item) {
+  return item != null;
+}
+export function isArray(arg) {
+  return Array.isArray(arg);
+}
+export function valueTernary(isMulti, multiValue, singleValue) {
+  return isMulti ? multiValue : singleValue;
+}
+export function singleValueAsValue(singleValue) {
+  return singleValue;
+}
+export function multiValueAsValue(multiValue) {
+  return multiValue;
+}
+export const removeProps = (propsObj, ...properties) => {
+  let propsMap = Object.entries(propsObj).filter(([key]) => !properties.includes(key));
+  return propsMap.reduce((newProps, [key, val]) => {
+    newProps[key] = val;
+    return newProps;
+  }, {});
+};