@atlaskit/react-select 0.0.2

package/dist/cjs/utils.js

@@ -0,0 +1,357 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.animatedScrollTo = animatedScrollTo;
+exports.classNames = classNames;
+exports.emptyString = exports.cleanValue = exports.cleanCommonProps = void 0;
+exports.getBoundingClientObj = getBoundingClientObj;
+exports.getScrollParent = getScrollParent;
+exports.getScrollTop = getScrollTop;
+exports.getStyleProps = void 0;
+exports.handleInputChange = handleInputChange;
+exports.isArray = isArray;
+exports.isDocumentElement = isDocumentElement;
+exports.isMobileDevice = isMobileDevice;
+exports.isTouchCapable = isTouchCapable;
+exports.multiValueAsValue = multiValueAsValue;
+exports.noop = void 0;
+exports.normalizedHeight = normalizedHeight;
+exports.notNullish = notNullish;
+exports.removeProps = void 0;
+exports.scrollIntoView = scrollIntoView;
+exports.scrollTo = scrollTo;
+exports.singleValueAsValue = singleValueAsValue;
+exports.supportsPassiveEvents = void 0;
+exports.toKey = toKey;
+exports.valueTernary = valueTernary;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _excluded = ["className", "clearValue", "cx", "getStyles", "getClassNames", "getValue", "hasValue", "isMulti", "isRtl", "options", "selectOption", "selectProps", "setValue", "theme"];
+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) { (0, _defineProperty2.default)(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; }
+// ==============================
+// NO OP
+// ==============================
+
+var noop = exports.noop = function noop() {};
+var emptyString = exports.emptyString = function emptyString() {
+  return '';
+};
+
+// ==============================
+// 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;
+  }
+}
+function classNames(prefix, state) {
+  for (var _len = arguments.length, classNameList = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+    classNameList[_key - 2] = arguments[_key];
+  }
+  var arr = [].concat(classNameList);
+  if (state && prefix) {
+    for (var key in state) {
+      if (state.hasOwnProperty(key) && state[key]) {
+        arr.push("".concat(applyPrefixToName(prefix, key)));
+      }
+    }
+  }
+  return arr.filter(function (i) {
+    return i;
+  }).map(function (i) {
+    return String(i).trim();
+  }).join(' ');
+}
+// ==============================
+// Clean Value
+// ==============================
+
+var cleanValue = exports.cleanValue = function cleanValue(value) {
+  if (isArray(value)) {
+    return value.filter(Boolean);
+  }
+  if ((0, _typeof2.default)(value) === 'object' && value !== null) {
+    return [value];
+  }
+  return [];
+};
+
+// ==============================
+// Clean Common Props
+// ==============================
+
+var cleanCommonProps = exports.cleanCommonProps = function cleanCommonProps(props) {
+  //className
+  var className = props.className,
+    clearValue = props.clearValue,
+    cx = props.cx,
+    getStyles = props.getStyles,
+    getClassNames = props.getClassNames,
+    getValue = props.getValue,
+    hasValue = props.hasValue,
+    isMulti = props.isMulti,
+    isRtl = props.isRtl,
+    options = props.options,
+    selectOption = props.selectOption,
+    selectProps = props.selectProps,
+    setValue = props.setValue,
+    theme = props.theme,
+    innerProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return _objectSpread({}, innerProps);
+};
+
+// ==============================
+// Get Style Props
+// ==============================
+
+var getStyleProps = exports.getStyleProps = function getStyleProps(props, name, classNamesState) {
+  var cx = props.cx,
+    getStyles = props.getStyles,
+    getClassNames = props.getClassNames,
+    className = props.className;
+  return {
+    css: getStyles(name, props),
+    className: cx(classNamesState !== null && classNamesState !== void 0 ? classNamesState : {}, getClassNames(name, props), className)
+  };
+};
+
+// ==============================
+// Handle Input Change
+// ==============================
+
+function handleInputChange(inputValue, actionMeta, onInputChange) {
+  if (onInputChange) {
+    var _newValue = onInputChange(inputValue, actionMeta);
+    if (typeof _newValue === 'string') {
+      return _newValue;
+    }
+  }
+  return inputValue;
+}
+
+// ==============================
+// Scroll Helpers
+// ==============================
+
+function isDocumentElement(el) {
+  return [document.documentElement, document.body, window].indexOf(el) > -1;
+}
+
+// Normalized Scroll Top
+// ------------------------------
+
+function normalizedHeight(el) {
+  if (isDocumentElement(el)) {
+    return window.innerHeight;
+  }
+  return el.clientHeight;
+}
+
+// Normalized scrollTo & scrollTop
+// ------------------------------
+
+function getScrollTop(el) {
+  if (isDocumentElement(el)) {
+    return window.pageYOffset;
+  }
+  return el.scrollTop;
+}
+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
+// ------------------------------
+
+function getScrollParent(element) {
+  var style = getComputedStyle(element);
+  var excludeStaticParent = style.position === 'absolute';
+  var overflowRx = /(auto|scroll)/;
+  if (style.position === 'fixed') {
+    return document.documentElement;
+  }
+  for (var 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;
+}
+function animatedScrollTo(element, to) {
+  var duration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 200;
+  var callback = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : noop;
+  var start = getScrollTop(element);
+  var change = to - start;
+  var increment = 10;
+  var currentTime = 0;
+  function animateScroll() {
+    currentTime += increment;
+    var val = easeOutCubic(currentTime, start, change, duration);
+    scrollTo(element, val);
+    if (currentTime < duration) {
+      window.requestAnimationFrame(animateScroll);
+    } else {
+      callback(element);
+    }
+  }
+  animateScroll();
+}
+
+// Scroll Into View
+// ------------------------------
+
+function scrollIntoView(menuEl, focusedEl) {
+  var menuRect = menuEl.getBoundingClientRect();
+  var focusedRect = focusedEl.getBoundingClientRect();
+  var 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
+function getBoundingClientObj(element) {
+  var 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)
+// ==============================
+
+function toKey(str) {
+  return str.replace(/\W/g, '-');
+}
+
+// ==============================
+// Touch Capability Detector
+// ==============================
+
+function isTouchCapable() {
+  try {
+    document.createEvent('TouchEvent');
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+// ==============================
+// Mobile Device Detector
+// ==============================
+
+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
+var passiveOptionAccessed = false;
+var options = {
+  get passive() {
+    return passiveOptionAccessed = true;
+  }
+};
+// check for SSR
+var 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);
+}
+var supportsPassiveEvents = exports.supportsPassiveEvents = passiveOptionAccessed;
+function notNullish(item) {
+  return item != null;
+}
+function isArray(arg) {
+  return Array.isArray(arg);
+}
+function valueTernary(isMulti, multiValue, singleValue) {
+  return isMulti ? multiValue : singleValue;
+}
+function singleValueAsValue(singleValue) {
+  return singleValue;
+}
+function multiValueAsValue(multiValue) {
+  return multiValue;
+}
+var removeProps = exports.removeProps = function removeProps(propsObj) {
+  for (var _len2 = arguments.length, properties = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+    properties[_key2 - 1] = arguments[_key2];
+  }
+  var propsMap = Object.entries(propsObj).filter(function (_ref) {
+    var _ref2 = (0, _slicedToArray2.default)(_ref, 1),
+      key = _ref2[0];
+    return !properties.includes(key);
+  });
+  return propsMap.reduce(function (newProps, _ref3) {
+    var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
+      key = _ref4[0],
+      val = _ref4[1];
+    newProps[key] = val;
+    return newProps;
+  }, {});
+};

package/dist/es2019/accessibility/helpers.js

@@ -0,0 +1,24 @@
+/// <reference types="user-agent-data-types" />
+
+function testPlatform(re) {
+  var _window$navigator$use;
+  return typeof window !== 'undefined' && window.navigator != null ? re.test(((_window$navigator$use = window.navigator['userAgentData']) === null || _window$navigator$use === void 0 ? void 0 : _window$navigator$use.platform) || window.navigator.platform) : false;
+}
+export function isIPhone() {
+  return testPlatform(/^iPhone/i);
+}
+export function isMac() {
+  return testPlatform(/^Mac/i);
+}
+export function isIPad() {
+  return testPlatform(/^iPad/i) ||
+  // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+  // eslint-disable-next-line compat/compat
+  isMac() && navigator.maxTouchPoints > 1;
+}
+export function isIOS() {
+  return isIPhone() || isIPad();
+}
+export function isAppleDevice() {
+  return isMac() || isIOS();
+}

package/dist/es2019/accessibility/index.js

@@ -0,0 +1,72 @@
+export const defaultAriaLiveMessages = {
+  guidance: props => {
+    const {
+      isSearchable,
+      isMulti,
+      tabSelectsValue,
+      context,
+      isInitialFocus
+    } = props;
+    switch (context) {
+      case 'menu':
+        return `Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu${tabSelectsValue ? ', press Tab to select the option and exit the menu' : ''}.`;
+      case 'input':
+        return isInitialFocus ? `${props['aria-label'] || 'Select'} is focused ${isSearchable ? ',type to refine list' : ''}, press Down to open the menu, ${isMulti ? ' press left to focus selected values' : ''}` : '';
+      case 'value':
+        return 'Use left and right to toggle between focused values, press Backspace to remove the currently focused value';
+      default:
+        return '';
+    }
+  },
+  onChange: props => {
+    const {
+      action,
+      label = '',
+      labels,
+      isDisabled
+    } = props;
+    switch (action) {
+      case 'deselect-option':
+      case 'pop-value':
+      case 'remove-value':
+        return `option ${label}, deselected.`;
+      case 'clear':
+        return 'All selected options have been cleared.';
+      case 'initial-input-focus':
+        return `option${labels.length > 1 ? 's' : ''} ${labels.join(',')}, selected.`;
+      case 'select-option':
+        return isDisabled ? `option ${label} is disabled. Select another option.` : `option ${label}, selected.`;
+      default:
+        return '';
+    }
+  },
+  onFocus: props => {
+    const {
+      context,
+      focused,
+      options,
+      label = '',
+      selectValue,
+      isDisabled,
+      isSelected,
+      isAppleDevice
+    } = props;
+    const getArrayIndex = (arr, item) => arr && arr.length ? `${arr.indexOf(item) + 1} of ${arr.length}` : '';
+    if (context === 'value' && selectValue) {
+      return `value ${label} focused, ${getArrayIndex(selectValue, focused)}.`;
+    }
+    if (context === 'menu' && isAppleDevice) {
+      const disabled = isDisabled ? ' disabled' : '';
+      const status = `${isSelected ? ' selected' : ''}${disabled}`;
+      return `${label}${status}, ${getArrayIndex(options, focused)}.`;
+    }
+    return '';
+  },
+  onFilter: props => {
+    const {
+      inputValue,
+      resultsMessage
+    } = props;
+    return `${resultsMessage}${inputValue ? ' for search term ' + inputValue : ''}.`;
+  }
+};

package/dist/es2019/async-creatable.js

@@ -0,0 +1,17 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef } from 'react';
+import Select from './select';
+import useAsync from './use-async';
+import useCreatable from './use-creatable';
+import useStateManager from './use-state-manager';
+const AsyncCreatableSelect = /*#__PURE__*/forwardRef((props, ref) => {
+  const stateManagerProps = useAsync(props);
+  const creatableProps = useStateManager(stateManagerProps);
+  const selectProps = useCreatable(creatableProps);
+  return /*#__PURE__*/React.createElement(Select, _extends({
+    ref: ref
+  }, selectProps));
+});
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export default AsyncCreatableSelect;

package/dist/es2019/async.js

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef } from 'react';
+import Select from './select';
+import useAsync from './use-async';
+import useStateManager from './use-state-manager';
+const AsyncSelect = /*#__PURE__*/forwardRef((props, ref) => {
+  const stateManagedProps = useAsync(props);
+  const selectProps = useStateManager(stateManagedProps);
+  return /*#__PURE__*/React.createElement(Select, _extends({
+    ref: ref
+  }, selectProps));
+});
+export { useAsync };
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export default AsyncSelect;

package/dist/es2019/builtins.js

@@ -0,0 +1,4 @@
+export const formatGroupLabel = group => group.label;
+export const getOptionLabel = option => option.label;
+export const getOptionValue = option => option.value;
+export const isOptionDisabled = option => !!option.isDisabled;

package/dist/es2019/components/containers.js

@@ -0,0 +1,100 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import { jsx } from '@emotion/react';
+import { getStyleProps } from '../utils';
+
+// ==============================
+// Root Container
+// ==============================
+
+export const containerCSS = ({
+  isDisabled,
+  isRtl
+}) => ({
+  label: 'container',
+  direction: isRtl ? 'rtl' : undefined,
+  pointerEvents: isDisabled ? 'none' : undefined,
+  // cancel mouse events when disabled
+  position: 'relative'
+});
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export const SelectContainer = props => {
+  const {
+    children,
+    innerProps,
+    isDisabled,
+    isRtl
+  } = props;
+  return jsx("div", _extends({}, getStyleProps(props, 'container', {
+    '--is-disabled': isDisabled,
+    '--is-rtl': isRtl
+  }), innerProps), children);
+};
+
+// ==============================
+// Value Container
+// ==============================
+
+export const valueContainerCSS = ({
+  theme: {
+    spacing
+  },
+  isMulti,
+  hasValue,
+  selectProps: {
+    controlShouldRenderValue
+  }
+}, unstyled) => ({
+  alignItems: 'center',
+  display: isMulti && hasValue && controlShouldRenderValue ? 'flex' : 'grid',
+  flex: 1,
+  flexWrap: 'wrap',
+  WebkitOverflowScrolling: 'touch',
+  position: 'relative',
+  overflow: 'hidden',
+  ...(unstyled ? {} : {
+    padding: `${spacing.baseUnit / 2}px ${spacing.baseUnit * 2}px`
+  })
+});
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export const ValueContainer = props => {
+  const {
+    children,
+    innerProps,
+    isMulti,
+    hasValue
+  } = props;
+  return jsx("div", _extends({}, getStyleProps(props, 'valueContainer', {
+    'value-container': true,
+    'value-container--is-multi': isMulti,
+    'value-container--has-value': hasValue
+  }), innerProps), children);
+};
+
+// ==============================
+// Indicator Container
+// ==============================
+
+export const indicatorsContainerCSS = () => ({
+  alignItems: 'center',
+  alignSelf: 'stretch',
+  display: 'flex',
+  flexShrink: 0
+});
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export const IndicatorsContainer = props => {
+  const {
+    children,
+    innerProps
+  } = props;
+  return jsx("div", _extends({}, getStyleProps(props, 'indicatorsContainer', {
+    indicators: true
+  }), innerProps), children);
+};

package/dist/es2019/components/control.js

@@ -0,0 +1,62 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import { jsx } from '@emotion/react';
+import { getStyleProps } from '../utils';
+export const css = ({
+  isDisabled,
+  isFocused,
+  theme: {
+    colors,
+    borderRadius,
+    spacing
+  }
+}, unstyled) => ({
+  label: 'control',
+  alignItems: 'center',
+  cursor: 'default',
+  display: 'flex',
+  flexWrap: 'wrap',
+  justifyContent: 'space-between',
+  minHeight: spacing.controlHeight,
+  outline: '0 !important',
+  position: 'relative',
+  transition: 'all 100ms',
+  ...(unstyled ? {} : {
+    backgroundColor: isDisabled ? colors.neutral5 : colors.neutral0,
+    borderColor: isDisabled ? colors.neutral10 : isFocused ? colors.primary : colors.neutral20,
+    borderRadius: borderRadius,
+    borderStyle: 'solid',
+    borderWidth: 1,
+    boxShadow: isFocused ? `0 0 0 1px ${colors.primary}` : undefined,
+    '&:hover': {
+      borderColor: isFocused ? colors.primary : colors.neutral30
+    }
+  })
+});
+const Control = props => {
+  const {
+    children,
+    isDisabled,
+    isFocused,
+    innerRef,
+    innerProps,
+    menuIsOpen
+  } = props;
+  return jsx("div", _extends({
+    ref: innerRef
+  }, getStyleProps(props, 'control', {
+    control: true,
+    'control--is-disabled': isDisabled,
+    'control--is-focused': isFocused,
+    'control--menu-is-open': menuIsOpen
+  }), innerProps, {
+    "aria-disabled": isDisabled || undefined
+  }), children);
+};
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export default Control;