refactor(ui): further improve useDefinition hook.

Signed-off-by: Johan Persson <johanopersson@gmail.com>

packages/ui/src/components/Box/definition.ts

@@ -22,7 +22,7 @@ import styles from './Box.module.css';
  * Component definition for Box
  * @public
  */
-export const BoxDefinition = defineComponent<BoxOwnProps, typeof styles>()({
+export const BoxDefinition = defineComponent<BoxOwnProps>()({
   styles,
   classNames: {
     root: 'bui-Box',

packages/ui/src/components/Button/definition.ts

@@ -22,10 +22,7 @@ import styles from './Button.module.css';
  * Component definition for Button
  * @public
  */
-export const ButtonDefinition = defineComponent<
-  ButtonOwnProps,
-  typeof styles
->()({
+export const ButtonDefinition = defineComponent<ButtonOwnProps>()({
   styles,
   classNames: {
     root: 'bui-Button',

packages/ui/src/hooks/useDefinition/defineComponent.ts

@@ -16,9 +16,11 @@
 
 import type { ComponentConfig } from './types';
 
-export function defineComponent<
-  P extends Record<string, any>,
-  S extends Record<string, string>,
->() {
-  return <const C extends ComponentConfig<P, S>>(config: C): C => config;
+export function defineComponent<P extends Record<string, any>>() {
+  return <
+    const S extends Record<string, string>,
+    const C extends ComponentConfig<P, S>,
+  >(
+    config: C,
+  ): C => config;
 }

packages/ui/src/hooks/useDefinition/helpers.ts

@@ -16,7 +16,7 @@
 
 import { breakpoints } from '../useBreakpoint';
 import { utilityClassMap } from '../../utils/utilityClassMap';
-import type { UtilityStyle } from './types';
+import type { UnwrapResponsive, UtilityStyle } from './types';
 
 const namedBreakpoints = breakpoints.filter(b => b.id !== 'initial');
 
@@ -28,9 +28,12 @@ function isResponsiveObject(value: unknown): value is Record<string, unknown> {
   );
 }
 
-export function resolveResponsiveValue<T>(value: T, breakpoint: string): T {
+export function resolveResponsiveValue<T>(
+  value: T,
+  breakpoint: string,
+): UnwrapResponsive<T> {
   if (!isResponsiveObject(value)) {
-    return value;
+    return value as UnwrapResponsive<T>;
   }
 
   const index = breakpoints.findIndex(b => b.id === breakpoint);
@@ -39,7 +42,7 @@ export function resolveResponsiveValue<T>(value: T, breakpoint: string): T {
   for (let i = index; i >= 0; i--) {
     const key = breakpoints[i].id;
     if (key in value && value[key] !== undefined) {
-      return value[key] as T;
+      return value[key] as UnwrapResponsive<T>;
     }
   }
 
@@ -47,11 +50,11 @@ export function resolveResponsiveValue<T>(value: T, breakpoint: string): T {
   for (let i = 0; i < breakpoints.length; i++) {
     const key = breakpoints[i].id;
     if (key in value && value[key] !== undefined) {
-      return value[key] as T;
+      return value[key] as UnwrapResponsive<T>;
     }
   }
 
-  return value;
+  return value as UnwrapResponsive<T>;
 }
 
 export function processUtilityProps<Keys extends string>(

packages/ui/src/hooks/useDefinition/types.ts

@@ -18,7 +18,7 @@ import type { ReactNode } from 'react';
 import type { Responsive } from '../../types';
 import type { utilityClassMap } from '../../utils/utilityClassMap';
 
-type UnwrapResponsive<T> = T extends Responsive<infer U> ? U : T;
+export type UnwrapResponsive<T> = T extends Responsive<infer U> ? U : T;
 
 export interface PropDefConfig<T> {
   dataAttribute?: boolean;
@@ -76,7 +76,9 @@ type DataAttributeKeys<PropDefs> = {
 }[keyof PropDefs];
 
 type DataAttributes<PropDefs> = {
-  [K in DataAttributeKeys<PropDefs> as `data-${string & K}`]?: string;
+  [K in DataAttributeKeys<PropDefs> as `data-${Lowercase<
+    string & K
+  >}`]?: string;
 } & { 'data-on-surface'?: string };
 
 export type UtilityKeys<D extends ComponentConfig<any, any>> =

packages/ui/src/hooks/useDefinition/useDefinition.tsx

@@ -71,7 +71,8 @@ export function useDefinition<
       ownPropsResolved[key] = finalValue;
 
       if ((config as any).dataAttribute) {
-        dataAttributes[`data-${key}`] = String(finalValue);
+        // eslint-disable-next-line no-restricted-syntax
+        dataAttributes[`data-${key.toLowerCase()}`] = String(finalValue);
       }
     }
   }