@primer/components 0.0.0-202110343939 → 0.0.0-20211040245

package/lib/DatePicker/DatePickerPanel.js

@@ -17,7 +17,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _constants = require("../constants");
 
-var _useDatePicker = _interopRequireDefault(require("./useDatePicker"));
+var _useDatePicker = _interopRequireWildcard(require("./useDatePicker"));
 
 var _octiconsReact = require("@primer/octicons-react");
 
@@ -77,6 +77,8 @@ const DatePickerPanel = () => {
     goToMonth,
     nextMonth,
     previousMonth,
+    onDayFocus,
+    setFocusDate,
     viewMode
   } = (0, _useDatePicker.default)();
   const panelRef = (0, _react.useRef)(null);
@@ -88,6 +90,136 @@ const DatePickerPanel = () => {
     bindKeys: _focusZone.FocusKeys.Tab,
     focusInStrategy: 'closest'
   });
+  const getNextFocusable = (0, _react.useCallback)((direction, from, event) => {
+    var _datePanelRef$current, _datePanelRef$current2;
+
+    const key = event.key;
+    const {
+      disableWeekends,
+      minDate,
+      maxDate
+    } = configuration;
+    const fromDate = from === null || from === void 0 ? void 0 : from.getAttribute('data-date');
+    const focusDate = fromDate ? new Date(fromDate) : new Date();
+    let newDate = (0, _useDatePicker.normalizeDate)(focusDate);
+
+    switch (key) {
+      case 'ArrowRight':
+        {
+          // Increase selection by 1 day
+          newDate = (0, _useDatePicker.normalizeDate)((0, _dateFns.addDays)(focusDate, 1));
+          if (maxDate && (0, _dateFns.isAfter)(newDate, maxDate)) newDate = maxDate;
+
+          if (disableWeekends && (0, _dateFns.isWeekend)(newDate)) {
+            const monday = (0, _dateFns.nextMonday)(newDate);
+            newDate = maxDate && (0, _dateFns.isAfter)(monday, maxDate) ? maxDate : monday;
+          }
+
+          setFocusDate(newDate);
+          onDayFocus(newDate);
+          break;
+        }
+
+      case 'ArrowLeft':
+        {
+          // Decrease selection by 1 day
+          newDate = (0, _useDatePicker.normalizeDate)((0, _dateFns.subDays)(focusDate, 1));
+          if (minDate && (0, _dateFns.isBefore)(newDate, minDate)) newDate = minDate;
+
+          if (disableWeekends && (0, _dateFns.isWeekend)(newDate)) {
+            const friday = (0, _dateFns.previousFriday)(newDate);
+            newDate = minDate && (0, _dateFns.isBefore)(friday, minDate) ? minDate : friday;
+          }
+
+          setFocusDate(newDate);
+          onDayFocus(newDate);
+          break;
+        }
+
+      case 'ArrowUp':
+        {
+          // Decrease selection by 1 week
+          newDate = (0, _useDatePicker.normalizeDate)((0, _dateFns.subWeeks)(focusDate, 1));
+          if (minDate && (0, _dateFns.isBefore)(newDate, minDate)) newDate = minDate;
+          setFocusDate(newDate);
+          onDayFocus(newDate);
+          break;
+        }
+
+      case 'ArrowDown':
+        {
+          // Increase selection by 1 week
+          newDate = (0, _useDatePicker.normalizeDate)((0, _dateFns.addWeeks)(focusDate, 1));
+          if (maxDate && (0, _dateFns.isAfter)(newDate, maxDate)) newDate = maxDate;
+          setFocusDate(newDate);
+          onDayFocus(newDate);
+          break;
+        }
+
+      case 'Home':
+        {
+          newDate = focusDate;
+
+          if (disableWeekends) {
+            newDate = (0, _useDatePicker.normalizeDate)((0, _dateFns.isMonday)(focusDate) ? focusDate : (0, _dateFns.previousMonday)(focusDate));
+          } else {
+            newDate = (0, _useDatePicker.normalizeDate)((0, _dateFns.isSunday)(focusDate) ? focusDate : (0, _dateFns.previousSunday)(focusDate));
+          }
+
+          if (minDate && (0, _dateFns.isBefore)(newDate, minDate)) newDate = minDate;
+          setFocusDate(newDate);
+          onDayFocus(newDate);
+          break;
+        }
+
+      case 'End':
+        {
+          newDate = focusDate;
+
+          if (disableWeekends) {
+            newDate = (0, _useDatePicker.normalizeDate)((0, _dateFns.isFriday)(focusDate) ? focusDate : (0, _dateFns.nextFriday)(focusDate));
+          } else {
+            newDate = (0, _useDatePicker.normalizeDate)((0, _dateFns.isSaturday)(focusDate) ? focusDate : (0, _dateFns.nextSaturday)(focusDate));
+          }
+
+          if (maxDate && (0, _dateFns.isAfter)(newDate, maxDate)) newDate = maxDate;
+          setFocusDate(newDate);
+          onDayFocus(newDate);
+          break;
+        }
+
+      case 'PageUp':
+        {
+          newDate = (0, _useDatePicker.normalizeDate)(event.shiftKey ? (0, _dateFns.subYears)(focusDate, 1) : (0, _dateFns.subMonths)(focusDate, 1));
+          if (minDate && (0, _dateFns.isBefore)(newDate, minDate)) newDate = minDate;
+          setFocusDate(newDate);
+          onDayFocus(newDate);
+          break;
+        }
+
+      case 'PageDown':
+        {
+          newDate = (0, _useDatePicker.normalizeDate)(event.shiftKey ? (0, _dateFns.addYears)(focusDate, 1) : (0, _dateFns.addMonths)(focusDate, 1));
+          if (maxDate && (0, _dateFns.isAfter)(newDate, maxDate)) newDate = maxDate;
+          setFocusDate(newDate);
+          onDayFocus(newDate);
+          break;
+        }
+
+      default:
+        {
+          break;
+        }
+    }
+
+    return (_datePanelRef$current = (_datePanelRef$current2 = datePanelRef.current) === null || _datePanelRef$current2 === void 0 ? void 0 : _datePanelRef$current2.querySelector(`[data-date="${(0, _dateFns.format)(newDate, 'MM/dd/yyyy')}"]`)) !== null && _datePanelRef$current !== void 0 ? _datePanelRef$current : undefined;
+  }, [configuration, onDayFocus, setFocusDate]);
+  (0, _useFocusZone.useFocusZone)({
+    containerRef: datePanelRef,
+    bindKeys: _focusZone.FocusKeys.ArrowAll | _focusZone.FocusKeys.HomeAndEnd | _focusZone.FocusKeys.PageUpDown,
+    focusInStrategy: 'previous',
+    getNextFocusable
+  }, [getNextFocusable]);
   (0, _useFocusZone.useFocusZone)({
     containerRef: footerRef,
     bindKeys: _focusZone.FocusKeys.Tab,
@@ -199,8 +331,7 @@ const DatePickerPanel = () => {
     icon: _octiconsReact.ChevronRightIcon,
     color: "fg.muted"
   }))), /*#__PURE__*/_react.default.createElement(DatePickerPanelMonths, {
-    ref: datePanelRef,
-    tabIndex: 0
+    ref: datePanelRef
   }, /*#__PURE__*/_react.default.createElement(_Month.Month, {
     date: currentViewingDate
   }), viewMode === '2-month' && /*#__PURE__*/_react.default.createElement(_Month.Month, {

package/lib/DatePicker/Day.js

@@ -17,6 +17,8 @@ var _constants = require("../constants");
 
 var _useDatePicker = _interopRequireDefault(require("./useDatePicker"));
 
+var _dateFns = require("date-fns");
+
 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); }
@@ -90,7 +92,6 @@ const getStateStyles = (props, prop, state) => {
   const {
     blocked,
     disabled,
-    focused,
     selected,
     today
   } = props;
@@ -113,8 +114,6 @@ const getStateStyles = (props, prop, state) => {
     return states.blocked[prop];
   } else if (disabled) {
     return states.disabled[prop];
-  } else if (focused) {
-    return states.default.hover[prop];
   } else {
     return today && prop === 'color' ? states.default[state]['todayColor'] : states.default[state][prop];
   }
@@ -131,7 +130,7 @@ const DayComponent = (0, _styledComponents.default)(DayBaseComponent).attrs(prop
 })).withConfig({
   displayName: "Day__DayComponent",
   componentId: "sc-1japneh-1"
-})(["background-color:", ";border-radius:", ";opacity:", ";transition:0.1s background-color ease;& ", "{align-self:center;color:", ";display:flex;font-family:", ";font-size:", ";justify-content:center;justify-self:center;user-select:none;transition:0.1s color ease;width:30px;}&:hover{background-color:", ";cursor:pointer;transition:0.05s background-color ease;& ", "{color:", ";transition:0.1s color ease;}}&:active{background-color:", ";box-shadow:inset ", ";transition:0.1s background-color ease,0.1s box-shadow ease,0.1s color ease;& ", "{color:", ";transition:0.1s color ease;}}"], props => props.background, props => props.borderRadius, props => props.disabled ? 0.5 : 1, _Text.default, props => props.textColor, (0, _constants.get)('fonts.mono'), (0, _constants.get)('fontSizes.0'), props => props.backgroundHover, _Text.default, props => props.textColorHover, props => props.backgroundPressed, (0, _constants.get)('shadows.shadow.medium'), _Text.default, props => props.textColorPressed);
+})(["background-color:", ";border-radius:", ";opacity:", ";transition:0.1s background-color ease;& ", "{align-self:center;color:", ";display:flex;font-family:", ";font-size:", ";justify-content:center;justify-self:center;padding:4px 0;position:relative;transition:0.1s color ease;user-select:none;width:16px;&:after{content:'';display:", ";position:absolute;bottom:0;background:", ";width:100%;height:2px;border-radius:1px;}}&:hover,&:focus{background-color:", ";cursor:pointer;transition:0.05s background-color ease;& ", "{color:", ";transition:0.1s color ease;}}&:active{background-color:", ";box-shadow:inset ", ";transition:0.1s background-color ease,0.1s box-shadow ease,0.1s color ease;& ", "{color:", ";transition:0.1s color ease;}}"], props => props.background, props => props.borderRadius, props => props.disabled ? 0.5 : 1, _Text.default, props => props.textColor, (0, _constants.get)('fonts.mono'), (0, _constants.get)('fontSizes.0'), props => props.today ? 'block' : 'none', props => props.selected && props.selected !== 'middle' ? (0, _constants.get)('colors.fg.onEmphasis')(props) : (0, _constants.get)('colors.accent.emphasis')(props), props => props.backgroundHover, _Text.default, props => props.textColorHover, props => props.backgroundPressed, (0, _constants.get)('shadows.shadow.medium'), _Text.default, props => props.textColorPressed);
 
 const Day = ({
   date,
@@ -146,6 +145,16 @@ const Day = ({
     selected,
     today
   } = (0, _useDatePicker.default)(date);
+  const dayRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (focused) {
+      setTimeout(() => {
+        var _dayRef$current;
+
+        return (_dayRef$current = dayRef.current) === null || _dayRef$current === void 0 ? void 0 : _dayRef$current.focus();
+      }, 0);
+    }
+  }, [focused]);
   const keyPressHandler = (0, _react.useCallback)(event => {
     if (disabled) {
       return;
@@ -165,12 +174,10 @@ const Day = ({
     onAction === null || onAction === void 0 ? void 0 : onAction(date, event);
   }, [disabled, onSelection, date, onAction]);
   const todayStyles = (0, _react.useMemo)(() => today ? {
-    border: '2px solid',
-    padding: '4px 6px',
-    borderRadius: '16px',
     fontWeight: 'bold'
   } : {}, [today]);
   return /*#__PURE__*/_react.default.createElement(DayComponent, {
+    ref: dayRef,
     role: "gridcell",
     "aria-disabled": disabled,
     "aria-selected": selected !== false,
@@ -182,7 +189,9 @@ const Day = ({
     onClick: clickHandler,
     onMouseEnter: () => onDayFocus(date),
     onFocus: () => onDayFocus(date),
-    onKeyPress: keyPressHandler
+    onKeyPress: keyPressHandler,
+    tabIndex: -1,
+    "data-date": (0, _dateFns.format)(date, 'MM/dd/yyyy')
   }, /*#__PURE__*/_react.default.createElement(_Text.default, {
     sx: todayStyles
   }, date.getDate()));

package/lib/DatePicker/useDatePicker.js

@@ -214,7 +214,6 @@ const DatePickerProvider = ({
   configuration: externalConfig = {},
   children,
   closePicker,
-  isOpen = false,
   value
 }) => {
   const [configuration, setConfiguration] = (0, _react.useState)((0, _deepmerge.default)(defaultConfiguration, externalConfig));
@@ -398,15 +397,35 @@ const DatePickerProvider = ({
     }
   }, [configuration]);
   (0, _react.useEffect)(() => {
-    if (currentViewingDate.getMonth() !== focusDate.getMonth() || currentViewingDate.getFullYear() !== focusDate.getFullYear()) {
-      setCurrentViewingDate(focusDate);
+    if (configuration.view === '1-month') {
+      if (currentViewingDate.getMonth() === focusDate.getMonth() && currentViewingDate.getFullYear() === focusDate.getFullYear()) {
+        return;
+      } else {
+        setCurrentViewingDate((0, _dateFns.setDate)(focusDate, 1));
+        return;
+      }
+    }
+    /**
+     * This logic is rough, so buckle up.
+     * We want to set the currently shown months based on what has focus. If the focus leaves what we're able to view,
+     * we want to be able to change the currently shown month. However, this gets complicated with the 2-month view.
+     * FIRST: If it's the same month/year: Easy
+     * SECOND: If it's the next month, but same year: Done
+     * THIRD: If it's the next month AND next year, but it's January (i.e. we're viewing Dec/Jan): Good to go
+     */
+
+
+    if (currentViewingDate.getMonth() === focusDate.getMonth() && currentViewingDate.getFullYear() === focusDate.getFullYear() || (0, _dateFns.addMonths)(currentViewingDate, 1).getMonth() === focusDate.getMonth() && currentViewingDate.getFullYear() === focusDate.getFullYear() || (0, _dateFns.addMonths)(currentViewingDate, 1).getMonth() === focusDate.getMonth() && focusDate.getMonth() === 0 && (0, _dateFns.addYears)(currentViewingDate, 1).getFullYear() === focusDate.getFullYear()) {
+      return;
+    } else {
+      setCurrentViewingDate((0, _dateFns.setDate)(focusDate, 1));
     }
-  }, [currentViewingDate, focusDate]);
+  }, [configuration.view, currentViewingDate, focusDate]);
   const selectionHandler = (0, _react.useCallback)(date => {
     setIsDirty(true);
 
     if (configuration.variant === 'multi') {
-      const selections = [...selection];
+      const selections = Array.isArray(selection) ? selection : [];
       const existingIndex = selections.findIndex(s => (0, _dateFns.isEqual)(s, date));
 
       if (existingIndex > -1) {
@@ -492,152 +511,6 @@ const DatePickerProvider = ({
       });
     }
   }, [configuration, hoverRange, selection]);
-  const handleKeyDown = (0, _react.useCallback)(async e => {
-    const key = e.key;
-    const {
-      disableWeekends,
-      minDate,
-      maxDate
-    } = configuration;
-
-    switch (key) {
-      case 'ArrowRight':
-        {
-          // Increase selection by 1 day
-          let newDate = normalizeDate((0, _dateFns.addDays)(focusDate, 1));
-          if (maxDate && (0, _dateFns.isAfter)(newDate, maxDate)) newDate = maxDate;
-
-          if (disableWeekends && (0, _dateFns.isWeekend)(newDate)) {
-            const monday = (0, _dateFns.nextMonday)(newDate);
-            newDate = maxDate && (0, _dateFns.isAfter)(monday, maxDate) ? maxDate : monday;
-          }
-
-          setFocusDate(newDate);
-          focusHandler(newDate);
-          break;
-        }
-
-      case 'ArrowLeft':
-        {
-          // Decrease selection by 1 day
-          let newDate = normalizeDate((0, _dateFns.subDays)(focusDate, 1));
-          if (minDate && (0, _dateFns.isBefore)(newDate, minDate)) newDate = minDate;
-
-          if (disableWeekends && (0, _dateFns.isWeekend)(newDate)) {
-            const friday = (0, _dateFns.previousFriday)(newDate);
-            newDate = minDate && (0, _dateFns.isBefore)(friday, minDate) ? minDate : friday;
-          }
-
-          setFocusDate(newDate);
-          focusHandler(newDate);
-          break;
-        }
-
-      case 'ArrowUp':
-        {
-          // Decrease selection by 1 week
-          let newDate = normalizeDate((0, _dateFns.subWeeks)(focusDate, 1));
-          if (minDate && (0, _dateFns.isBefore)(newDate, minDate)) newDate = minDate;
-          setFocusDate(newDate);
-          focusHandler(newDate);
-          break;
-        }
-
-      case 'ArrowDown':
-        {
-          // Increase selection by 1 week
-          let newDate = normalizeDate((0, _dateFns.addWeeks)(focusDate, 1));
-          if (maxDate && (0, _dateFns.isAfter)(newDate, maxDate)) newDate = maxDate;
-          setFocusDate(newDate);
-          focusHandler(newDate);
-          break;
-        }
-
-      case 'Home':
-        {
-          let newDate = focusDate;
-
-          if (disableWeekends) {
-            newDate = normalizeDate((0, _dateFns.isMonday)(focusDate) ? focusDate : (0, _dateFns.previousMonday)(focusDate));
-          } else {
-            newDate = normalizeDate((0, _dateFns.isSunday)(focusDate) ? focusDate : (0, _dateFns.previousSunday)(focusDate));
-          }
-
-          if (minDate && (0, _dateFns.isBefore)(newDate, minDate)) newDate = minDate;
-          setFocusDate(newDate);
-          focusHandler(newDate);
-          break;
-        }
-
-      case 'End':
-        {
-          let newDate = focusDate;
-
-          if (disableWeekends) {
-            newDate = normalizeDate((0, _dateFns.isFriday)(focusDate) ? focusDate : (0, _dateFns.nextFriday)(focusDate));
-          } else {
-            newDate = normalizeDate((0, _dateFns.isSaturday)(focusDate) ? focusDate : (0, _dateFns.nextSaturday)(focusDate));
-          }
-
-          if (maxDate && (0, _dateFns.isAfter)(newDate, maxDate)) newDate = maxDate;
-          setFocusDate(newDate);
-          focusHandler(newDate);
-          break;
-        }
-
-      case 'PageUp':
-        {
-          let newDate = normalizeDate(e.shiftKey ? (0, _dateFns.subYears)(focusDate, 1) : (0, _dateFns.subMonths)(focusDate, 1));
-          if (minDate && (0, _dateFns.isBefore)(newDate, minDate)) newDate = minDate;
-          setFocusDate(newDate);
-          focusHandler(newDate);
-          break;
-        }
-
-      case 'PageDown':
-        {
-          let newDate = normalizeDate(e.shiftKey ? (0, _dateFns.addYears)(focusDate, 1) : (0, _dateFns.addMonths)(focusDate, 1));
-          if (maxDate && (0, _dateFns.isAfter)(newDate, maxDate)) newDate = maxDate;
-          setFocusDate(newDate);
-          focusHandler(newDate);
-          break;
-        }
-
-      case 'Enter':
-      case ' ':
-        {
-          // Start Selection
-          selectionHandler(focusDate);
-          break;
-        }
-
-      case 'Esc':
-        {
-          // Cancel Selection if started, reset if not? or close
-          if (hoverRange) {
-            setHoverRange(null);
-          }
-
-          break;
-        }
-
-      default:
-        {
-          break;
-        }
-    }
-  }, [configuration, focusDate, focusHandler, hoverRange, selectionHandler]);
-  (0, _react.useEffect)(() => {
-    if (isOpen) {
-      window.addEventListener('keydown', handleKeyDown);
-    } else {
-      window.removeEventListener('keydown', handleKeyDown);
-    }
-
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [handleKeyDown, isOpen]);
 
   const onResize = windowEntry => {
     // Only care about the first element, we expect one element ot be watched

package/lib/Dialog.d.ts

@@ -15,6 +15,7 @@ declare namespace DialogHeader {
     };
     var propTypes: {
         lineHeight?: React.Validator<import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined> | undefined;
+        border?: React.Validator<import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined> | undefined;
         alignContent?: React.Validator<import("styled-system").ResponsiveValue<import("csstype").Property.AlignContent, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined> | undefined;
         alignItems?: React.Validator<import("styled-system").ResponsiveValue<import("csstype").Property.AlignItems, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined> | undefined;
         alignSelf?: React.Validator<import("styled-system").ResponsiveValue<import("csstype").Property.AlignSelf, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined> | undefined;
@@ -90,7 +91,6 @@ declare namespace DialogHeader {
         zIndex?: React.Validator<import("styled-system").ResponsiveValue<import("csstype").Property.ZIndex, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined> | undefined;
         background?: React.Validator<import("styled-system").ResponsiveValue<import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined> | undefined;
         backgroundPosition?: React.Validator<import("styled-system").ResponsiveValue<import("csstype").Property.BackgroundPosition<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined> | undefined;
-        border?: React.Validator<import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined> | undefined;
         borderBottom?: React.Validator<import("styled-system").ResponsiveValue<import("csstype").Property.BorderBottom<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined> | undefined;
         borderColor?: React.Validator<import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined> | undefined;
         borderLeft?: React.Validator<import("styled-system").ResponsiveValue<import("csstype").Property.BorderLeft<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined> | undefined;
@@ -153,7 +153,7 @@ declare namespace DialogHeader {
         results?: React.Validator<number | null | undefined> | undefined;
         security?: React.Validator<string | null | undefined> | undefined;
         unselectable?: React.Validator<"on" | "off" | null | undefined> | undefined;
-        inputMode?: React.Validator<"none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | null | undefined> | undefined;
+        inputMode?: React.Validator<"search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | null | undefined> | undefined;
         is?: React.Validator<string | null | undefined> | undefined;
         'aria-activedescendant'?: React.Validator<string | null | undefined> | undefined;
         'aria-atomic'?: React.Validator<boolean | "true" | "false" | null | undefined> | undefined;
@@ -168,7 +168,7 @@ declare namespace DialogHeader {
         'aria-describedby'?: React.Validator<string | null | undefined> | undefined;
         'aria-details'?: React.Validator<string | null | undefined> | undefined;
         'aria-disabled'?: React.Validator<boolean | "true" | "false" | null | undefined> | undefined;
-        'aria-dropeffect'?: React.Validator<"none" | "link" | "copy" | "execute" | "move" | "popup" | null | undefined> | undefined;
+        'aria-dropeffect'?: React.Validator<"link" | "none" | "copy" | "execute" | "move" | "popup" | null | undefined> | undefined;
         'aria-errormessage'?: React.Validator<string | null | undefined> | undefined;
         'aria-expanded'?: React.Validator<boolean | "true" | "false" | null | undefined> | undefined;
         'aria-flowto'?: React.Validator<string | null | undefined> | undefined;
@@ -387,7 +387,7 @@ declare namespace DialogHeader {
         size?: React.Validator<import("styled-system").ResponsiveValue<import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined> | undefined;
         borderX?: React.Validator<import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined> | undefined;
         borderY?: React.Validator<import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined> | undefined;
-        sx?: React.Validator<import("@styled-system/css").SystemStyleObject | undefined> | undefined;
+        sx?: React.Validator<import("./sx").BetterSystemStyleObject | undefined> | undefined;
         theme?: React.Validator<any> | undefined;
     };
     var displayName: string;

package/lib/Dropdown.d.ts

@@ -75,7 +75,7 @@ declare const _default: {
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
-        inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
         'aria-activedescendant'?: string | undefined;
         'aria-atomic'?: boolean | "true" | "false" | undefined;
@@ -90,7 +90,7 @@ declare const _default: {
         'aria-describedby'?: string | undefined;
         'aria-details'?: string | undefined;
         'aria-disabled'?: boolean | "true" | "false" | undefined;
-        'aria-dropeffect'?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
+        'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
         'aria-errormessage'?: string | undefined;
         'aria-expanded'?: boolean | "true" | "false" | undefined;
         'aria-flowto'?: string | undefined;
@@ -307,7 +307,7 @@ declare const _default: {
         py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         open?: boolean | undefined;
-        sx?: import("@styled-system/css").SystemStyleObject | undefined;
+        sx?: import("./sx").BetterSystemStyleObject | undefined;
         onToggle?: React.ReactEventHandler<HTMLElement> | undefined;
     } & {
         theme?: any;
@@ -372,7 +372,7 @@ declare const _default: {
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
-        inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
         'aria-activedescendant'?: string | undefined;
         'aria-atomic'?: boolean | "true" | "false" | undefined;
@@ -387,7 +387,7 @@ declare const _default: {
         'aria-describedby'?: string | undefined;
         'aria-details'?: string | undefined;
         'aria-disabled'?: boolean | "true" | "false" | undefined;
-        'aria-dropeffect'?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
+        'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
         'aria-errormessage'?: string | undefined;
         'aria-expanded'?: boolean | "true" | "false" | undefined;
         'aria-flowto'?: string | undefined;
@@ -604,7 +604,7 @@ declare const _default: {
         py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         open?: boolean | undefined;
-        sx?: import("@styled-system/css").SystemStyleObject | undefined;
+        sx?: import("./sx").BetterSystemStyleObject | undefined;
         onToggle?: React.ReactEventHandler<HTMLElement> | undefined;
     } & {
         theme?: any;
@@ -691,7 +691,7 @@ declare const _default: {
             results?: number | undefined;
             security?: string | undefined;
             unselectable?: "on" | "off" | undefined;
-            inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+            inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
             is?: string | undefined;
             'aria-activedescendant'?: string | undefined;
             'aria-atomic'?: boolean | "true" | "false" | undefined;
@@ -706,7 +706,7 @@ declare const _default: {
             'aria-describedby'?: string | undefined;
             'aria-details'?: string | undefined;
             'aria-disabled'?: boolean | "true" | "false" | undefined;
-            'aria-dropeffect'?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
+            'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
             'aria-errormessage'?: string | undefined;
             'aria-expanded'?: boolean | "true" | "false" | undefined;
             'aria-flowto'?: string | undefined;
@@ -923,7 +923,8 @@ declare const _default: {
             py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
             paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
             size?: import("styled-system").ResponsiveValue<import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-            sx?: import("@styled-system/css").SystemStyleObject | undefined;
+            sx?: import("./sx").BetterSystemStyleObject | undefined;
+            as?: string | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;
             autoFocus?: boolean | undefined;
             disabled?: boolean | undefined;
             formAction?: string | undefined;
@@ -931,8 +932,7 @@ declare const _default: {
             formMethod?: string | undefined;
             formNoValidate?: boolean | undefined;
             formTarget?: string | undefined;
-            as?: string | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;
-            variant?: "large" | "medium" | "small" | undefined;
+            variant?: "small" | "medium" | "large" | undefined;
         } & {
             theme?: any;
         }): JSX.Element;
@@ -1011,7 +1011,7 @@ declare const _default: {
             results?: number | undefined;
             security?: string | undefined;
             unselectable?: "on" | "off" | undefined;
-            inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+            inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
             is?: string | undefined;
             'aria-activedescendant'?: string | undefined;
             'aria-atomic'?: boolean | "true" | "false" | undefined;
@@ -1026,7 +1026,7 @@ declare const _default: {
             'aria-describedby'?: string | undefined;
             'aria-details'?: string | undefined;
             'aria-disabled'?: boolean | "true" | "false" | undefined;
-            'aria-dropeffect'?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
+            'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
             'aria-errormessage'?: string | undefined;
             'aria-expanded'?: boolean | "true" | "false" | undefined;
             'aria-flowto'?: string | undefined;
@@ -1243,7 +1243,8 @@ declare const _default: {
             py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
             paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
             size?: import("styled-system").ResponsiveValue<import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-            sx?: import("@styled-system/css").SystemStyleObject | undefined;
+            sx?: import("./sx").BetterSystemStyleObject | undefined;
+            as?: string | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;
             autoFocus?: boolean | undefined;
             disabled?: boolean | undefined;
             formAction?: string | undefined;
@@ -1251,8 +1252,7 @@ declare const _default: {
             formMethod?: string | undefined;
             formNoValidate?: boolean | undefined;
             formTarget?: string | undefined;
-            as?: string | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;
-            variant?: "large" | "medium" | "small" | undefined;
+            variant?: "small" | "medium" | "large" | undefined;
         } & {
             theme?: any;
         }> | undefined;