feat(popover): fixed comments from the code review

Author: Zankel-Engineering

packages/kit-headless/src/components/popover/popover-trigger.tsx

@@ -18,22 +18,24 @@ import { PopoverContext } from './popover-context';
 import styles from './popover-trigger.css?inline';
 
 export const PopoverTrigger = component$(
-  (props: ExtendedPropsByAriaAttribute) => {
+  (props: ExtendedPropsByAriaAttribute<'span'>) => {
     const ref = useSignal<HTMLElement>();
     const contextService = useContext(PopoverContext);
     useStylesScoped$(styles);
-    const store = useStore<Partial<QwikUiAreaAttributesFunctionReturnType>>({
+    const ariaAttributesStore = useStore<
+      Partial<QwikUiAreaAttributesFunctionReturnType<'span'>>
+    >({
       lastKey: undefined,
-      ariaAttributes: {},
+      ariaAttributes: undefined,
     });
     useTask$(({ track }) => {
       track(() => ({ ...props }));
-      const { lastKey, ariaAttributes } = getAriaAttributes(
+      const { lastKey, ariaAttributes } = getAriaAttributes<'span'>(
         props,
-        store.lastKey
+        ariaAttributesStore.lastKey
       );
-      store.ariaAttributes = ariaAttributes;
-      store.lastKey = lastKey;
+      ariaAttributesStore.ariaAttributes = ariaAttributes;
+      ariaAttributesStore.lastKey = lastKey;
     });
 
     useVisibleTask$(() => {
@@ -46,7 +48,7 @@ export const PopoverTrigger = component$(
     return (
       <span
         ref={ref}
-        {...store.ariaAttributes}
+        {...ariaAttributesStore.ariaAttributes}
         role="button"
         class="popover-trigger"
         onMouseOver$={

packages/kit-headless/src/utils/aria-attributes-helper.ts

@@ -1,33 +1,36 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { AriaAttributes } from '@builder.io/qwik';
 import {
   ExtendedPropsByAriaAttribute,
+  QwikAriaAttributeCamelCaseElement,
+  QwikIntrinsicAriaAttributes,
+  QwikUiAreaAttributesFunctionReturnType,
   QwikUiAreaAttributesFunctionType,
-  QwikUiAriaAttributesKebab,
-  isKeyOfAriaAttributes,
-  isKeyOfQwikUiAriaAttributes,
+  isKeyOfQwikCamelAriaAttributes,
+  isKeyOfQwikIntrinsicAriaAttributes,
 } from './aria-attributes.type';
 
-export function keyToKebabCase(str: string): keyof AriaAttributes {
+export function keyToKebabCase(
+  str: string
+): keyof QwikIntrinsicAriaAttributes<string> {
   const newStr = str
     .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2')
     .toLowerCase();
-  if (isKeyOfAriaAttributes(newStr)) {
+  if (isKeyOfQwikIntrinsicAriaAttributes(newStr)) {
     return newStr;
   } else {
     throw new Error('The key you speficied was not an aria attribute.');
   }
 }
 
-const cacheMap: Map<string, Partial<AriaAttributes>> = new Map();
+const cacheMap = new Map();
 
-const memoize = (
-  func: QwikUiAreaAttributesFunctionType
-): QwikUiAreaAttributesFunctionType => {
+const memoize = <K extends string>(
+  func: QwikUiAreaAttributesFunctionType<K>
+): QwikUiAreaAttributesFunctionType<K> => {
   return (
-    qwikUiAriaAttributes?: Partial<QwikUiAriaAttributesKebab>,
+    qwikUiAriaAttributes?: Partial<QwikAriaAttributeCamelCaseElement<K>>,
     lastKey?: string
-  ): ReturnType<QwikUiAreaAttributesFunctionType> => {
+  ): ReturnType<QwikUiAreaAttributesFunctionType<K>> => {
     const key = JSON.stringify(qwikUiAriaAttributes);
     if (lastKey) {
       cacheMap.delete(lastKey);
@@ -42,38 +45,41 @@ const memoize = (
   };
 };
 
-export const extractQwikUiAriaAttributes = <T = any>(
-  props: ExtendedPropsByAriaAttribute<T>
+export const extractCamelAriaAttributes = <K extends string, T = any>(
+  props: ExtendedPropsByAriaAttribute<K, T>
 ) => {
+  if (!props) {
+    return {};
+  }
   return Object.keys(props).reduce(
     (cur, propKey) =>
-      isKeyOfQwikUiAriaAttributes(propKey)
+      isKeyOfQwikCamelAriaAttributes(propKey)
         ? { ...cur, [propKey]: props[propKey] }
         : cur,
     {}
   );
 };
 
-export const getAriaAttributes = <T = any>(
-  props: ExtendedPropsByAriaAttribute<T>,
+export const getAriaAttributes = <K extends string, T = any>(
+  props: ExtendedPropsByAriaAttribute<K, T>,
   lastKey?: string
-): ReturnType<QwikUiAreaAttributesFunctionType> => {
+): QwikUiAreaAttributesFunctionReturnType<K> => {
   const process = (
-    qwikUiAriaAttributes?: Partial<QwikUiAriaAttributesKebab>
-  ): ReturnType<QwikUiAreaAttributesFunctionType> => {
+    qwikUiAriaAttributes?: Partial<QwikAriaAttributeCamelCaseElement<K>>
+  ): ReturnType<QwikUiAreaAttributesFunctionType<K>> => {
     return {
       lastKey: JSON.stringify(qwikUiAriaAttributes),
       ariaAttributes: qwikUiAriaAttributes
         ? Object.keys(qwikUiAriaAttributes).reduce(
             (cur, key) =>
-              isKeyOfQwikUiAriaAttributes(key)
+              isKeyOfQwikCamelAriaAttributes(key)
                 ? { ...cur, [keyToKebabCase(key)]: qwikUiAriaAttributes[key] }
                 : cur,
             {}
           )
         : {},
     };
   };
-  const qwikUiAriaAttributes = extractQwikUiAriaAttributes<T>(props);
+  const qwikUiAriaAttributes = extractCamelAriaAttributes<K, T>(props);
   return memoize(process)(qwikUiAriaAttributes, lastKey);
 };

packages/kit-headless/src/utils/aria-attributes.type.ts

@@ -1,54 +1,68 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { AriaAttributes } from '@builder.io/qwik';
+import { QwikIntrinsicElements } from '@builder.io/qwik';
 // import { propertiesOf } from 'ts-reflection';
 
 type ToCamelCase<S extends string> = S extends `${infer Head}-${infer Tail}`
   ? `${Head}${Capitalize<ToCamelCase<Tail>>}`
   : S;
 
-type KebabToCamelKeys<T> = {
-  [K in keyof T as ToCamelCase<string & K>]: T[K];
-};
+type StringValueKeys<T> = {
+  [K in keyof T]: T[K] extends string ? K : never;
+}[keyof T];
+
+export type AnyKeyOfQwikIntrinsicElement<K extends string> = StringValueKeys<
+  QwikIntrinsicElements[K]
+>;
 
-type FromCamelCase<S extends string> = string extends S
-  ? string
-  : S extends `${infer T}${infer U}`
-  ? U extends Uncapitalize<U>
-    ? `${Lowercase<T>}${FromCamelCase<U>}`
-    : `${Lowercase<T>}-${FromCamelCase<U>}`
-  : Lowercase<S>;
+type AriaKeysOnlyCamel<T> = {
+  [K in keyof T as K extends `aria-${string}` ? ToCamelCase<K> : never]: T[K];
+};
 
-type CamelToKebabKeys<T> = {
-  [K in keyof T as FromCamelCase<string & K>]: T[K];
+type AriaKeysOnlySnake<T> = {
+  [K in keyof T as K extends `aria-${string}` ? K : never]: T[K];
 };
 
-export type QwikUiAriaAttributesKebab = KebabToCamelKeys<AriaAttributes>;
+export type QwikAriaAttributeCamelCaseElement<K extends string> =
+  K extends string ? AriaKeysOnlyCamel<QwikIntrinsicElements[K]> : undefined;
 
-export type ExtendedPropsByAriaAttribute<T = undefined> = T extends object
-  ? T & QwikUiAriaAttributesKebab
+export type QwikIntrinsicAriaAttributes<K extends string> = K extends string
+  ? AriaKeysOnlySnake<QwikIntrinsicElements[K]>
+  : undefined;
+
+export type ExtendedPropsByAriaAttribute<
+  K extends string,
+  T = undefined
+> = T extends object
+  ? K extends undefined
+    ? T
+    : T & QwikAriaAttributeCamelCaseElement<K extends string ? K : undefined>
   : T extends undefined
-  ? QwikUiAriaAttributesKebab
+  ? K extends undefined
+    ? object
+    : QwikAriaAttributeCamelCaseElement<K extends string ? K : undefined>
   : never;
 
-export type QwikUiAreaAttributesFunctionType = (
-  ariaAttributes?: Partial<QwikUiAriaAttributesKebab>,
+export type QwikUiAreaAttributesFunctionType<K extends string> = (
+  ariaAttributes?: Partial<QwikAriaAttributeCamelCaseElement<K>>,
   lastKey?: string
-) => { lastKey: string; ariaAttributes: Partial<AriaAttributes> };
+) => {
+  lastKey: string;
+  ariaAttributes: Partial<QwikIntrinsicAriaAttributes<K>>;
+};
 
-export type QwikUiAreaAttributesFunctionReturnType =
-  ReturnType<QwikUiAreaAttributesFunctionType>;
+export type QwikUiAreaAttributesFunctionReturnType<K extends string> =
+  ReturnType<QwikUiAreaAttributesFunctionType<K>>;
 
-export function isKeyOfQwikUiAriaAttributes(
+export function isKeyOfQwikCamelAriaAttributes(
   key: string
-): key is keyof QwikUiAriaAttributesKebab {
+): key is keyof QwikAriaAttributeCamelCaseElement<string> {
   // const ariaAttributeKeys = propertiesOf<QwikUiAriaAttributesKebab>();
   // return ariaAttributeKeys.includes(key as keyof QwikUiAriaAttributesKebab);
   return key.startsWith('aria') && key.indexOf('-') === -1;
 }
 
-export function isKeyOfAriaAttributes(
+export function isKeyOfQwikIntrinsicAriaAttributes(
   key: string
-): key is keyof AriaAttributes {
+): key is keyof QwikIntrinsicAriaAttributes<string> {
   // const ariaAttributeKeys = propertiesOf<AriaAttributes>();
   // return ariaAttributeKeys.includes(key as keyof AriaAttributes);
   return key.startsWith('aria') && key.indexOf('-') > -1;