@primer/components 0.0.0-2021922191125 → 0.0.0-2021922204627

package/lib-esm/DatePicker/useDatePicker.js

@@ -0,0 +1,308 @@
+import { format, isEqual, isAfter, isBefore } from 'date-fns';
+import deepmerge from 'deepmerge';
+import React, { createContext, useCallback, useContext, useMemo, useEffect, useState } from 'react';
+const DatePickerContext = /*#__PURE__*/createContext(null);
+
+const useDatePicker = date => {
+  const value = 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 => isEqual(d, date));
+      } else if (isRangeSelection(value.selection)) {
+        if (isEqual(date, value.selection.from)) {
+          selected = 'start';
+        } else if (value.selection.to && isEqual(date, value.selection.to)) {
+          selected = 'end';
+        } else if (isAfter(date, value.selection.from) && value.selection.to && isBefore(date, value.selection.to)) {
+          selected = 'middle';
+        } else {
+          selected = false;
+        }
+      } else {
+        selected = isEqual(date, value.selection);
+      }
+    } // Determine if date is blocked out
+
+
+    if (value.configuration.blockedDates) {
+      blocked = !!value.configuration.blockedDates.find(d => isEqual(d, date));
+    } // Determine if date is disabled
+
+
+    if (value.configuration.minDate || value.configuration.maxDate) {
+      disabled = (value.configuration.minDate ? isBefore(date, value.configuration.minDate) : false) || (value.configuration.maxDate ? isAfter(date, value.configuration.maxDate) : false);
+    }
+  }
+
+  return { ...value,
+    blocked,
+    disabled,
+    selected
+  };
+};
+
+export default useDatePicker;
+export function isSingleSelection(selection) {
+  return selection instanceof Date;
+}
+export function isMultiSelection(selection) {
+  return Array.isArray(selection);
+}
+export function isRangeSelection(selection) {
+  return !!selection.from;
+}
+export 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'
+};
+export const DatePickerProvider = ({
+  configuration: externalConfig = {},
+  children,
+  closePicker,
+  value
+}) => {
+  const [configuration, setConfiguration] = useState(deepmerge(defaultConfiguration, externalConfig));
+  const [previousSelection, setPreviousSelection] = useState(parseSelection(value, configuration.selection));
+  const [selection, setSelection] = useState(parseSelection(value, configuration.selection));
+  const [hoverRange, setHoverRange] = useState(null);
+  useEffect(() => {
+    setConfiguration(deepmerge(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 = 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 format(selection, template);
+          } else if (Array.isArray(selection)) {
+            return format(selection[0], template);
+          } else if (isRangeSelection(selection)) {
+            return 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 => format(d, template)).join(', ');
+            return formatted;
+          } else if (selection instanceof Date) {
+            return [selection].map(d => format(d, template)).join(', ');
+          } else if (isRangeSelection(selection)) {
+            return [selection.to, selection.from].map(d => d ? format(d, template) : '').join(', ');
+          } else {
+            return 'Invalid Selection';
+          }
+        }
+
+      case 'range':
+        {
+          if (isRangeSelection(selection)) {
+            return Object.entries(selection).map(([_, date]) => date ? format(date, template) : '').join(' - ');
+          } else if (selection instanceof Date) {
+            return Object.entries({
+              from: selection,
+              to: null
+            }).map(([_, date]) => date ? 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 ? format(date, template) : '').join(' - ');
+          } else {
+            return 'Invalid Selection';
+          }
+        }
+
+      default:
+        {
+          return 'Invalid Configuration';
+        }
+    }
+  }, [configuration.dateFormat, configuration.placeholder, configuration.selection, selection]);
+  const handleSave = useCallback(updatedSelection => {
+    setPreviousSelection(updatedSelection);
+    closePicker === null || closePicker === void 0 ? void 0 : closePicker();
+  }, [closePicker]);
+  const selectionHandler = useCallback(date => {
+    if (configuration.selection === 'multi') {
+      const selections = [...selection];
+      const existingIndex = selections.findIndex(s => 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 = 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 = useCallback(date => {
+    if (!selection) return;
+
+    if (configuration.selection === 'range' && isRangeSelection(selection)) {
+      setHoverRange(isBefore(date, selection.from) ? {
+        from: date,
+        to: selection.from
+      } : {
+        from: selection.from,
+        to: date
+      });
+    }
+  }, [configuration.selection, selection]);
+  const blurHnadler = 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 = useCallback(() => {
+    setSelection(previousSelection);
+  }, [previousSelection]);
+  const datePickerCtx = 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.createElement(DatePickerContext.Provider, {
+    value: datePickerCtx
+  }, children);
+};
+DatePickerProvider.displayName = "DatePickerProvider";

package/lib-esm/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-esm/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-esm/TextInputWithTokens.js

@@ -9,8 +9,7 @@ import Token from './Token/Token';
 import { useProvidedRefOrCreate } from './hooks';
 import UnstyledTextInput from './_UnstyledTextInput';
 import TextInputWrapper from './_TextInputWrapper';
-import Box from './Box';
-import { isFocusable } from './utils/iterateFocusableElements'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+import Box from './Box'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 // using forwardRef is important so that other components (ex. Autocomplete) can use the ref
 function TextInputWithTokensInnerComponent({
@@ -77,25 +76,14 @@ function TextInputWithTokensInnerComponent({
   }, [selectedTokenIndex]);
 
   const handleTokenRemove = tokenId => {
-    onTokenRemove(tokenId); // HACK: wait a tick for the the token node to be removed from the DOM
+    onTokenRemove(tokenId);
 
-    setTimeout(() => {
-      var _containerRef$current2, _containerRef$current3;
+    if (selectedTokenIndex) {
+      var _containerRef$current2;
 
-      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
-
-      const firstFocusable = nextElementToFocus && isFocusable(nextElementToFocus) ? nextElementToFocus : Array.from(((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.children) || []).find(el => isFocusable(el));
-
-      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 => () => {
@@ -108,9 +96,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();
     }
   };
 
@@ -120,13 +108,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;
     }
 
@@ -147,9 +135,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-esm/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-esm/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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "0.0.0-2021922191125",
+  "version": "0.0.0-2021922204627",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -43,20 +43,16 @@
   "author": "GitHub, Inc.",
   "license": "MIT",
   "dependencies": {
-    "@primer/octicons-react": "^13.0.0",
-    "@primer/primitives": "5.1.0",
+    "@primer/octicons-react": "^16.1.0",
+    "@primer/primitives": "6.0.0",
     "@radix-ui/react-polymorphic": "0.0.14",
     "@react-aria/ssr": "3.1.0",
     "@styled-system/css": "5.1.5",
     "@styled-system/props": "5.1.5",
     "@styled-system/theme-get": "5.1.2",
-    "@types/history": "4.7.8",
-    "@types/styled-components": "5.1.11",
-    "@types/styled-system": "5.1.12",
-    "@types/styled-system__css": "5.0.16",
-    "@types/styled-system__theme-get": "5.0.1",
     "classnames": "2.3.1",
     "color2k": "1.2.4",
+    "date-fns": "2.25.0",
     "deepmerge": "4.2.2",
     "focus-visible": "5.2.0",
     "styled-system": "5.1.5"
@@ -85,6 +81,11 @@
     "@testing-library/react": "11.2.7",
     "@testing-library/react-hooks": "7.0.2",
     "@testing-library/user-event": "13.1.9",
+    "@types/history": "4.7.9",
+    "@types/styled-components": "5.1.15",
+    "@types/styled-system": "5.1.13",
+    "@types/styled-system__css": "5.0.16",
+    "@types/styled-system__theme-get": "5.0.1",
     "@types/chroma-js": "2.1.3",
     "@types/enzyme": "3.10.9",
     "@types/jest": "26.0.23",