@primer/components 0.0.0-2021922191125 → 0.0.0-2021922204627

package/lib/DatePicker/Month.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Month = void 0;
+
+var _dateFns = require("date-fns");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _constants = require("../constants");
+
+var _Day = require("./Day");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+
+const MonthComponent = (0, _styledComponents.default)(_Box.default).withConfig({
+  displayName: "Month__MonthComponent",
+  componentId: "l6j7o0-0"
+})(["display:grid;grid-auto-rows:min-content;grid-template-columns:repeat(1fr,7);grid-template-rows:1fr;gap:0px 0px;grid-template-areas:'month month month month month month month' 'sunday monday tuesday wednesday thursday friday saturday';justify-items:stretch;align-items:stretch;"]);
+const MonthTitle = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "Month__MonthTitle",
+  componentId: "l6j7o0-1"
+})(["font-size:", ";font-weight:", ";grid-area:month;justify-self:center;"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('fontWeights.bold'));
+const WeekdayHeader = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "Month__WeekdayHeader",
+  componentId: "l6j7o0-2"
+})(["color:", ";font-family:", ";font-size:", ";justify-self:center;padding:", " 0 ", ";"], (0, _constants.get)('colors.fg.subtle'), (0, _constants.get)('fonts.mono'), (0, _constants.get)('fontSizes.0'), (0, _constants.get)('space.3'), (0, _constants.get)('space.2'));
+
+const Month = ({
+  month,
+  year
+}) => {
+  const [selectedDay, setSelectedDay] = (0, _react.useState)(null);
+  const getTitle = (0, _react.useMemo)(() => `${(0, _dateFns.format)(new Date(year, month), 'MMMM yyyy')}`, [month, year]);
+  const weekdayHeaders = (0, _react.useMemo)(() => {
+    const now = new Date(year, month);
+    return (0, _dateFns.eachDayOfInterval)({
+      start: (0, _dateFns.startOfWeek)(now),
+      end: (0, _dateFns.endOfWeek)(now)
+    }).map(d => /*#__PURE__*/_react.default.createElement(WeekdayHeader, {
+      key: `weekday-${d}-header`
+    }, (0, _dateFns.format)(d, 'EEEEEE')));
+  }, [month, year]);
+
+  const dayAction = date => {
+    setSelectedDay(date);
+  };
+
+  const dayComponents = (0, _react.useMemo)(() => {
+    const components = [];
+    const firstDay = new Date(year, month, 1);
+
+    for (let i = 0; i < firstDay.getDay(); i++) {
+      components.push( /*#__PURE__*/_react.default.createElement(_Day.BlankDay, {
+        key: `month-pre-blank-${i}`
+      }));
+    }
+
+    for (let i = 1; i <= (0, _dateFns.getDaysInMonth)(firstDay); i++) {
+      const date = new Date(year, month, i);
+      components.push( /*#__PURE__*/_react.default.createElement(_Day.Day, {
+        key: `day-component-${date.toString()}`,
+        date: date,
+        selected: selectedDay ? (0, _dateFns.isEqual)(date, selectedDay) : false,
+        onAction: dayAction
+      }));
+    }
+
+    const lastDay = (0, _dateFns.lastDayOfMonth)(firstDay);
+
+    for (let i = 6; i > lastDay.getDay(); i--) {
+      components.push( /*#__PURE__*/_react.default.createElement(_Day.BlankDay, {
+        key: `month-post-blank-${i}`
+      }));
+    }
+
+    return components;
+  }, [month, selectedDay, year]);
+  return /*#__PURE__*/_react.default.createElement(MonthComponent, {
+    role: "grid"
+  }, /*#__PURE__*/_react.default.createElement(MonthTitle, null, getTitle), weekdayHeaders, dayComponents);
+};
+
+exports.Month = Month;
+Month.displayName = "Month";

package/lib/DatePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { DatePicker } from './DatePicker';
+export type { DatePickerProps } from './DatePicker';

package/lib/DatePicker/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DatePicker", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePicker;
+  }
+});
+
+var _DatePicker = require("./DatePicker");

package/lib/DatePicker/useDatePicker.d.ts

@@ -0,0 +1,69 @@
+import React from 'react';
+export declare type AnchorVariant = 'input' | 'button' | 'icon-only';
+export declare type DateFormat = 'short' | 'long' | string;
+export declare type SelectionVariant = 'single' | 'multi' | 'range';
+export interface DatePickerConfiguration {
+    anchorVariant?: AnchorVariant;
+    blockedDates?: Array<Date>;
+    confirmation?: boolean;
+    contiguousSelection?: boolean;
+    dateFormat?: DateFormat;
+    dimWeekends?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    placeholder?: string;
+    rangeIncrement?: number;
+    selection?: SelectionVariant;
+    view?: '1-month' | '2-month';
+}
+export declare type RangeSelection = {
+    from: Date;
+    to: Date | null;
+};
+export declare type StringRangeSelection = {
+    from: string;
+    to: string;
+};
+export interface DatePickerContext {
+    disabled?: boolean;
+    configuration: DatePickerConfiguration;
+    selection?: Selection;
+    softSelection?: Partial<RangeSelection> | null;
+    selectionActive?: boolean;
+    formattedDate: string;
+    onSelection: (date: Date) => void;
+    onDayFocus: (date: Date) => void;
+    onDayBlur: (date: Date) => void;
+    revertValue: () => void;
+}
+export declare type Selection = Date | Array<Date> | RangeSelection | null;
+export declare type StringSelection = string | Array<string> | {
+    to: string;
+    from: string;
+} | null;
+export declare type DaySelection = boolean | 'start' | 'middle' | 'end';
+declare const useDatePicker: (date?: Date | undefined) => {
+    blocked: boolean | undefined;
+    disabled: boolean;
+    selected: DaySelection;
+    configuration: DatePickerConfiguration;
+    selection?: Selection | undefined;
+    softSelection?: Partial<RangeSelection> | null | undefined;
+    selectionActive?: boolean | undefined;
+    formattedDate: string;
+    onSelection: (date: Date) => void;
+    onDayFocus: (date: Date) => void;
+    onDayBlur: (date: Date) => void;
+    revertValue: () => void;
+};
+export default useDatePicker;
+export interface DatePickerProviderProps {
+    closePicker?: () => void;
+    configuration?: DatePickerConfiguration;
+    value?: Selection | StringSelection;
+}
+export declare function isSingleSelection(selection: Selection): selection is Date;
+export declare function isMultiSelection(selection: Selection | StringSelection): selection is Array<Date> | Array<string>;
+export declare function isRangeSelection(selection: Selection | StringSelection): selection is RangeSelection | StringRangeSelection;
+export declare function isStringRangeSelection(selection: StringSelection): selection is StringRangeSelection;
+export declare const DatePickerProvider: React.FC<DatePickerProviderProps>;

package/lib/DatePicker/useDatePicker.js

@@ -0,0 +1,336 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isSingleSelection = isSingleSelection;
+exports.isMultiSelection = isMultiSelection;
+exports.isRangeSelection = isRangeSelection;
+exports.isStringRangeSelection = isStringRangeSelection;
+exports.DatePickerProvider = exports.default = void 0;
+
+var _dateFns = require("date-fns");
+
+var _deepmerge = _interopRequireDefault(require("deepmerge"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const DatePickerContext = /*#__PURE__*/(0, _react.createContext)(null);
+
+const useDatePicker = date => {
+  const value = (0, _react.useContext)(DatePickerContext);
+
+  if (!value) {
+    throw new Error('useDatePicker must be used inside a DatePickerProvider');
+  }
+
+  let selected = false;
+  let blocked,
+      disabled = false;
+
+  if (date) {
+    if (value.selection) {
+      if (isMultiSelection(value.selection)) {
+        selected = !!value.selection.find(d => (0, _dateFns.isEqual)(d, date));
+      } else if (isRangeSelection(value.selection)) {
+        if ((0, _dateFns.isEqual)(date, value.selection.from)) {
+          selected = 'start';
+        } else if (value.selection.to && (0, _dateFns.isEqual)(date, value.selection.to)) {
+          selected = 'end';
+        } else if ((0, _dateFns.isAfter)(date, value.selection.from) && value.selection.to && (0, _dateFns.isBefore)(date, value.selection.to)) {
+          selected = 'middle';
+        } else {
+          selected = false;
+        }
+      } else {
+        selected = (0, _dateFns.isEqual)(date, value.selection);
+      }
+    } // Determine if date is blocked out
+
+
+    if (value.configuration.blockedDates) {
+      blocked = !!value.configuration.blockedDates.find(d => (0, _dateFns.isEqual)(d, date));
+    } // Determine if date is disabled
+
+
+    if (value.configuration.minDate || value.configuration.maxDate) {
+      disabled = (value.configuration.minDate ? (0, _dateFns.isBefore)(date, value.configuration.minDate) : false) || (value.configuration.maxDate ? (0, _dateFns.isAfter)(date, value.configuration.maxDate) : false);
+    }
+  }
+
+  return { ...value,
+    blocked,
+    disabled,
+    selected
+  };
+};
+
+var _default = useDatePicker;
+exports.default = _default;
+
+function isSingleSelection(selection) {
+  return selection instanceof Date;
+}
+
+function isMultiSelection(selection) {
+  return Array.isArray(selection);
+}
+
+function isRangeSelection(selection) {
+  return !!selection.from;
+}
+
+function isStringRangeSelection(selection) {
+  return !!selection.from;
+}
+
+function parseSelection(selection, variant) {
+  if (!selection) return;
+
+  if (variant === 'multi') {
+    if (isMultiSelection(selection)) {
+      const parsedSelection = [];
+
+      for (const d of selection) {
+        parsedSelection.push(new Date(new Date(d).toDateString()));
+      }
+
+      return parsedSelection.sort((a, b) => a.getTime() - b.getTime());
+    } else if (selection instanceof Date) {
+      return [new Date(new Date(selection).toDateString())];
+    } else if (isRangeSelection(selection)) {
+      const parsedSelection = [];
+      parsedSelection.push(new Date(new Date(selection.from).toDateString()));
+
+      if (selection.to) {
+        parsedSelection.push(new Date(new Date(selection.to).toDateString()));
+      }
+
+      return parsedSelection.sort((a, b) => a.getTime() - b.getTime());
+    }
+  } else if (variant === 'range') {
+    if (isRangeSelection(selection)) {
+      return {
+        from: new Date(new Date(selection.from).toDateString()),
+        to: selection.to ? new Date(new Date(selection.to).toDateString()) : null
+      };
+    } else if (isMultiSelection(selection)) {
+      return {
+        from: new Date(new Date(selection[0]).toDateString()),
+        to: selection[1] ? new Date(new Date(selection[1]).toDateString()) : null
+      };
+    } else if (selection instanceof Date) {
+      return {
+        from: new Date(new Date(selection).toDateString()),
+        to: null
+      };
+    }
+  } else {
+    if (selection instanceof Date) {
+      return new Date(new Date(selection).toDateString());
+    } else if (isMultiSelection(selection)) {
+      return new Date(new Date(selection[0]).toDateString());
+    } else if (isRangeSelection(selection)) {
+      return new Date(new Date(selection.from).toDateString());
+    } else {
+      return;
+    }
+  }
+}
+
+const defaultConfiguration = {
+  anchorVariant: 'button',
+  confirmation: false,
+  contiguousSelection: false,
+  dimWeekends: false,
+  placeholder: 'Select a Date...',
+  selection: 'single',
+  view: '2-month'
+};
+
+const DatePickerProvider = ({
+  configuration: externalConfig = {},
+  children,
+  closePicker,
+  value
+}) => {
+  const [configuration, setConfiguration] = (0, _react.useState)((0, _deepmerge.default)(defaultConfiguration, externalConfig));
+  const [previousSelection, setPreviousSelection] = (0, _react.useState)(parseSelection(value, configuration.selection));
+  const [selection, setSelection] = (0, _react.useState)(parseSelection(value, configuration.selection));
+  const [hoverRange, setHoverRange] = (0, _react.useState)(null);
+  (0, _react.useEffect)(() => {
+    setConfiguration((0, _deepmerge.default)(defaultConfiguration, externalConfig));
+    setSelection(parseSelection(selection, configuration.selection)); // Don't want this to run every time selection gets updated
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [configuration.selection, externalConfig]);
+  const getFormattedDate = (0, _react.useMemo)(() => {
+    if (!selection) {
+      return configuration.placeholder;
+    }
+
+    let template = 'MMM d';
+
+    if (configuration.dateFormat) {
+      switch (configuration.dateFormat) {
+        case 'short':
+          template = 'MMM d';
+          break;
+
+        case 'long':
+          template = 'MMM d, yyyy';
+          break;
+
+        default:
+          template = configuration.dateFormat;
+          break;
+      }
+    }
+
+    switch (configuration.selection) {
+      case 'single':
+        {
+          if (selection instanceof Date) {
+            return (0, _dateFns.format)(selection, template);
+          } else if (Array.isArray(selection)) {
+            return (0, _dateFns.format)(selection[0], template);
+          } else if (isRangeSelection(selection)) {
+            return (0, _dateFns.format)(selection.from, template);
+          } else {
+            return 'Invalid Selection';
+          }
+        }
+
+      case 'multi':
+        {
+          if (Array.isArray(selection)) {
+            if (selection.length > 3) return `${selection.length} Selected`;
+            const formatted = selection.map(d => (0, _dateFns.format)(d, template)).join(', ');
+            return formatted;
+          } else if (selection instanceof Date) {
+            return [selection].map(d => (0, _dateFns.format)(d, template)).join(', ');
+          } else if (isRangeSelection(selection)) {
+            return [selection.to, selection.from].map(d => d ? (0, _dateFns.format)(d, template) : '').join(', ');
+          } else {
+            return 'Invalid Selection';
+          }
+        }
+
+      case 'range':
+        {
+          if (isRangeSelection(selection)) {
+            return Object.entries(selection).map(([_, date]) => date ? (0, _dateFns.format)(date, template) : '').join(' - ');
+          } else if (selection instanceof Date) {
+            return Object.entries({
+              from: selection,
+              to: null
+            }).map(([_, date]) => date ? (0, _dateFns.format)(date, template) : '').join(' - ');
+          } else if (Array.isArray(selection)) {
+            return Object.entries({
+              from: selection[0],
+              to: selection[1]
+            }) // to date can still be null
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            .map(([_, date]) => date ? (0, _dateFns.format)(date, template) : '').join(' - ');
+          } else {
+            return 'Invalid Selection';
+          }
+        }
+
+      default:
+        {
+          return 'Invalid Configuration';
+        }
+    }
+  }, [configuration.dateFormat, configuration.placeholder, configuration.selection, selection]);
+  const handleSave = (0, _react.useCallback)(updatedSelection => {
+    setPreviousSelection(updatedSelection);
+    closePicker === null || closePicker === void 0 ? void 0 : closePicker();
+  }, [closePicker]);
+  const selectionHandler = (0, _react.useCallback)(date => {
+    if (configuration.selection === 'multi') {
+      const selections = [...selection];
+      const existingIndex = selections.findIndex(s => (0, _dateFns.isEqual)(s, date));
+
+      if (existingIndex > -1) {
+        selections.splice(existingIndex, 1);
+        setSelection(selections.sort((a, b) => a.getTime() - b.getTime()));
+      } else {
+        setSelection([...selections, date].sort((a, b) => a.getTime() - b.getTime()));
+      }
+    } else if (configuration.selection === 'range') {
+      if (selection && isRangeSelection(selection) && !selection.to) {
+        const updatedSelection = (0, _dateFns.isBefore)(date, selection.from) ? {
+          from: date,
+          to: selection.from
+        } : {
+          from: selection.from,
+          to: date
+        };
+        setSelection(updatedSelection);
+
+        if (!configuration.confirmation) {
+          handleSave(updatedSelection);
+        }
+      } else {
+        setSelection({
+          from: date,
+          to: null
+        });
+      }
+    } else {
+      setSelection(date);
+
+      if (!configuration.confirmation) {
+        handleSave(date);
+      }
+    }
+  }, [configuration.confirmation, configuration.selection, handleSave, selection]);
+  const focusHnadler = (0, _react.useCallback)(date => {
+    if (!selection) return;
+
+    if (configuration.selection === 'range' && isRangeSelection(selection)) {
+      setHoverRange((0, _dateFns.isBefore)(date, selection.from) ? {
+        from: date,
+        to: selection.from
+      } : {
+        from: selection.from,
+        to: date
+      });
+    }
+  }, [configuration.selection, selection]);
+  const blurHnadler = (0, _react.useCallback)(date => {
+    if (!selection || !hoverRange) return;
+
+    if (configuration.selection === 'range' && isRangeSelection(selection) && (hoverRange.from === date || hoverRange.to === date)) {
+      setHoverRange(null);
+    }
+  }, [configuration.selection, hoverRange, selection]);
+  const revertValue = (0, _react.useCallback)(() => {
+    setSelection(previousSelection);
+  }, [previousSelection]);
+  const datePickerCtx = (0, _react.useMemo)(() => {
+    return {
+      configuration,
+      disabled: false,
+      formattedDate: getFormattedDate,
+      onDayBlur: blurHnadler,
+      onDayFocus: focusHnadler,
+      onSelection: selectionHandler,
+      revertValue,
+      selectionActive: false,
+      selection
+    };
+  }, [blurHnadler, configuration, focusHnadler, getFormattedDate, revertValue, selection, selectionHandler]);
+  return /*#__PURE__*/_react.default.createElement(DatePickerContext.Provider, {
+    value: datePickerCtx
+  }, children);
+};
+
+exports.DatePickerProvider = DatePickerProvider;
+DatePickerProvider.displayName = "DatePickerProvider";

package/lib/SelectMenu/SelectMenu.d.ts

@@ -32,12 +32,14 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
     Divider: import("styled-components").StyledComponent<"div", any, SystemCommonProps & SxProp, never>;
     Filter: React.ForwardRefExoticComponent<Pick<{
         value?: string | undefined;
-    } & Pick<Omit<Pick<{
+    } & Pick<Omit<Pick<({
         [x: string]: any;
         [x: number]: any;
     } & {
         theme?: any;
-    } & {
+    } & ({} | {
+        children?: React.ReactNode;
+    })) & {
         as?: string | React.ComponentType<any> | undefined;
         forwardedAs?: string | React.ComponentType<any> | undefined;
     }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {

package/lib/TextInputWithTokens.d.ts

@@ -32,12 +32,14 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
      * Whether the remove buttons should be rendered in the tokens
      */
     hideTokenRemoveButtons?: boolean | undefined;
-} & Pick<Omit<Pick<{
+} & Pick<Omit<Pick<({
     [x: string]: any;
     [x: number]: any;
 } & {
     theme?: any;
-} & {
+} & ({} | {
+    children?: React.ReactNode;
+})) & {
     as?: string | React.ComponentType<any> | undefined;
     forwardedAs?: string | React.ComponentType<any> | undefined;
 }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {

package/lib/TextInputWithTokens.js

@@ -25,8 +25,6 @@ var _TextInputWrapper = _interopRequireDefault(require("./_TextInputWrapper"));
 
 var _Box = _interopRequireDefault(require("./Box"));
 
-var _iterateFocusableElements = require("./utils/iterateFocusableElements");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -100,25 +98,14 @@ function TextInputWithTokensInnerComponent({
   }, [selectedTokenIndex]);
 
   const handleTokenRemove = tokenId => {
-    onTokenRemove(tokenId); // HACK: wait a tick for the the token node to be removed from the DOM
-
-    setTimeout(() => {
-      var _containerRef$current2, _containerRef$current3;
-
-      const nextElementToFocus = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.children[selectedTokenIndex || 0]; // when removing the first token by keying "Backspace" or "Delete",
-      // `nextFocusableElement` is the div that wraps the input
+    onTokenRemove(tokenId);
 
-      const firstFocusable = nextElementToFocus && (0, _iterateFocusableElements.isFocusable)(nextElementToFocus) ? nextElementToFocus : Array.from(((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.children) || []).find(el => (0, _iterateFocusableElements.isFocusable)(el));
+    if (selectedTokenIndex) {
+      var _containerRef$current2;
 
-      if (firstFocusable) {
-        firstFocusable.focus();
-      } else {
-        var _ref$current;
-
-        // if there are no tokens left, focus the input
-        (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
-      }
-    }, 0);
+      const nextElementToFocus = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.children[selectedTokenIndex];
+      nextElementToFocus.focus();
+    }
   };
 
   const handleTokenFocus = tokenIndex => () => {
@@ -131,9 +118,9 @@ function TextInputWithTokensInnerComponent({
 
   const handleTokenKeyUp = e => {
     if (e.key === 'Escape') {
-      var _ref$current2;
+      var _ref$current;
 
-      (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.focus();
+      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
     }
   };
 
@@ -143,13 +130,13 @@ function TextInputWithTokensInnerComponent({
   };
 
   const handleInputKeyDown = e => {
-    var _ref$current3;
+    var _ref$current2;
 
     if (onKeyDown) {
       onKeyDown(e);
     }
 
-    if ((_ref$current3 = ref.current) !== null && _ref$current3 !== void 0 && _ref$current3.value) {
+    if ((_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && _ref$current2.value) {
       return;
     }
 
@@ -170,9 +157,9 @@ function TextInputWithTokensInnerComponent({
 
 
       setTimeout(() => {
-        var _ref$current4;
+        var _ref$current3;
 
-        (_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.select();
+        (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.select();
       }, 0);
     }
   };

package/lib/theme-preval.js

@@ -515,7 +515,7 @@ module.exports = {
           }
         }
       },
-      "light_protanopia": {
+      "light_colorblind": {
         "colors": {
           "canvasDefaultTransparent": "rgba(255,255,255,0)",
           "marketingIcon": {
@@ -2456,7 +2456,7 @@ module.exports = {
           }
         }
       },
-      "dark_protanopia": {
+      "dark_colorblind": {
         "colors": {
           "canvasDefaultTransparent": "rgba(13,17,23,0)",
           "marketingIcon": {

package/lib/utils/testing.d.ts

@@ -53,7 +53,7 @@ export declare function render(component: React.ReactElement, theme?: {
         xlarge: string;
     };
     space: string[];
-    colorSchemes: Record<"light" | "light_protanopia" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_protanopia", Record<"colors" | "shadows", Partial<{
+    colorSchemes: Record<"light" | "light_colorblind" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_colorblind", Record<"colors" | "shadows", Partial<{
         canvasDefaultTransparent: string;
         marketingIcon: {
             primary: string;