@progressiveui/react 1.22.0 → 2.0.0

package/src/components/MainNavigation/MainNavigation.tsx

@@ -7,10 +7,6 @@ import { ScreenSize } from "../../utils";
 import MainNavigationContext from "./MainNavigationContext";
 import MobileButtonDefault, { MobileButtonProps } from "./MobileButton";
 import { WrapperProps } from "../Wrapper/Wrapper";
-import {
-  WfpLogoVerticalEn,
-  WfpLogoStandardBlackEn,
-} from "@progressiveui/icons-react";
 
 /** The Main Navigation is a Horizontal Menu which consists of multiple clickable items placed at the top of the page. The navigation stays unchanged when browswing through the site and is present on every page. The currently selected item is usually highlighted. */
 
@@ -142,25 +138,7 @@ const MainNavigation = ({
             >
               Menu
             </MobileButton>
-            <div className={`${prefix}--main-navigation__logo`}>
-              {logoRibbon === "default" ? (
-                <div className={`${prefix}--main-navigation__logo__default`}>
-                  <div
-                    className={`${prefix}--main-navigation__logo__default__ribbon`}
-                  >
-                    <WfpLogoVerticalEn description="WFP" />
-                  </div>
-                  {logo}
-                </div>
-              ) : logoRibbon === "offShelf" ? (
-                <div className={`${prefix}--main-navigation__logo__offShelf`}>
-                  <WfpLogoStandardBlackEn description="WFP" />
-                  {logo}
-                </div>
-              ) : (
-                logo
-              )}
-            </div>
+            <div className={`${prefix}--main-navigation__logo`}>{logo}</div>
           </div>
           <ul className={listClasses}>{children}</ul>
         </Wrapper>

package/src/components/MainNavigation/index.ts

@@ -1,4 +1,3 @@
-export { default as MainNavigation } from './MainNavigation';
-export { default as MainNavigationExternal } from './MainNavigationExternal';
-export { default as MainNavigationContext } from './MainNavigationContext';
-export { default as useMainNavigation } from './useMainNavigation';
+export { default as MainNavigation } from "./MainNavigation";
+export { default as MainNavigationContext } from "./MainNavigationContext";
+export { default as useMainNavigation } from "./useMainNavigation";

package/src/components/Pagination/Pagination.stories.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import markdown from "./README.mdx";
 import Pagination from ".";
 
 export default {
@@ -8,7 +7,6 @@ export default {
   parameters: {
     componentSubtitle: "Component",
     status: "released",
-    mdx: markdown,
   },
 };
 

package/src/components/Search/Search.tsx

@@ -97,7 +97,7 @@ const Search: React.FC<SearchProps> = React.forwardRef((props, ref) => {
     }
   };
 
-  const clearSearch = () => {
+  const clearSearch = (evt) => {
     setValue("");
     // setTimeout(() => {
     //   console.log("value", value);

package/src/components/Text/Text.tsx

@@ -30,7 +30,9 @@ interface TextProps extends React.AllHTMLAttributes<HTMLDivElement> {
   className?: string;
 }
 
-export const textLookup: Record<TextKind, keyof JSX.IntrinsicElements> = {
+export const textLookup: {
+  [key in NonNullable<TextProps["kind"]>]: React.ElementType;
+} = {
   h1: "h1",
   h2: "h2",
   h3: "h3",
@@ -54,6 +56,7 @@ export const textLookup: Record<TextKind, keyof JSX.IntrinsicElements> = {
  */
 
 const Text: React.FC<TextProps> = ({
+  as,
   children,
   className,
   kind,
@@ -61,8 +64,8 @@ const Text: React.FC<TextProps> = ({
   spacingBottom,
 }) => {
   const { prefix } = useSettings();
-  const TagName: keyof JSX.IntrinsicElements =
-    kind && textLookup[kind] ? textLookup[kind] : "div";
+  const TagName: React.ElementType = kind ? textLookup[kind] : "div";
+
   const classes = classNames(
     {
       [`${prefix}--text`]: true,
@@ -71,7 +74,7 @@ const Text: React.FC<TextProps> = ({
       [`${prefix}--text__spacing-top-${spacingTop}`]: spacingTop,
       [`${prefix}--text__spacing-bottom-${spacingBottom}`]: spacingBottom,
     },
-    className
+    className,
   );
   return React.createElement(TagName, { className: classes }, children);
 };

package/src/components/Toggle/Toggle.tsx

@@ -24,12 +24,12 @@ interface ToggleProps extends InputProps, React.ComponentPropsWithRef<"input"> {
   /**
    * Provide an optional hook that is called when the control is toggled
    */
-  onToggle?: (
+  /* onToggleLegacy?: (
     value: boolean,
     htmlFor: string,
-    event: React.ChangeEvent<HTMLInputElement>
+    event: React.ChangeEvent<HTMLInputElement>,
   ) => void;
-  className?: string;
+  className?: string; */
   /**
    * Provide an id that unique represents the underlying `input`
    */
@@ -64,7 +64,7 @@ const Toggle: React.FC<ToggleProps> = React.forwardRef((props, ref) => {
     {
       [`${prefix}--form-item`]: true,
     },
-    className
+    className,
   );
 
   // const checkedProps = {};

package/src/index.ts

@@ -80,7 +80,6 @@ export { List, ListItem } from "./components/List";
 export {
   MainNavigation,
   MainNavigationContext,
-  MainNavigationExternal,
   useMainNavigation,
 } from "./components/MainNavigation";
 export { default as MainNavigationItem } from "./components/MainNavigationItem";

package/umd/dist/components/Accordion/hooks/useAccordionItemEffect.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ItemStateOptions } from '../utils/constants';
 declare const useAccordionItemEffect: <E extends Element>({ itemKey, initialEntered, disabled, }?: ItemStateOptions) => {
-    itemRef: import("react").RefObject<HTMLInputElement>;
+    itemRef: import("react").RefObject<HTMLInputElement | null>;
     state: Readonly<{
         status: import("react-transition-state").TransitionStatus;
         isMounted: boolean;

package/umd/dist/components/Footer/Footer.d.ts

@@ -19,18 +19,10 @@ interface FooterProps extends React.HTMLAttributes<HTMLDivElement> {
      Optional WFP logo for mobile devices, can be used if the Logo should be provided by the CDN
    */
     logo?: string | React.ReactNode;
-    /**
-     Optional WFP logo for desktop devices, can be used if the Logo should be provided by the CDN
-   */
-    logoExtended?: string | React.ReactNode;
     /**
      * Specify the max-width on desktop devices (same as \`Wrapper\` component)
      */
     pageWidth?: ScreenSize;
-    /**
-     Override the SDG icon
-   */
-    sdgLogo?: React.ReactNode;
     /**
      The WFP logo, can be used if the SDG logo should be provided in a different way
    */

package/umd/dist/components/Footer/index.d.ts

@@ -1,2 +1,2 @@
-export { default as Footer } from './Footer';
-export { FooterExternal, LinksColumn, FooterMetaLink } from './FooterExternal';
+export { default as Footer } from "./Footer";
+export { FooterExternal, LinksColumn, FooterMetaLink } from "./FooterExternal";

package/umd/dist/components/Input/useInput.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 export interface UseInputProps {
     /**
      * Specify an optional className to be applied to the <input> node
@@ -111,6 +111,9 @@ export declare const useInput: ({ addonAfter, className, inputClassName, id, pla
         className: string;
     };
     wrapperProps: {
+        calculatedId: string | undefined;
+        id: string | undefined;
+        name: string | undefined;
         className: string | undefined;
         addonAfter: React.ReactNode;
         labelText: React.ReactNode;

package/umd/dist/components/MainNavigation/index.d.ts

@@ -1,4 +1,3 @@
-export { default as MainNavigation } from './MainNavigation';
-export { default as MainNavigationExternal } from './MainNavigationExternal';
-export { default as MainNavigationContext } from './MainNavigationContext';
-export { default as useMainNavigation } from './useMainNavigation';
+export { default as MainNavigation } from "./MainNavigation";
+export { default as MainNavigationContext } from "./MainNavigationContext";
+export { default as useMainNavigation } from "./useMainNavigation";

package/umd/dist/hooks/useHeightTransition.d.ts

@@ -1,4 +1,4 @@
 import { CSSProperties } from "react";
 import { TransitionState } from "react-transition-state";
-declare const useHeightTransition: <E extends Element>({ status, isResolved, }: TransitionState) => readonly [CSSProperties, import("react").RefObject<HTMLInputElement>];
+declare const useHeightTransition: <E extends Element>({ status, isResolved, }: TransitionState) => readonly [CSSProperties, import("react").RefObject<HTMLInputElement | null>];
 export { useHeightTransition };

package/umd/dist/index.d.ts

@@ -27,7 +27,7 @@ export { default as Loading } from "./components/Loading";
 export { default as Input, useInput, Label, InlineErrorMessage, Helper, AddonBefore, AddonAfter, } from "./components/Input";
 export { default as InlineLoading } from "./components/InlineLoading";
 export { List, ListItem } from "./components/List";
-export { MainNavigation, MainNavigationContext, MainNavigationExternal, useMainNavigation, } from "./components/MainNavigation";
+export { MainNavigation, MainNavigationContext, useMainNavigation, } from "./components/MainNavigation";
 export { default as MainNavigationItem } from "./components/MainNavigationItem";
 export { SubNavigation, SubNavigationHeader, SubNavigationTitle, SubNavigationLink, SubNavigationFilter, SubNavigationContent, SubNavigationList, SubNavigationGroup, SubNavigationItem, } from "./components/SubNavigation";
 export { default as mdxComponents } from "./components/MdxComponents";