SAP · MarcusNotheis · Sep 4, 2024 · Sep 3, 2024 · Sep 3, 2024
@@ -0,0 +1,20 @@
+function cssLayersPlugin(opts) {
+  opts = opts || {};
+
+  return {
+    postcssPlugin: 'css-layers-plugin',
+    Once(root, { AtRule }) {
+      const layer = new AtRule({
+        name: 'layer',
+        params: 'ui5-webcomponents-react',
+        nodes: root.nodes
+      });
+      root.removeAll();
+      root.append(layer);
+    }
+  };
+}
+
+cssLayersPlugin.postcss = true;
+
+export default cssLayersPlugin;
@@ -5,12 +5,14 @@ import postcssModules from 'postcss-modules';
 import postcssNesting from 'postcss-nesting';
 import stringHash from 'string-hash';
 import postcssCSStoESM from '../scripts/postcss-css-to-esm.mjs';
+import cssLayersPlugin from './layers-plugin.js';
 
 export function postcssConfigFactory(packageName) {
   return {
     plugins: [
       postcssImport(),
       postcssNesting(),
+      cssLayersPlugin(),
       postcssModules({
         // generateScopedName: '[name]__[local]___[hash:base64:5]',
         generateScopedName: function (name, filename, css) {

diff --git a/packages/base/src/Device/index.cy.tsx b/packages/base/src/Device/index.cy.tsx
 function ResizeTestComponent({ onChange }: { onChange: (event: { width: number; height: number }) => void }) {
  useEffect(() => {
    attachResizeHandler(onChange);
  }, []);

  const unregister = () => {
    detachResizeHandler(onChange);
 }) {
  useEffect(() => {
    attachOrientationChangeHandler(onChange);
  }, []);

  const unregister = () => {
    detachOrientationChangeHandler(onChange);
diff --git a/packages/charts/src/components/BarChart/BarChart.tsx b/packages/charts/src/components/BarChart/BarChart.tsx
   * @param measure {IChartMeasure} Current measure object
   * @param dataElement {object} Current data element
   */
  highlightColor?: (value: number, measure: MeasureConfig, dataElement: Record<string, any>) => CSSProperties['color'];
 }

 interface DimensionConfig extends IChartDimension {
    ? dataKeys.findIndex((key) => key === chartConfig.secondYAxis?.dataKey)
    : 0;

  const [componentRef, chartRef] = useSyncRef<any>(ref);

  const onItemLegendClick = useLegendItemClick(onLegendClick);
  const labelFormatter = useLabelFormatter(primaryDimension);
diff --git a/packages/charts/src/components/BarChart/Placeholder.tsx b/packages/charts/src/components/BarChart/Placeholder.tsx
      speed={2}
      backgroundColor={ThemingParameters.sapContent_ImagePlaceholderBackground}
      foregroundColor={ThemingParameters.sapContent_ImagePlaceholderForegroundColor}
      backgroundOpacity={ThemingParameters.sapContent_DisabledOpacity as any}
    >
      <rect x="20" y="10" width="1" height="135" />
      <rect x="20" y="20" width="85" height="15" />
diff --git a/packages/charts/src/components/BulletChart/BulletChart.tsx b/packages/charts/src/components/BulletChart/BulletChart.tsx
   * @param measure {IChartMeasure} Current measure object
   * @param dataElement {object} Current data element
   */
  highlightColor?: (value: number, measure: MeasureConfig, dataElement: Record<string, any>) => CSSProperties['color'];
 }

 interface DimensionConfig extends IChartDimension {
    ...rest
  } = props;

  const [componentRef, chartRef] = useSyncRef<any>(ref);

  const chartConfig: BulletChartProps['chartConfig'] = {
    yAxisVisible: false,
          );
        } else {
          onDataPointClick(
            enrichEventWithDetails({} as any, {
              value: eventOrIndex.value,
              dataKey: eventOrIndex.dataKey,
              dataIndex: eventOrIndex.index,
        {chartConfig.xAxisVisible &&
          dimensions.map((dimension, index) => {
            let AxisComponent;
            const axisProps: any = {
              dataKey: dimension.accessor,
              interval: dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0),
              tickLine: index < 1,
          />
        )}
        {sortedMeasures?.map((element, index) => {
          const chartElementProps: any = {
            isAnimationActive: !noAnimation
          };
          let labelPosition = 'top';
	function ResizeTestComponent({ onChange }: { onChange: (event: { width: number; height: number }) => void }) {
	useEffect(() => {
	attachResizeHandler(onChange);
	}, []);
Check warning on line 12 in packages/base/src/Device/index.cy.tsx GitHub Actions / lint `React Hook useEffect has a missing dependency: 'onChange'. Either include it or remove the dependency array`

	const unregister = () => {
	detachResizeHandler(onChange);
	}) {
	useEffect(() => {
	attachOrientationChangeHandler(onChange);
	}, []);
Check warning on line 32 in packages/base/src/Device/index.cy.tsx GitHub Actions / lint `React Hook useEffect has a missing dependency: 'onChange'. Either include it or remove the dependency array`

	const unregister = () => {
	detachOrientationChangeHandler(onChange);
	* @param measure {IChartMeasure} Current measure object
	* @param dataElement {object} Current data element
	*/
	highlightColor?: (value: number, measure: MeasureConfig, dataElement: Record<string, any>) => CSSProperties['color'];
Check warning on line 79 in packages/charts/src/components/BarChart/BarChart.tsx GitHub Actions / lint `Unexpected any. Specify a different type`
	}

	interface DimensionConfig extends IChartDimension {
	? dataKeys.findIndex((key) => key === chartConfig.secondYAxis?.dataKey)
	: 0;

	const [componentRef, chartRef] = useSyncRef<any>(ref);
Check warning on line 189 in packages/charts/src/components/BarChart/BarChart.tsx GitHub Actions / lint `Unexpected any. Specify a different type`

	const onItemLegendClick = useLegendItemClick(onLegendClick);
	const labelFormatter = useLabelFormatter(primaryDimension);
	speed={2}
	backgroundColor={ThemingParameters.sapContent_ImagePlaceholderBackground}
	foregroundColor={ThemingParameters.sapContent_ImagePlaceholderForegroundColor}
	backgroundOpacity={ThemingParameters.sapContent_DisabledOpacity as any}
Check warning on line 15 in packages/charts/src/components/BarChart/Placeholder.tsx GitHub Actions / lint `Unexpected any. Specify a different type`
	>
	<rect x="20" y="10" width="1" height="135" />
	<rect x="20" y="20" width="85" height="15" />