@digigov/react-core 2.0.0-rc.23 → 2.0.0-rc.25

package/src/{AutoCompleteInput → AutoCompleteInputBase}/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
-export interface AutoCompleteInputProps extends BaseProps<'input'> {
+export interface AutoCompleteInputBaseProps extends BaseProps<'input'> {
   /**
    * isFocused is optional. The default value is false.
    * isFocused prop is used to focus the list element.
@@ -9,16 +9,15 @@ export interface AutoCompleteInputProps extends BaseProps<'input'> {
    * @value false
    */
   isFocused?: boolean;
-
 }
 /**
- * AutoCompleteInput component is used to display the value that the user is typing.
+ * AutoCompleteInputBase component is used to display the value that the user is typing.
  *
  */
-export const AutoCompleteInput = React.forwardRef<
+export const AutoCompleteInputBase = React.forwardRef<
   HTMLInputElement,
-  AutoCompleteInputProps
->(function AutoCompleteInput(
+  AutoCompleteInputBaseProps
+>(function AutoCompleteInputBase(
   { name, isFocused, className, ...props },
   ref
 ) {
@@ -37,4 +36,4 @@ export const AutoCompleteInput = React.forwardRef<
   );
 });
 
-export default AutoCompleteInput;
+export default AutoCompleteInputBase;

package/src/AutoCompleteInputTypeahead/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface AutoCompleteInputTypeaheadProps extends BaseProps<'input'> { }
+export interface AutoCompleteInputTypeaheadProps extends BaseProps<'input'> {}
 /**
  * AutoCompleteInputTypeahead component is used to display the hole search value
  * in the background.

package/src/AutoCompleteMultipleInputContainer/index.tsx

@@ -6,7 +6,7 @@ export interface AutoCompleteMultipleInputContainerProps
   extends BaseProps<'div'> {
   open?: boolean;
   isFocused?: boolean;
-  numberOfSelected?: 1 | 2 | 3 | 'all';  
+  numberOfSelected?: 1 | 2 | 3 | 'all';
 }
 /**
  * Use AutoCompleteMultipleInputContainer to accept multiple values input.
@@ -15,7 +15,7 @@ export const AutoCompleteMultipleInputContainer = React.forwardRef<
   HTMLDivElement,
   AutoCompleteMultipleInputContainerProps
 >(function AutoCompleteMultipleInputContainer(
-  { numberOfSelected = 'all', open, children, isFocused, className, ...props },
+  { numberOfSelected = 'all', children, isFocused, className, ...props },
   ref
 ) {
   return (
@@ -25,8 +25,8 @@ export const AutoCompleteMultipleInputContainer = React.forwardRef<
       className={clsx(className, {
         'ds-autocomplete__multi-input-container': true,
         'ds-autocomplete__multi-input-container--focused': isFocused,
-        [`ds-autocomplete__multi-input-container--${numberOfSelected}`]: typeof(numberOfSelected) === 'number' 
-        
+        [`ds-autocomplete__multi-input-container--${numberOfSelected}`]:
+          typeof numberOfSelected === 'number',
       })}
       {...props}
     >

package/src/AutoCompleteResultList/index.test.tsx

@@ -11,6 +11,7 @@ it('renders the AutoCompleteResultList with no props', () => {
 
 it('renders the AutoCompleteResultList with isVisible props', () => {
   expect(
-    render(<AutoCompleteResultList isVisible>Hello</AutoCompleteResultList>).baseElement
+    render(<AutoCompleteResultList isVisible>Hello</AutoCompleteResultList>)
+      .baseElement
   ).toMatchSnapshot();
 });

package/src/AutoCompleteResultList/index.tsx

@@ -21,10 +21,7 @@ export interface AutoCompleteResultListProps extends BaseProps<'ul'> {
 export const AutoCompleteResultList = React.forwardRef<
   HTMLUListElement,
   AutoCompleteResultListProps
->(function List(
-  { isVisible = false, className, children, ...props },
-  ref
-) {
+>(function List({ isVisible = false, className, children, ...props }, ref) {
   return (
     <Base
       as="ul"

package/src/AutoCompleteResultListItem/index.test.tsx

@@ -5,7 +5,8 @@ import AutoCompleteResultListItem from '@digigov/react-core/AutoCompleteResultLi
 
 it('renders the AutoCompleteResultList with no props', () => {
   expect(
-    render(<AutoCompleteResultListItem>Hello</AutoCompleteResultListItem>).baseElement
+    render(<AutoCompleteResultListItem>Hello</AutoCompleteResultListItem>)
+      .baseElement
   ).toMatchSnapshot();
 });
 

package/src/AutoCompleteStatus/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface AutoCompleteStatusProps extends BaseProps<'div'> { }
+export interface AutoCompleteStatusProps extends BaseProps<'div'> {}
 /**
  * AutoCompleteStatus is a div element for displaying the autocomplete status.
  * Use AutoCompleteStatus inside AutoCompleteStatusContainer wrapper.

package/src/AutoCompleteStatusContainer/index.test.tsx

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

package/src/BackLink/index.test.tsx

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

package/src/BackLink/index.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 import { CaretIcon } from '@digigov/react-icons';
 
-export interface BackLinkProps extends BaseProps<'a'> { }
+export interface BackLinkProps extends BaseProps<'a'> {}
 /**
  * Use BackLink component to help users go back to the previous page in a multi-page transaction.
  */
@@ -17,9 +17,7 @@ export const BackLink = React.forwardRef<HTMLAnchorElement, BackLinkProps>(
         as="a"
         printHidden={printHidden}
         href={href}
-        onClick={() => {
-          !href && window.history.back();
-        }}
+        onClick={() => !href && window.history.back()}
         ref={ref}
         className={clsx(className, {
           'ds-back-link': true,

package/src/BackToTopLink/index.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 import { ArrowIcon } from '@digigov/react-icons';
 
-export interface BackToTopLinkProps extends BaseProps<'a'> { }
+export interface BackToTopLinkProps extends BaseProps<'a'> {}
 /**
  * Use BackToTopLink component to help users go to the top of the page.
  */

package/src/BannerContainer/index.test.tsx

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

package/src/BannerContainer/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import { Base, BaseProps } from '@digigov/react-core/Base';
 
-export interface BannerContainerProps extends BaseProps<'div'> { }
+export interface BannerContainerProps extends BaseProps<'div'> {}
 
 export const BannerContainer = React.forwardRef<
   HTMLDivElement,

package/src/Base/compat/button.native.tsx

@@ -21,7 +21,7 @@ export const FormButton = React.forwardRef<unknown, ButtonProps>(
         ref={ref}
         {...props}
         onClick={() => {
-          onClick && onClick({} as React.MouseEvent<HTMLButtonElement>);
+          if (onClick) onClick({} as React.MouseEvent<HTMLButtonElement>);
           if (props.type) formContext?.[props.type]();
         }}
       />

package/src/Base/compat/li.native.tsx

@@ -2,9 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 
 // TODO: Fix `props` type
-interface LiProps {
-  [key: string]: any;
-}
+type LiProps = Record<string, any>;
 
 export const Li = (props: LiProps) => {
   return <View {...props} />;

package/src/Base/index.native.tsx

@@ -72,7 +72,7 @@ export const Base: BaseComponent = React.forwardRef(function Base<
   ref: React.ComponentPropsWithRef<C>['ref']
 ) {
   const classNames = className?.split(' ') || [];
-  let applyBasePropsToWrapper: boolean = true;
+  let applyBasePropsToWrapper = true;
 
   const basePropToClassName = basePropGenerator({
     display,

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> = {
+interface AsProp<C extends React.ElementType> {
   as?: C;
-};
+}
 
 type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
 
@@ -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

package/src/Base/mapping.native.tsx

@@ -1,12 +1,12 @@
 import React 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/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/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/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/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/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/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/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/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/BreadcrumbsListItem/__snapshots__/index.test.tsx.snap

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

package/src/BreadcrumbsListItem/index.test.tsx

@@ -8,8 +8,3 @@ it('renders the BreadcrumbsListItem with no props', () => {
     render(<BreadcrumbsListItem>hello</BreadcrumbsListItem>).baseElement
   ).toMatchSnapshot();
 });
-it('renders the BreadcrumbsListItem with href', () => {
-  expect(
-    render(<BreadcrumbsListItem href="#">hello</BreadcrumbsListItem>).baseElement
-  ).toMatchSnapshot();
-});

package/src/BreadcrumbsListItem/index.tsx

@@ -1,23 +1,16 @@
 import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
-import Link from '@digigov/react-core/LinkBase';
 
-export interface BreadcrumbsListItemProps extends BaseProps<'li'> {
-  /**
-  * href is optional and provides the text and url of the Breadcrumbs items.
-
-  */
-  href?: string;
-}
+export interface BreadcrumbsListItemBaseProps extends BaseProps<'li'> {}
 /**
  * BreadcrumbsListItem creates a list of items with the possibility of navigation.
  * It should be used inside BreadcrumbsList as children component
  */
-export const BreadcrumbsListItem = React.forwardRef<
+export const BreadcrumbsListItemBase = React.forwardRef<
   HTMLLIElement,
-  BreadcrumbsListItemProps
->(function BreadcrumbsListItem({ href, className, children, ...props }, ref) {
+  BreadcrumbsListItemBaseProps
+>(function BreadcrumbsListItemBase({ className, children, ...props }, ref) {
   return (
     <Base
       as="li"
@@ -27,18 +20,9 @@ export const BreadcrumbsListItem = React.forwardRef<
       })}
       {...props}
     >
-      <Link
-        href={href}
-        defaultStyle={false}
-        className={clsx({
-          'ds-breadcrumbs__link': true,
-          'ds-breadcrumbs__link--inactive': href === undefined,
-        })}
-      >
-        {children}
-      </Link>
+      {children}
     </Base>
   );
 });
 
-export default BreadcrumbsListItem;
+export default BreadcrumbsListItemBase;

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

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

package/src/BreadcrumbsListItemLink/index.test.tsx

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

package/src/BreadcrumbsListItemLink/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link, { LinkBaseProps } from '@digigov/react-core/LinkBase';
+
+export interface BreadcrumbsListItemLinkProps extends LinkBaseProps {}
+/**
+ * BreadcrumbsListItemLink 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/BreadcrumbsListItemLink` instead.
+ */
+export const BreadcrumbsListItemLink = React.forwardRef<
+  HTMLAnchorElement,
+  BreadcrumbsListItemLinkProps
+>(function BreadcrumbsListItemLink({ href, className, children }, ref) {
+  return (
+    <Link
+      href={href}
+      defaultStyle={false}
+      className={clsx(className, {
+        'ds-breadcrumbs__link': true,
+        'ds-breadcrumbs__link--inactive': href === undefined,
+      })}
+      ref={ref}
+    >
+      {children}
+    </Link>
+  );
+});
+
+export default BreadcrumbsListItemLink;