refactor(Form): replace react-jss with css modules

packages/main/src/components/Form/Form.module.css

@@ -0,0 +1,69 @@
+.formContainer {
+  container-type: inline-size;
+}
+
+.form {
+  display: grid;
+  align-items: center;
+  row-gap: 0.25rem;
+  column-gap: 0.5rem;
+
+  --_ui5wcr_form_label_text_align: end;
+}
+
+@container (max-width: 599px) {
+  .form {
+    --_ui5wcr_form_label_span: var(--_ui5wcr_form_label_span_s);
+    --_ui5wcr_form_columns: var(--_ui5wcr_form_columns_s);
+    --_ui5wcr_form_content_span: calc(12 - var(--_ui5wcr_form_label_span));
+    grid-template-columns: repeat(calc(12 * var(--_ui5wcr_form_columns)), 1fr);
+  }
+}
+
+@container (min-width: 600px) and (max-width: 1023px) {
+  .form {
+    --_ui5wcr_form_label_span: var(--_ui5wcr_form_label_span_m);
+    --_ui5wcr_form_columns: var(--_ui5wcr_form_columns_m);
+    --_ui5wcr_form_content_span: calc(12 - var(--_ui5wcr_form_label_span));
+    grid-template-columns: repeat(calc(12 * var(--_ui5wcr_form_columns)), 1fr);
+  }
+}
+
+@container (min-width: 1024px) and (max-width: 1439px) {
+  .form {
+    --_ui5wcr_form_label_span: var(--_ui5wcr_form_label_span_l);
+    --_ui5wcr_form_columns: var(--_ui5wcr_form_columns_l);
+    --_ui5wcr_form_content_span: calc(12 - var(--_ui5wcr_form_label_span));
+    grid-template-columns: repeat(calc(12 * var(--_ui5wcr_form_columns)), 1fr);
+  }
+}
+
+@container (min-width: 1440px) {
+  .form {
+    --_ui5wcr_form_label_span: var(--_ui5wcr_form_label_span_xl);
+    --_ui5wcr_form_columns: var(--_ui5wcr_form_columns_xl);
+    --_ui5wcr_form_content_span: calc(12 - var(--_ui5wcr_form_label_span));
+    grid-template-columns: repeat(calc(12 * var(--_ui5wcr_form_columns)), 1fr);
+  }
+}
+
+.solid {
+  background-color: var(--sapGroup_ContentBackground);
+}
+
+.transparent {
+  background-color: transparent;
+}
+
+.formTitle {
+  border-block-end: 1px solid var(--sapGroup_TitleBorderColor);
+  margin-block-end: 1.75rem;
+  grid-column: 1 / -1;
+}
+
+.labelSpan12 {
+  --_ui5wcr_form_content_span: 12;
+  --_ui5wcr_form_label_text_align: start;
+  --_ui5wcr_form_label_span: 12;
+  row-gap: 0;
+}

packages/main/src/components/Form/index.tsx

@@ -1,23 +1,20 @@
 'use client';
 
-import { Device, useSyncRef } from '@ui5/webcomponents-react-base';
+import { Device, useStylesheet, useSyncRef } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import type { ElementType, ReactNode } from 'react';
 import React, { forwardRef, useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
-import { createUseStyles } from 'react-jss';
 import { FormBackgroundDesign, TitleLevel } from '../../enums/index.js';
 import type { CommonProps } from '../../types/index.js';
 import { Title } from '../../webComponents/index.js';
-import { styles } from './Form.jss.js';
+import { classNames, styleData } from './Form.module.css.js';
 import { FormContext } from './FormContext.js';
 import type { FormContextType, FormElementTypes, FormGroupLayoutInfo, FormItemLayoutInfo, ItemInfo } from './types.js';
 
 const recalcReducerFn = (prev: number) => {
   return prev + 1;
 };
 
-const useStyles = createUseStyles(styles, { name: 'Form' });
-
 export interface FormPropTypes extends CommonProps {
   /**
    * Components that are placed into Form.
@@ -130,7 +127,7 @@ const Form = forwardRef<HTMLFormElement, FormPropTypes>((props, ref) => {
   } = props;
 
   const [items, setItems] = useState<Map<string, ItemInfo>>(() => new Map());
-  const classes = useStyles();
+  useStylesheet(styleData, Form.displayName);
 
   const columnsMap = new Map();
   columnsMap.set('Phone', columnsS);
@@ -265,7 +262,7 @@ const Form = forwardRef<HTMLFormElement, FormPropTypes>((props, ref) => {
 
     return { formItems, formGroups, registerItem, unregisterItem, rowsWithGroup };
   }, [items, registerItem, unregisterItem, currentNumberOfColumns, titleText, currentLabelSpan]);
-  const formClassNames = clsx(classes.form, classes[backgroundDesign.toLowerCase()]);
+  const formClassNames = clsx(classNames.form, classNames[backgroundDesign.toLowerCase()]);
   const CustomTag = as as ElementType;
 
   const prevFormItems = useRef<undefined | FormItemLayoutInfo[]>(undefined);
@@ -298,7 +295,7 @@ const Form = forwardRef<HTMLFormElement, FormPropTypes>((props, ref) => {
   return (
     <FormContext.Provider value={{ ...formLayoutContextValue, labelSpan: currentLabelSpan, recalcTrigger }}>
       <CustomTag
-        className={clsx(classes.formContainer, className)}
+        className={clsx(classNames.formContainer, className)}
         suppressHydrationWarning={true}
         ref={componentRef}
         style={{
@@ -316,7 +313,7 @@ const Form = forwardRef<HTMLFormElement, FormPropTypes>((props, ref) => {
       >
         <div className={formClassNames}>
           {titleText && (
-            <Title level={TitleLevel.H3} className={classes.formTitle} style={{ gridColumn: '1 / -1' }}>
+            <Title level={TitleLevel.H3} className={classNames.formTitle} style={{ gridColumn: '1 / -1' }}>
               {titleText}
             </Title>
           )}

packages/main/src/components/FormItem/FormItem.module.css

@@ -0,0 +1,27 @@
+.label {
+  grid-column-end: span var(--_ui5wcr_form_label_span);
+  justify-self: var(--_ui5wcr_form_label_text_align);
+  text-align: var(--_ui5wcr_form_label_text_align);
+
+  &[data-label-span='12'] {
+    justify-self: start;
+  }
+
+  &:has(+ .content > *:is([ui5-checkbox], [ui5-radio-button], [ui5-switch], [ui5-range-slider], [ui5-slider])) {
+    align-self: center;
+  }
+}
+
+.content {
+  display: flex;
+  grid-column-end: span var(--_ui5wcr_form_content_span);
+
+  &[data-label-span='12'] {
+    grid-column-end: span 12;
+    padding-block-end: 0.75rem;
+  }
+}
+
+.lastGroupItem {
+  margin-block-end: 1rem;
+}

packages/main/src/components/FormItem/index.tsx

@@ -1,16 +1,16 @@
 'use client';
 
-import { useIsomorphicId } from '@ui5/webcomponents-react-base';
+import { useIsomorphicId, useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import type { CSSProperties, ReactElement, ReactNode } from 'react';
 import React, { cloneElement, Fragment, isValidElement, useEffect, useMemo } from 'react';
-import { createUseStyles } from 'react-jss';
 import { WrappingType } from '../../enums/index.js';
 import { flattenFragments } from '../../internal/utils.js';
 import type { ReducedReactNodeWithBoolean } from '../../types/index.js';
 import type { LabelPropTypes } from '../../webComponents/Label/index.js';
 import { Label } from '../../webComponents/Label/index.js';
 import { useFormContext, useFormGroupContext } from '../Form/FormContext.js';
+import { classNames, styleData } from './FormItem.module.css.js';
 
 type FormItemContent =
   | ReducedReactNodeWithBoolean
@@ -35,56 +35,13 @@ interface InternalProps extends FormItemPropTypes {
   rowIndex?: number;
 }
 
-const CENTER_ALIGNED_CHILDREN = new Set(['CheckBox', 'RadioButton', 'Switch', 'RangeSlider', 'Slider']);
-
-const useStyles = createUseStyles(
-  {
-    label: {
-      gridColumnEnd: 'span var(--_ui5wcr_form_label_span)',
-      justifySelf: 'var(--_ui5wcr_form_label_text_align)',
-      textAlign: 'var(--_ui5wcr_form_label_text_align)',
-      '&[data-label-span="12"]': {
-        justifySelf: 'start'
-      },
-      '&:has(+ $content > [ui5-checkbox])': {
-        alignSelf: 'center'
-      },
-      '&:has(+ $content > [ui5-radio-button])': {
-        alignSelf: 'center'
-      },
-      '&:has(+ $content > [ui5-switch])': {
-        alignSelf: 'center'
-      },
-      '&:has(+ $content > [ui5-range-slider])': {
-        alignSelf: 'center'
-      },
-      '&:has(+ $content > [ui5-slider])': {
-        alignSelf: 'center'
-      }
-    },
-    content: {
-      display: 'flex',
-      gridColumnEnd: 'span var(--_ui5wcr_form_content_span)',
-      '&[data-label-span="12"]': {
-        gridColumnEnd: 'span 12',
-        paddingBlockEnd: '0.75rem'
-      }
-    },
-    lastGroupItem: {
-      marginBlockEnd: '1rem'
-    }
-  },
-  { name: 'FormItem' }
-);
-
 function FormItemLabel({ label, style, className }: { label: ReactNode; style?: CSSProperties; className?: string }) {
-  const classes = useStyles();
   const { labelSpan } = useFormContext();
 
   if (typeof label === 'string') {
     return (
       <Label
-        className={clsx(classes.label, className)}
+        className={clsx(classNames.label, className)}
         style={style}
         wrappingType={WrappingType.Normal}
         data-label-span={labelSpan}
@@ -102,7 +59,7 @@ function FormItemLabel({ label, style, className }: { label: ReactNode; style?:
       {
         showColon: showColon ?? true,
         wrappingType: wrappingType ?? WrappingType.Normal,
-        className: clsx(classes.label, className, label.props.className),
+        className: clsx(classNames.label, className, label.props.className),
         style: {
           ...style,
           ...(labelStyle || {})
@@ -143,7 +100,7 @@ const FormItem = (props: FormItemPropTypes) => {
     recalcTrigger
   } = useFormContext();
   const groupContext = useFormGroupContext();
-  const classes = useStyles();
+  useStylesheet(styleData, FormItem.displayName);
 
   useEffect(() => {
     registerItem?.(uniqueId, 'formItem', groupContext.id);
@@ -177,15 +134,13 @@ const FormItem = (props: FormItemPropTypes) => {
         label={label}
         style={{
           gridColumnStart,
-          gridRowStart: labelSpan === 12 ? calculatedGridRowIndex - 1 : calculatedGridRowIndex ?? undefined,
-          // TODO remove this line as soon as Firefox enables :has by default. https://caniuse.com/css-has
-          alignSelf: CENTER_ALIGNED_CHILDREN.has((children as any)?.type?.displayName) ? 'center' : undefined
+          gridRowStart: labelSpan === 12 ? calculatedGridRowIndex - 1 : calculatedGridRowIndex ?? undefined
         }}
-        className={clsx(labelSpan !== 12 && lastGroupItem && classes.lastGroupItem)}
+        className={clsx(labelSpan !== 12 && lastGroupItem && classNames.lastGroupItem)}
       />
       <div
         data-id={uniqueId}
-        className={clsx(classes.content, lastGroupItem && classes.lastGroupItem)}
+        className={clsx(classNames.content, lastGroupItem && classNames.lastGroupItem)}
         style={{
           gridColumnStart: contentGridColumnStart,
           gridRowStart: rowIndex != null ? calculatedGridRowStart : undefined