@digigov/react-core 2.0.0-36b707c1 → 2.0.0-385c7994

package/src/Base/index.native.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, type JSX } from 'react';
 import { Text, View, ViewProps } from 'react-native';
 import { BaseProps as CoreBaseProps } from '@digigov/react-core/Base/index.web';
 import { mapping } from '@digigov/react-core/Base/mapping.native';
@@ -18,8 +18,11 @@ const BooleanMapper = {
   null: false,
   '': false,
 };
+
+const textHtmlTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'p', 'span'];
+
 export const Base: BaseComponent = React.forwardRef(function Base<
-  C extends React.ElementType = 'span',
+  C extends React.ElementType,
 >(
   {
     as,
@@ -69,6 +72,49 @@ export const Base: BaseComponent = React.forwardRef(function Base<
   ref: React.ComponentPropsWithRef<C>['ref']
 ) {
   const classNames = className?.split(' ') || [];
+  let applyBasePropsToWrapper = true;
+
+  const basePropToClassName = basePropGenerator({
+    display,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    m,
+    mt,
+    mb,
+    ml,
+    mr,
+    mx,
+    my,
+    padding,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    p,
+    pt,
+    pb,
+    pr,
+    pl,
+    px,
+    py,
+    printHidden,
+    printVisible,
+    hidden,
+    xsUpHidden,
+    smUpHidden,
+    mdUpHidden,
+    lgUpHidden,
+    xlUpHidden,
+    xsHidden,
+    smHidden,
+    mdHidden,
+    lgHidden,
+    xlHidden,
+  });
+
   if (typeof children === 'string') {
     children = [children];
   }
@@ -89,10 +135,17 @@ export const Base: BaseComponent = React.forwardRef(function Base<
           return child;
         });
       } else if (typeof child === 'string') {
+        if (as && textHtmlTags.includes(as as string)) {
+          applyBasePropsToWrapper = false;
+        }
         return (
           <Text
             key={index}
-            className={textClassNames}
+            className={
+              applyBasePropsToWrapper
+                ? textClassNames
+                : `${textClassNames} ${basePropToClassName}`
+            }
             {...(props.onClick && {
               onPress: props.onClick,
             })}
@@ -135,47 +188,11 @@ export const Base: BaseComponent = React.forwardRef(function Base<
             ? true
             : undefined
       }
-      className={basePropGenerator({
-        display,
-        margin,
-        marginTop,
-        marginBottom,
-        marginLeft,
-        marginRight,
-        m,
-        mt,
-        mb,
-        ml,
-        mr,
-        mx,
-        my,
-        padding,
-        paddingTop,
-        paddingBottom,
-        paddingLeft,
-        paddingRight,
-        p,
-        pt,
-        pb,
-        pr,
-        pl,
-        px,
-        py,
-        printHidden,
-        printVisible,
-        hidden,
-        xsUpHidden,
-        smUpHidden,
-        mdUpHidden,
-        lgUpHidden,
-        xlUpHidden,
-        xsHidden,
-        smHidden,
-        mdHidden,
-        lgHidden,
-        xlHidden,
-        className,
-      })}
+      className={
+        applyBasePropsToWrapper
+          ? `${basePropToClassName} ${className}`
+          : className
+      }
     >
       {children}
     </Component>

package/src/Base/index.web.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
+import clsx from 'clsx';
 import { basePropGenerator } from '@digigov/react-core/Base/utils';
-
-type AsProp<C extends React.ElementType> = {
-  as?: C;
-};
+interface AsProp<C extends React.ElementType> {
+  as?: C | React.ElementType<any>;
+}
 
 type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
 
@@ -106,7 +106,7 @@ export type BaseProps<C extends React.ElementType> =
       /** Components will be hidden between xl and 2xl screen size. */
       xlHidden?: boolean;
       /**  display is optional. It has not a default value. */
-      display?: 'flex' | 'block' | 'none'
+      display?: 'flex' | 'block' | 'none';
     }
   >;
 
@@ -146,13 +146,13 @@ export type SpacingValues =
   | 80
   | 96;
 
-export type SpacingMediaValues = {
+export interface SpacingMediaValues {
   xs?: SpacingValues;
   sm?: SpacingValues;
   md?: SpacingValues;
   lg?: SpacingValues;
   xl?: SpacingValues;
-};
+}
 
 /**
  * This is the type used in the type annotation for the component
@@ -162,7 +162,7 @@ type BaseComponent = <C extends React.ElementType = 'span'>(
 ) => React.ReactNode | null;
 
 export const Base: BaseComponent = React.forwardRef(function Base<
-  C extends React.ElementType = 'span',
+  C extends React.ElementType,
 >(
   {
     as,
@@ -212,50 +212,50 @@ export const Base: BaseComponent = React.forwardRef(function Base<
 ) {
   const Component = as || 'span';
 
+  const basePropToClassName = basePropGenerator({
+    display,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    m,
+    mt,
+    mb,
+    ml,
+    mr,
+    mx,
+    my,
+    padding,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    p,
+    pt,
+    pb,
+    pr,
+    pl,
+    px,
+    py,
+    printHidden,
+    printVisible,
+    hidden,
+    xsUpHidden,
+    smUpHidden,
+    mdUpHidden,
+    lgUpHidden,
+    xlUpHidden,
+    xsHidden,
+    smHidden,
+    mdHidden,
+    lgHidden,
+    xlHidden,
+  });
+
   return (
     <Component
-      as={as}
-      className={basePropGenerator({
-        display,
-        margin,
-        marginTop,
-        marginBottom,
-        marginLeft,
-        marginRight,
-        m,
-        mt,
-        mb,
-        ml,
-        mr,
-        mx,
-        my,
-        padding,
-        paddingTop,
-        paddingBottom,
-        paddingLeft,
-        paddingRight,
-        p,
-        pt,
-        pb,
-        pr,
-        pl,
-        px,
-        py,
-        printHidden,
-        printVisible,
-        hidden,
-        xsUpHidden,
-        smUpHidden,
-        mdUpHidden,
-        lgUpHidden,
-        xlUpHidden,
-        xsHidden,
-        smHidden,
-        mdHidden,
-        lgHidden,
-        xlHidden,
-        className,
-      })}
+      className={clsx(basePropToClassName, className)}
       ref={ref}
       {...props}
     >

package/src/Base/mapping.native.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { Link } from 'expo-router';
+import { cssInterop } from 'nativewind';
 import { Image, View } from 'react-native';
 import Svg, { Path, Circle, Rect, G, Polygon } from 'react-native-svg';
 import { Button } from '@digigov/react-core/Base/compat/button.native';
 import CompatDetails from '@digigov/react-core/Base/compat/details.native';
 import BaseInput from '@digigov/react-core/Base/compat/Input/index.native';
 import { Ol } from '@digigov/react-core/Base/compat/ol.native';
-import { cssInterop } from 'nativewind'
 export type MapProps<T extends keyof JSX.IntrinsicElements> =
   React.ComponentPropsWithoutRef<T>;
 
@@ -19,7 +19,11 @@ export type MappingType = {
 };
 
 export const mapping: MappingType = {
-  a: ({ children, ...props }) => <Link {...props} asChild ><View>{children}</View></Link>,
+  a: ({ children, ...props }) => (
+    <Link {...props} asChild>
+      <View>{children}</View>
+    </Link>
+  ),
   img: (props) => <Image {...props} />,
   button: Button,
   input: BaseInput,
@@ -30,8 +34,8 @@ export const mapping: MappingType = {
   // @ts-ignore
   svg: cssInterop(Svg, {
     className: {
-      target: "style",
-      nativeStyleToProp: { width: true, height: true }
+      target: 'style',
+      nativeStyleToProp: { width: true, height: true },
     },
   }),
   rect: (props) => <Rect {...props} />,

package/src/Base/utils.ts

@@ -59,9 +59,8 @@ export const basePropGenerator = ({
   mdHidden,
   lgHidden,
   xlHidden,
-  className,
 }) => {
-  return clsx(className, {
+  return clsx({
     [`ds-display-${display}`]: display !== undefined,
     ...generateSpacingClasses('ds-m', m ?? margin),
     ...generateSpacingClasses('ds-mt', mt ?? marginTop),

package/src/Base/wrap.native.tsx

@@ -1,9 +1,7 @@
 import React, { useContext, useMemo, useState } from 'react';
 import { View } from 'react-native';
 
-interface WrapperContextType {
-  (cls: string): void;
-}
+type WrapperContextType = (cls: string) => void;
 
 const WrapperContext = React.createContext<WrapperContextType>(
   (cls: string) => {
@@ -11,7 +9,11 @@ const WrapperContext = React.createContext<WrapperContextType>(
   }
 );
 
-const Wrapper = React.memo(({ children }: { children?: React.ReactNode }) => {
+const Wrapper = React.memo(function Wrapper({
+  children,
+}: {
+  children?: React.ReactNode;
+}) {
   const [className, setClassName] = useState('');
   return (
     <WrapperContext.Provider value={setClassName}>
@@ -21,6 +23,7 @@ const Wrapper = React.memo(({ children }: { children?: React.ReactNode }) => {
     </WrapperContext.Provider>
   );
 });
+Wrapper.displayName = 'Wrapper';
 
 interface WrappedComponentProps {
   className?: string;
@@ -67,11 +70,11 @@ export const wrap = (Component: React.ElementType) => {
           ref={ref}
           onFocus={(e: unknown) => {
             setClassName(focusedWrapperClassNames.join(' '));
-            onFocus && onFocus(e);
+            if (onFocus) onFocus(e);
           }}
           onBlur={(e: unknown) => {
             setClassName(wrapperClassNames.join(' '));
-            onBlur && onBlur(e);
+            if (onBlur) onBlur(e);
           }}
           className={classNames.join(' ')}
           {...props}

package/src/Blockquote/__snapshots__/index.test.tsx.snap

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the Blockquote with dense props 1`] = `
 <body>
   <div>
     <blockquote
-      class="ds-blockquote--dense ds-blockquote"
+      class="ds-blockquote ds-blockquote--dense"
     >
       hello
     </blockquote>

package/src/Blockquote/index.test.tsx

@@ -8,5 +8,7 @@ it('renders the Blockquote with no props', () => {
 });
 
 it('renders the Blockquote with dense props', () => {
-  expect(render(<Blockquote dense>hello</Blockquote>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Blockquote dense>hello</Blockquote>).baseElement
+  ).toMatchSnapshot();
 });

package/src/Bottom/__snapshots__/index.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the Bottom with no props 1`] = `
 <body>

package/src/Bottom/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface BottomProps extends BaseProps<'div'> { }
+export interface BottomProps extends BaseProps<'div'> {}
 /**
  * Bottom is used inside the Layout component and it must be the last component in order.
  */

package/src/BottomInfo/__snapshots__/index.test.tsx.snap

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the BottomInfo with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-bottom-info ds-container ds-gap-sm-12 ds-grid"
+      class="ds-bottom-info ds-container ds-grid ds-grid-item ds-gap-sm-12"
     >
       hello
     </div>

package/src/BottomInfo/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Container, { ContainerProps } from '@digigov/react-core/Container';
 
-export interface BottomInfoProps extends ContainerProps { }
+export interface BottomInfoProps extends ContainerProps {}
 /**
  * Bottom BottomInfo is used inside the Bottom component and it must be the first component in order.
  */

package/src/BottomInfoContainer/__snapshots__/index.test.tsx.snap

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the BottomInfoContainer with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-bottom-info__container ds-container ds-gap-sm-12 ds-grid"
+      class="ds-bottom-info__container ds-container ds-grid ds-grid-item ds-gap-sm-12"
     >
       hello
     </div>

package/src/BottomInfoContainer/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Container, { ContainerProps } from '@digigov/react-core/Container';
 
-export interface BottomInfoContainerProps extends ContainerProps { }
+export interface BottomInfoContainerProps extends ContainerProps {}
 /**
  * Bottom BottomInfoContainer is used inside the Bottom component and it must be the first component in order.
  */

package/src/BottomInfoContent/__snapshots__/index.test.tsx.snap

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the BottomInfoContent with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-bottom-info__content xs:ds-grid__col-span-12"
+      class="ds-bottom-info__content ds-grid-item xs:ds-grid__col-span-12"
     >
       hello
     </div>

package/src/BottomInfoContent/index.test.tsx

@@ -4,5 +4,7 @@ import { render } from '@testing-library/react';
 import BottomInfoContent from '@digigov/react-core/BottomInfoContent';
 
 it('renders the BottomInfoContent with no props', () => {
-  expect(render(<BottomInfoContent>hello</BottomInfoContent>).baseElement).toMatchSnapshot();
+  expect(
+    render(<BottomInfoContent>hello</BottomInfoContent>).baseElement
+  ).toMatchSnapshot();
 });

package/src/BottomInfoContent/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Grid, { GridProps } from '@digigov/react-core/Grid';
 
-export interface BottomInfoContentProps extends GridProps { }
+export interface BottomInfoContentProps extends GridProps {}
 /**
  * BottomInfoContent is used inside the BottomInfoContainer component.
  */

package/src/Breadcrumbs/__snapshots__/index.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the Breadcrumbs with no props 1`] = `
 <body>

package/src/Breadcrumbs/index.test.tsx

@@ -4,5 +4,7 @@ import { render } from '@testing-library/react';
 import Breadcrumbs from '@digigov/react-core/Breadcrumbs';
 
 it('renders the Breadcrumbs with no props', () => {
-  expect(render(<Breadcrumbs>hello</Breadcrumbs>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Breadcrumbs>hello</Breadcrumbs>).baseElement
+  ).toMatchSnapshot();
 });

package/src/Breadcrumbs/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface BreadcrumbsProps extends BaseProps<'div'> { }
+export interface BreadcrumbsProps extends BaseProps<'div'> {}
 /**
  * Use Breadcrumbs component when you need to help users understand and move between the multiple levels of a website.
  * The breadcrumb should start with your ‘home’ page and end with the parent section of the current page.

package/src/BreadcrumbsList/__snapshots__/index.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the BreadcrumbsList with no props 1`] = `
 <body>

package/src/BreadcrumbsList/index.test.tsx

@@ -4,5 +4,7 @@ import { render } from '@testing-library/react';
 import BreadcrumbsList from '@digigov/react-core/BreadcrumbsList';
 
 it('renders the BreadcrumbsList with no props', () => {
-  expect(render(<BreadcrumbsList>hello</BreadcrumbsList>).baseElement).toMatchSnapshot();
+  expect(
+    render(<BreadcrumbsList>hello</BreadcrumbsList>).baseElement
+  ).toMatchSnapshot();
 });

package/src/BreadcrumbsList/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface BreadcrumbsListProps extends BaseProps<'ol'> { }
+export interface BreadcrumbsListProps extends BaseProps<'ol'> {}
 /**
  * BreadcrumbsList is used for providing the items inside Breadcrumbs.
  */

package/src/BreadcrumbsListItemLinkBase/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,26 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`renders the BreadcrumbsListItemLinkBase with href 1`] = `
+<body>
+  <div>
+    <a
+      class="ds-breadcrumbs__link ds-link"
+      href="#"
+    >
+      hello
+    </a>
+  </div>
+</body>
+`;
+
+exports[`renders the BreadcrumbsListItemLinkBase with no props 1`] = `
+<body>
+  <div>
+    <a
+      class="ds-breadcrumbs__link ds-breadcrumbs__link--inactive ds-link"
+    >
+      hello
+    </a>
+  </div>
+</body>
+`;

package/src/BreadcrumbsListItemLinkBase/index.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { BreadcrumbsListItemLinkBase } from '@digigov/react-core/BreadcrumbsListItemLinkBase';
+
+it('renders the BreadcrumbsListItemLinkBase with no props', () => {
+  expect(
+    render(<BreadcrumbsListItemLinkBase>hello</BreadcrumbsListItemLinkBase>)
+      .baseElement
+  ).toMatchSnapshot();
+});
+it('renders the BreadcrumbsListItemLinkBase with href', () => {
+  expect(
+    render(
+      <BreadcrumbsListItemLinkBase href="#">hello</BreadcrumbsListItemLinkBase>
+    ).baseElement
+  ).toMatchSnapshot();
+});

package/src/BreadcrumbsListItemLinkBase/index.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import clsx from 'clsx';
+import { LinkBase, LinkBaseProps } from '@digigov/react-core/LinkBase';
+
+export interface BreadcrumbsListItemLinkBaseProps extends LinkBaseProps {}
+/**
+ * BreadcrumbsListItemLinkBase creates an anchor link to navigate in different
+ * parts of the breadcrumbs.
+ * It should be used inside BreadcrumbsListItem as children component. This is
+ * the default link component for the BreadcrumbsListItem and it uses the LinkBase
+ * component from `@digigov/react-core`. In case you need to use a different Link
+ * component from a framework or a custom router, use `@digigov/ui/navigation/BreadcrumbsListItemLinkBase` instead.
+ */
+export const BreadcrumbsListItemLinkBase = React.forwardRef<
+  HTMLAnchorElement,
+  BreadcrumbsListItemLinkBaseProps
+>(function BreadcrumbsListItemLinkBase({ href, className, children }, ref) {
+  return (
+    <LinkBase
+      href={href}
+      className={clsx(className, {
+        'ds-breadcrumbs__link': true,
+        'ds-breadcrumbs__link--inactive': href === undefined,
+      })}
+      ref={ref}
+    >
+      {children}
+    </LinkBase>
+  );
+});
+
+export default BreadcrumbsListItemLinkBase;

package/src/BreadcrumbsListItemWrapper/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,13 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`renders the BreadcrumbsListItem with no props 1`] = `
+<body>
+  <div>
+    <li
+      class="ds-breadcrumbs__list-item"
+    >
+      hello
+    </li>
+  </div>
+</body>
+`;

package/src/BreadcrumbsListItemWrapper/index.test.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import BreadcrumbsListItem from '@digigov/react-core/BreadcrumbsListItemWrapper';
+
+it('renders the BreadcrumbsListItem with no props', () => {
+  expect(
+    render(<BreadcrumbsListItem>hello</BreadcrumbsListItem>).baseElement
+  ).toMatchSnapshot();
+});