feat(popover): changes after review

Author: Zankel-Engineering

apps/website/src/routes/docs/headless/(components)/popover/examples.tsx

@@ -10,7 +10,7 @@ export const MainExample = component$(() => {
           <PopoverContent>
             <div class="p-4 bg-gray-500">Hi, I'm the content</div>
           </PopoverContent>
-          <PopoverTrigger ariaLabel="Freund">Click on me</PopoverTrigger>
+          <PopoverTrigger aria-label="Freund">Click on me</PopoverTrigger>
         </Popover>
       </div>
       <div q:slot="codeExample">
@@ -30,7 +30,7 @@ export const Example1 = component$(() => {
               Hi, I'm the content, but now on top
             </div>
           </PopoverContent>
-          <PopoverTrigger ariaLabel="no-click-friend">
+          <PopoverTrigger aria-label="no-click-friend">
             Click on me
           </PopoverTrigger>
         </Popover>

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

@@ -1,42 +1,22 @@
 import {
   $,
+  QwikIntrinsicElements,
   Slot,
   component$,
   useContext,
   useSignal,
-  useStore,
   useStylesScoped$,
-  useTask$,
   useVisibleTask$,
 } from '@builder.io/qwik';
-import {
-  ExtendedPropsByAriaAttribute,
-  QwikUiAreaAttributesFunctionReturnType,
-  getAriaAttributes,
-} from '../../utils';
+import { AriaKeysOnlyKebab } from '../../utils';
 import { PopoverContext } from './popover-context';
 import styles from './popover-trigger.css?inline';
 
 export const PopoverTrigger = component$(
-  (props: ExtendedPropsByAriaAttribute<'span'>) => {
+  (props: AriaKeysOnlyKebab<QwikIntrinsicElements['span']>) => {
     const ref = useSignal<HTMLElement>();
     const contextService = useContext(PopoverContext);
     useStylesScoped$(styles);
-    const ariaAttributesStore = useStore<
-      Partial<QwikUiAreaAttributesFunctionReturnType<'span'>>
-    >({
-      lastKey: undefined,
-      ariaAttributes: undefined,
-    });
-    useTask$(({ track }) => {
-      track(() => ({ ...props }));
-      const { lastKey, ariaAttributes } = getAriaAttributes<'span'>(
-        props,
-        ariaAttributesStore.lastKey
-      );
-      ariaAttributesStore.ariaAttributes = ariaAttributes;
-      ariaAttributesStore.lastKey = lastKey;
-    });
 
     useVisibleTask$(() => {
       contextService.setTriggerRef$(ref);
@@ -48,7 +28,7 @@ export const PopoverTrigger = component$(
     return (
       <span
         ref={ref}
-        {...ariaAttributesStore.ariaAttributes}
+        {...props}
         role="button"
         class="popover-trigger"
         onMouseOver$={

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

@@ -1,69 +1,3 @@
-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 StringValueKeys<T> = {
-  [K in keyof T]: T[K] extends string ? K : never;
-}[keyof T];
-
-export type AnyKeyOfQwikIntrinsicElement<K extends string> = StringValueKeys<
-  QwikIntrinsicElements[K]
->;
-
-type AriaKeysOnlyCamel<T> = {
-  [K in keyof T as K extends `aria-${string}` ? ToCamelCase<K> : never]: T[K];
-};
-
-type AriaKeysOnlySnake<T> = {
+export type AriaKeysOnlyKebab<T> = {
   [K in keyof T as K extends `aria-${string}` ? K : never]: T[K];
 };
-
-export type QwikAriaAttributeCamelCaseElement<K extends string> =
-  K extends string ? AriaKeysOnlyCamel<QwikIntrinsicElements[K]> : undefined;
-
-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
-  ? K extends undefined
-    ? object
-    : QwikAriaAttributeCamelCaseElement<K extends string ? K : undefined>
-  : never;
-
-export type QwikUiAreaAttributesFunctionType<K extends string> = (
-  ariaAttributes?: Partial<QwikAriaAttributeCamelCaseElement<K>>,
-  lastKey?: string
-) => {
-  lastKey: string;
-  ariaAttributes: Partial<QwikIntrinsicAriaAttributes<K>>;
-};
-
-export type QwikUiAreaAttributesFunctionReturnType<K extends string> =
-  ReturnType<QwikUiAreaAttributesFunctionType<K>>;
-
-export function isKeyOfQwikCamelAriaAttributes(
-  key: string
-): 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 isKeyOfQwikIntrinsicAriaAttributes(
-  key: string
-): key is keyof QwikIntrinsicAriaAttributes<string> {
-  // const ariaAttributeKeys = propertiesOf<AriaAttributes>();
-  // return ariaAttributeKeys.includes(key as keyof AriaAttributes);
-  return key.startsWith('aria') && key.indexOf('-') > -1;
-}