@basic-ui/core 0.0.43 → 0.0.46

package/src/Menu/MenuList.tsx

@@ -33,6 +33,9 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
       ...otherProps
     } = props;
 
+    const itemSearchStr = useRef('');
+    const itemSearchClearTimeout = useRef<ReturnType<typeof setTimeout>>();
+
     const { menuListIdRef, buttonRef, onChange, openWithArrowKeyRef, open } =
       useMenuContext();
 
@@ -107,6 +110,7 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
         case 'Tab': {
           onChange && onChange(e, false);
           e.preventDefault(); // prevents focusing on next element, because we will be handling it
+          itemSearchStr.current = '';
           buttonRef.current?.focus();
           break;
         }
@@ -115,6 +119,7 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
         case 'ArrowDown':
         case 'ArrowUp':
           e.preventDefault();
+          itemSearchStr.current = '';
           const allItems = scope ? scope.current.queryAllNodes(queryScope) : [];
           const currentIndex = allItems.findIndex((e) => e === navigationItem);
           if (allItems.length === 0) {
@@ -141,23 +146,39 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
           onNavigate && onNavigate(allItems[nextIndex]);
           break;
         default: {
-          if (e.key.length === 1) {
+          if (e.key.length === 1 && !e.ctrlKey && !e.altKey) {
             // A-Z
             e.preventDefault();
+
+            if (
+              itemSearchStr.current.length === 0 ||
+              itemSearchStr.current.slice(-1) !== e.key
+            ) {
+              itemSearchStr.current = itemSearchStr.current + e.key;
+            }
+            clearTimeout(itemSearchClearTimeout.current as any);
+            itemSearchClearTimeout.current = setTimeout(() => {
+              itemSearchStr.current = '';
+            }, 500);
+
             const allItems = scope
               ? scope.current.queryAllNodes(queryScope)
               : [];
             const currentIndex = allItems.findIndex(
               (e) => e === navigationItem
             );
-            const firstLetter = e.key.toLowerCase();
+            const searchStr = itemSearchStr.current;
             let nextIndex = -1;
-            for (let i = 1; i < allItems.length; i++) {
+            for (
+              let i = searchStr.length === 1 ? 1 : 0;
+              i < allItems.length;
+              i++
+            ) {
               // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
               const idx = getCircularIndex(currentIndex + i, allItems.length)!;
               const dom = allItems[idx];
               const domText = dom.innerText.toLowerCase();
-              if (domText.length > 0 && domText.charAt(0) === firstLetter) {
+              if (domText.length > 0 && domText.startsWith(searchStr)) {
                 nextIndex = idx;
                 break;
               }

package/src/Menu/fixtures/countryList.ts

@@ -0,0 +1,198 @@
+export const countryList = [
+  'Afghanistan',
+  'Albania',
+  'Algeria',
+  'Andorra',
+  'Angola',
+  'Antigua and Barbuda',
+  'Argentina',
+  'Armenia',
+  'Australia',
+  'Austria',
+  'Azerbaijan',
+  'Bahamas',
+  'Bahrain',
+  'Bangladesh',
+  'Barbados',
+  'Belarus',
+  'Belgium',
+  'Belize',
+  'Benin',
+  'Bhutan',
+  'Bolivia',
+  'Bosnia and Herzegovina',
+  'Botswana',
+  'Brazil',
+  'Brunei',
+  'Bulgaria',
+  'Burkina Faso',
+  'Burundi',
+  "Côte d'Ivoire",
+  'Cabo Verde',
+  'Cambodia',
+  'Cameroon',
+  'Canada',
+  'Central African Republic',
+  'Central American Republic',
+  'Chad',
+  'Chile',
+  'China',
+  'Colombia',
+  'Comoros',
+  'Congo (Congo-Brazzaville)',
+  'Costa Rica',
+  'Croatia',
+  'Cuba',
+  'Cyprus',
+  'Czechia (Czech Republic)',
+  'Democratic Republic of the Congo',
+  'Denmark',
+  'Djibouti',
+  'Dominica',
+  'Dominican Republic',
+  'Ecuador',
+  'Egypt',
+  'El Salvador',
+  'Equatorial Guinea',
+  'Eritrea',
+  'Estonia',
+  'Eswatini (fmr. "Swaziland")',
+  'Ethiopia',
+  'Fiji',
+  'Finland',
+  'France',
+  'Gabon',
+  'Gambia',
+  'Georgia',
+  'Germany',
+  'Ghana',
+  'Greece',
+  'Grenada',
+  'Guatemala',
+  'Guinea',
+  'Guinea-Bissau',
+  'Guyana',
+  'Haiti',
+  'Holy See',
+  'Honduras',
+  'Hungary',
+  'Iceland',
+  'India',
+  'Indonesia',
+  'Iran',
+  'Iraq',
+  'Ireland',
+  'Israel',
+  'Italy',
+  'Jamaica',
+  'Japan',
+  'Jordan',
+  'Kazakhstan',
+  'Kenya',
+  'Kiribati',
+  'Kuwait',
+  'Kyrgyzstan',
+  'Laos',
+  'Latvia',
+  'Lebanon',
+  'Lesotho',
+  'Liberia',
+  'Libya',
+  'Liechtenstein',
+  'Lithuania',
+  'Luxembourg',
+  'Madagascar',
+  'Malawi',
+  'Malaysia',
+  'Maldives',
+  'Mali',
+  'Malta',
+  'Marshall Islands',
+  'Mauritania',
+  'Mauritius',
+  'Mexico',
+  'Micronesia',
+  'Moldova',
+  'Monaco',
+  'Mongolia',
+  'Montenegro',
+  'Morocco',
+  'Mozambique',
+  'Myanmar (formerly Burma)',
+  'Namibia',
+  'Nauru',
+  'Nepal',
+  'Netherlands',
+  'New Zealand',
+  'Nicaragua',
+  'Niger',
+  'Nigeria',
+  'North Korea',
+  'North Macedonia',
+  'Norway',
+  'Oman',
+  'Pakistan',
+  'Palau',
+  'Palestine State',
+  'Panama',
+  'Papua New Guinea',
+  'Paraguay',
+  'Peru',
+  'Philippines',
+  'Poland',
+  'Portugal',
+  'Qatar',
+  'Romania',
+  'Russia',
+  'Rwanda',
+  'Saint Kitts and Nevis',
+  'Saint Lucia',
+  'Saint Vincent and the Grenadines',
+  'Samoa',
+  'San Marino',
+  'Sao Tome and Principe',
+  'Saudi Arabia',
+  'Senegal',
+  'Serbia',
+  'Seychelles',
+  'Sierra Leone',
+  'Singapore',
+  'Slovakia',
+  'Slovenia',
+  'Solomon Islands',
+  'Somalia',
+  'South Africa',
+  'South Korea',
+  'South Sudan',
+  'Spain',
+  'Sri Lanka',
+  'Sudan',
+  'Suriname',
+  'Sweden',
+  'Switzerland',
+  'Syria',
+  'Tajikistan',
+  'Tanzania',
+  'Thailand',
+  'Timor-Leste',
+  'Togo',
+  'Tonga',
+  'Trinidad and Tobago',
+  'Tunisia',
+  'Turkey',
+  'Turkmenistan',
+  'Tuvalu',
+  'Uganda',
+  'Ukraine',
+  'United Arab Emirates',
+  'United Kingdom',
+  'United States of America',
+  'Uruguay',
+  'Uzbekistan',
+  'Vanuatu',
+  'Venezuela',
+  'Vietnam',
+  'Yemen',
+  'Zambia',
+  'Zimbabwe',
+];

package/src/Slider/Slider.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+
 /**
  * Welcome to @reach/slider!
  *
@@ -204,6 +206,7 @@ const SliderInput = forwardRef(function SliderInput(
     'aria-labelledby': ariaLabelledBy,
     'aria-valuetext': ariaValueTextProp,
     as: Comp = 'div',
+    innerAs,
     defaultValue,
     disabled = false,
     value: controlledValue,
@@ -594,6 +597,8 @@ const SliderInput = forwardRef(function SliderInput(
     >
       <Comp
         {...rest}
+        // @ts-ignore
+        as={innerAs}
         ref={assignMultipleRefs(sliderRef, forwardedRef)}
         data-reach-slider-input=""
         data-disabled={disabled ? '' : undefined}
@@ -645,7 +650,7 @@ type SliderInputProps = Omit<SliderProps, 'children'> & {
  * @see Docs https://reach.tech/slider#slidertrack
  */
 const SliderTrackImpl = forwardRef(function SliderTrack(
-  { as: Comp = 'div', children, style = {}, ...props },
+  { as: Comp = 'div', innerAs, children, style = {}, ...props },
   forwardedRef
 ) {
   const { disabled, orientation, trackRef } = useSliderContext('SliderTrack');
@@ -653,6 +658,8 @@ const SliderTrackImpl = forwardRef(function SliderTrack(
   return (
     <Comp
       ref={assignMultipleRefs(trackRef, forwardedRef)}
+      // @ts-ignore
+      as={innerAs}
       style={{ ...style, position: 'relative' }}
       {...props}
       data-reach-slider-track=""
@@ -694,13 +701,15 @@ interface SliderTrackProps {
  * @see Docs https://reach.tech/slider#sliderrange
  */
 const SliderRangeImpl = forwardRef(function SliderRange(
-  { as: Comp = 'div', children, style = {}, ...props },
+  { as: Comp = 'div', innerAs, children, style = {}, ...props },
   forwardedRef
 ) {
   const { disabled, orientation, rangeStyle } = useSliderContext('SliderRange');
   return (
     <Comp
       ref={forwardedRef}
+      // @ts-ignore
+      as={innerAs}
       style={{ position: 'absolute', ...rangeStyle, ...style }}
       {...props}
       data-reach-slider-range=""
@@ -738,6 +747,7 @@ const SliderHandleImpl = forwardRef(function SliderHandle(
     // min,
     // max,
     as: Comp = 'div',
+    innerAs,
     onBlur,
     onFocus,
     style = {},
@@ -764,6 +774,8 @@ const SliderHandleImpl = forwardRef(function SliderHandle(
 
   return (
     <Comp
+      // @ts-ignore
+      as={innerAs}
       aria-disabled={disabled || undefined}
       // If the slider has a visible label, it is referenced by
       // `aria-labelledby` on the slider element. Otherwise, the slider
@@ -842,7 +854,7 @@ interface SliderHandleProps {}
  * @see Docs https://reach.tech/slider#slidermarker
  */
 const SliderMarkerImpl = forwardRef(function SliderMarker(
-  { as: Comp = 'div', children, style = {}, value, ...props },
+  { as: Comp = 'div', innerAs, children, style = {}, value, ...props },
   forwardedRef
 ) {
   const {
@@ -854,7 +866,7 @@ const SliderMarkerImpl = forwardRef(function SliderMarker(
     value: sliderValue,
   } = useSliderContext('SliderMarker');
 
-  const inRange = !(value < sliderMin || value > sliderMax);
+  const inRange = value >= sliderMin && value <= sliderMax;
   const absoluteStartPosition = `${valueToPercent(
     value,
     sliderMin,
@@ -871,6 +883,8 @@ const SliderMarkerImpl = forwardRef(function SliderMarker(
   return inRange ? (
     <Comp
       ref={forwardedRef}
+      // @ts-ignore
+      as={innerAs}
       style={{
         position: 'absolute',
         ...(isVertical

package/src/hooks/useControlledState.ts

@@ -18,11 +18,17 @@ export function useControlledState<
 ): [V, CustomEventHandler<E, H>] {
   const isControlled = valueProp !== undefined;
   const wasControlled = useRef(isControlled);
+  const hasWarned = useRef(false);
   const [valueState, setValueState] = useState<V>(defaultValue);
 
   if (isControlled) {
-    if (wasControlled.current && process.env.NODE_ENV !== 'production') {
+    if (
+      wasControlled.current &&
+      process.env.NODE_ENV !== 'production' &&
+      !hasWarned.current
+    ) {
       console.warn('Trying to change from controlled to uncontrolled.');
+      hasWarned.current = true;
     }
     return [
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

package/src/utils/polymorphic.ts

@@ -25,7 +25,7 @@ export type IntrinsicElement<E> = E extends ForwardRefComponent<infer I, any>
 type ForwardRefExoticComponent<E, OwnProps> = React.ForwardRefExoticComponent<
   Merge<
     E extends React.ElementType ? React.ComponentPropsWithRef<E> : never,
-    OwnProps & { as?: E }
+    OwnProps & { as?: E; innerAs?: E }
   >
 >;
 
@@ -47,11 +47,14 @@ export interface ForwardRefComponent<
    */
   <As = IntrinsicElementString>(
     props: As extends ''
-      ? { as: keyof JSX.IntrinsicElements }
+      ? {
+          as: keyof JSX.IntrinsicElements;
+          innerAs?: keyof JSX.IntrinsicElements;
+        }
       : As extends React.ComponentType<infer P>
-      ? Merge<P, OwnProps & { as: As }>
+      ? Merge<P, OwnProps & { as: As; innerAs?: As }>
       : As extends keyof JSX.IntrinsicElements
-      ? Merge<JSX.IntrinsicElements[As], OwnProps & { as: As }>
+      ? Merge<JSX.IntrinsicElements[As], OwnProps & { as: As; innerAs?: As }>
       : never
   ): React.ReactElement | null;
 }
@@ -62,11 +65,14 @@ export interface MemoComponent<IntrinsicElementString, OwnProps = {}>
   > {
   <As = IntrinsicElementString>(
     props: As extends ''
-      ? { as: keyof JSX.IntrinsicElements }
+      ? {
+          as: keyof JSX.IntrinsicElements;
+          innerAs?: keyof JSX.IntrinsicElements;
+        }
       : As extends React.ComponentType<infer P>
-      ? Merge<P, OwnProps & { as: As }>
+      ? Merge<P, OwnProps & { as: As; innerAs?: As }>
       : As extends keyof JSX.IntrinsicElements
-      ? Merge<JSX.IntrinsicElements[As], OwnProps & { as: As }>
+      ? Merge<JSX.IntrinsicElements[As], OwnProps & { as: As; innerAs?: As }>
       : never
   ): React.ReactElement | null;
 }