@progressiveui/react 1.22.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progressiveui/react",
-  "version": "1.22.0",
+  "version": "2.0.0",
   "description": "WFP UI Kit",
   "license": "Apache-2",
   "main": "lib/index.js",
@@ -45,126 +45,116 @@
     "react-docgen.json"
   ],
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   },
   "dependencies": {
-    "@babel/preset-typescript": "^7.18.6",
+    "@babel/preset-typescript": "^7.27.0",
     "@carbon/feature-flags": "^0.6.0",
-    "classnames": "2.2.6",
+    "classnames": "2.5.1",
     "invariant": "^2.2.4",
     "react-datepicker": "^4.6.0",
     "react-frame-component": "^5.2.6",
-    "react-popper-tooltip": "^4.1.0",
-    "react-transition-state": "^2.1.0",
+    "react-popper-tooltip": "^4.4.2",
+    "react-transition-state": "^2.3.1",
     "warning": "^4.0.3",
-    "whatwg-fetch": "^3.6.19",
+    "whatwg-fetch": "^3.6.20",
     "window-or-global": "^1.0.1",
-    "ws": "^8.12.0"
+    "ws": "^8.18.1"
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
-    "@babel/traverse": "^7.23.2",
-    "@fontsource-variable/open-sans": "^5.0.13",
+    "@babel/traverse": "^7.27.0",
+    "@fontsource-variable/open-sans": "^5.2.5",
     "@progressiveui/icons-react": "^10.38.0",
-    "@progressiveui/pictograms-react": "^11.18.0",
-    "@progressiveui/styles": "^10.30.0",
+    "@progressiveui/styles": "^11.0.0",
     "@progressiveui/themes-core": "^0.4.0",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-replace": "^5.0.2",
-    "@rollup/plugin-terser": "^0.4.3",
-    "@rollup/plugin-typescript": "^11.1.5",
-    "@storybook/addon-docs": "^8.0.0-beta.4",
-    "@storybook/addon-essentials": "^8.0.0-beta.4",
-    "@storybook/addon-links": "^8.0.0-beta.4",
-    "@storybook/addon-mdx-gfm": "^8.0.0-beta.4",
-    "@storybook/addon-styling": "^1.3.7",
-    "@storybook/blocks": "^8.0.0-beta.4",
-    "@storybook/react": "^8.0.0-beta.4",
-    "@storybook/react-vite": "^8.0.0-beta.4",
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-replace": "^6.0.2",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@storybook/addon-docs": "^8.6.12",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
     "@storybook/testing-library": "^0.2.2",
-    "@testing-library/jest-dom": "^6.1.5",
-    "@testing-library/react": "^14.1.2",
-    "@types/jest": "^29.5.11",
-    "@types/mdx": "^2.0.3",
-    "@types/mocha": "^10.0.6",
-    "@types/node": "^20.10.4",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.56.0",
-    "@typescript-eslint/parser": "^5.56.0",
-    "all-contributors-cli": "^6.17.0",
-    "autoprefixer": "^9.8.6",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/jest": "^29.5.14",
+    "@types/mdx": "^2.0.13",
+    "@types/mocha": "^10.0.10",
+    "@types/node": "^20.14.0",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.2",
+    "@typescript-eslint/eslint-plugin": "^8.29.1",
+    "@typescript-eslint/parser": "^8.29.1",
+    "autoprefixer": "^10.4.21",
     "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.2.2",
-    "babel-plugin-dev-expression": "^0.2.2",
+    "babel-loader": "^10.0.0",
+    "babel-plugin-dev-expression": "^0.2.3",
     "babel-plugin-named-exports-order": "^0.0.2",
-    "browserslist-config-carbon": "^10.6.1",
-    "clean-webpack-plugin": "^3.0.0",
-    "css-loader": "^5.2.4",
+    "browserslist-config-carbon": "^11.2.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "css-loader": "^7.1.2",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
-    "enzyme-to-json": "^3.5.0",
-    "eslint-plugin-storybook": "^0.6.15",
-    "gzip-size": "^5.1.1",
-    "handlebars": "^4.7.7",
-    "iframe-resizer": "^4.3.6",
+    "enzyme-adapter-react-16": "^1.15.8",
+    "eslint-plugin-storybook": "^0.12.0",
+    "handlebars": "^4.7.8",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "lodash.isequal": "^4.5.0",
-    "moment": "^2.27.0",
     "object-assign": "^4.1.1",
-    "postcss": "^8.2.14",
-    "postcss-cli": "^8.3.1",
-    "postcss-custom-properties": "^11.0.0",
-    "postcss-loader": "4",
-    "prettier": "^2.8.7",
+    "postcss": "^8.5.3",
+    "postcss-cli": "^11.0.1",
+    "postcss-custom-properties": "^14.0.4",
+    "postcss-loader": "8.1.1",
+    "prettier": "^3.5.3",
     "pretty": "^2.0.0",
-    "prismjs": "^1.20.0",
-    "promise": "^8.1.0",
+    "prismjs": "^1.30.0",
+    "promise": "^8.3.0",
     "prop-types": "^15.8.1",
-    "raw-loader": "^4.0.1",
-    "react": "18.2.0",
+    "raw-loader": "^4.0.2",
+    "react": "19.1.0",
     "react-dates": "^21.8.0",
-    "react-docgen": "^7.0.0",
+    "react-docgen": "^7.1.1",
     "react-docgen-typescript": "^2.2.2",
-    "react-dom": "18.2.0",
-    "react-dropzone": "^11.0.2",
-    "react-final-form": "^6.5.1",
+    "react-dom": "19.1.0",
+    "react-dropzone": "^14.3.8",
+    "react-final-form": "^6.5.9",
     "react-hook-form": "^7.20.5",
     "react-markdown": "^9.0.0",
     "react-popper": "^2.2.3",
     "react-prism": "^4.3.2",
     "react-redux": "^7.2.1",
-    "react-select": "^3.1.0",
-    "react-table": "7.5.0",
-    "recharts": "^2.7.3",
+    "react-select": "^5.10.1",
+    "react-table": "7.8.0",
+    "recharts": "^2.15.2",
     "redux-form": "^8.3.10",
     "requestanimationframe": "^0.0.23",
-    "rimraf": "^3.0.2",
+    "rimraf": "^6.0.1",
     "rollup": "4.1.4",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-preserve-directives": "^0.2.0",
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-strip-banner": "^3.0.0",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-visualizer": "^5.12.0",
-    "sass": "^1.66.1",
-    "sass-loader": "13.3.2",
-    "storybook": "^8.0.0-beta.4",
-    "style-loader": "^2.0.0",
-    "ts-jest": "^29.1.1",
-    "twig": "^1.15.4",
-    "typescript": "^4.8.3",
-    "vite": "^4.4.9"
+    "rollup-plugin-visualizer": "^5.14.0",
+    "sass": "^1.86.3",
+    "sass-loader": "16.0.5",
+    "storybook": "^8.6.12",
+    "style-loader": "^4.0.0",
+    "ts-jest": "^29.3.1",
+    "twig": "^1.17.1",
+    "typescript": "^5.8.3",
+    "vite": "^6.2.5"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/wfp/ui.git"
   },
   "bundleSizeThreshold": 80000,
-  "gitHead": "a5bec728bba7e239d3d00104c0e24d1b13dd554b"
+  "gitHead": "d5135d857e06dd46b8cfad1d77b35a61aed8ce50"
 }

package/src/components/Accordion/hooks/useAccordion.ts

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-
-import { HTMLAttributes, KeyboardEvent } from 'react';
-import { ACCORDION_ATTR, ACCORDION_BTN_ATTR } from '../utils/constants';
+import { HTMLAttributes, KeyboardEvent } from "react";
+import { ACCORDION_ATTR, ACCORDION_BTN_ATTR } from "../utils/constants";
 
 const getAccordion = (node: Element) => {
   do {
@@ -23,7 +22,7 @@ const moveFocus = (moveUp: boolean, e: KeyboardEvent<Element>) => {
     return;
 
   const nodes = e.currentTarget.querySelectorAll<HTMLElement>(
-    `[${ACCORDION_BTN_ATTR}]`
+    `[${ACCORDION_BTN_ATTR}]`,
   );
   const { length } = nodes;
   for (let i = 0; i < length; i++) {
@@ -40,13 +39,18 @@ const moveFocus = (moveUp: boolean, e: KeyboardEvent<Element>) => {
   }
 };
 
+// Extend HTMLAttributes to allow our custom data attribute
+interface AccordionHTMLAttributes<T> extends HTMLAttributes<T> {
+  "data-accordion"?: string;
+}
+
 const useAccordion = () => {
-  const accordionProps: HTMLAttributes<Element> = {
-    [ACCORDION_ATTR]: '',
-    onKeyDown: (e) =>
-      e.key === 'ArrowUp'
+  const accordionProps: AccordionHTMLAttributes<Element> = {
+    "data-accordion": "",
+    onKeyDown: (e: KeyboardEvent<Element>) =>
+      e.key === "ArrowUp"
         ? moveFocus(true, e)
-        : e.key === 'ArrowDown' && moveFocus(false, e),
+        : e.key === "ArrowDown" && moveFocus(false, e),
   };
   return {
     accordionProps,

package/src/components/BannerNavigation/BannerNavigation.stories.tsx

@@ -1,8 +1,6 @@
 import React from "react";
-import { action } from "@storybook/addon-actions";
 import { BannerNavigation, BannerNavigationItem } from "./BannerNavigation";
 import { BannerNavigationWithContent } from "./BannerNavigationWithContent";
-import Search from "../Search";
 import Link from "../Link";
 
 export default {

package/src/components/Button/Button.stories.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { buttonKinds } from "../../prop-types/types";
 import { AddCircle } from "@progressiveui/icons-react";
-import markdown from "./README.mdx";
 import Button from "./Button";
 
 const meta: Meta<typeof Button> = {
@@ -12,28 +11,13 @@ const meta: Meta<typeof Button> = {
   parameters: {
     componentSubtitle: "Component",
     status: "released",
-    mdx: markdown,
     // twig: buttonTwig,
   },
 };
 
-// export default {
-//   title: "Components/UI Elements/Button",
-//   component: Button,
-//   markdown: "hello",
-//   parameters: {
-//     componentSubtitle: "Component",
-//     status: "released",
-//     mdx: markdown,
-//     // twig: buttonTwig,
-//   },
-// };
-
 export default meta;
 type Story = StoryObj<typeof Button>;
 
-//export const ButtonDefault = (args) => <Button {...args}>Default</Button>;
-
 export const ButtonDefault: Story = {
   render: (args) => <Button {...args} />,
   args: {

package/src/components/Button/Button.tsx

@@ -18,7 +18,6 @@ interface ButtonBaseProps {
    * Specify whether the Button should be a large variant
    */
   large?: boolean;
-
   /**
    * Specify btnSolid to buttons on solid background to make it stand out
    */
@@ -31,7 +30,6 @@ interface ButtonBaseProps {
    * Optionally specify an href for your Button to become an element
    */
   href?: string;
-  //target?: string; // TODO: Remove  " "
   /**
    * Specify an `icon` to include in the Button through an object representing the SVG data of the icon, similar to the `Icon` component @design
    */
@@ -40,7 +38,9 @@ interface ButtonBaseProps {
    * Optionally specify an href for your Button to become an element @design
    */
   iconReverse?: boolean;
-  // todo: revise iconDescription
+  /**
+   * Icon description for accessibility
+   */
   iconDescription?: string;
   /**
    * Specify whether the Button should be disabled, or not
@@ -51,7 +51,6 @@ interface ButtonBaseProps {
    */
   tabIndex?: number;
   target?: React.AnchorHTMLAttributes<HTMLAnchorElement>["target"];
-  // type?: 'button' | 'reset' | 'submit';
   useFlexbox?: boolean;
   id?: string;
 }
@@ -69,8 +68,8 @@ type ConditionalProps<T> = T extends { href: string }
   : ButtonButtonProps;
 
 /**
- * Buttons express what action will occur when the user clicks or touches it. Buttons are used to initialize an action, either in the background or foreground of an experience. */
-
+ * Buttons express what action will occur when the user clicks or touches it. Buttons are used to initialize an action, either in the background or foreground of an experience.
+ */
 export type ButtonRef<T extends React.ElementType> =
   React.ComponentPropsWithRef<T>["ref"];
 
@@ -78,8 +77,8 @@ export const Button = React.forwardRef(
   <T extends { href?: string }>(
     props: ConditionalProps<T>,
     ref: React.Ref<
-      T extends { href: string } ? HTMLLinkElement : HTMLButtonElement
-    >
+      T extends { href: string } ? HTMLAnchorElement : HTMLButtonElement
+    >,
   ) => {
     const {
       children,
@@ -92,6 +91,7 @@ export const Button = React.forwardRef(
       iconReverse,
       tabIndex,
       useFlexbox,
+      // Set the default to "button"
       type = "button",
       icon,
       iconDescription,
@@ -144,7 +144,9 @@ export const Button = React.forwardRef(
       setCount(false);
     };
 
-    const onClickAnimation = (e) => {
+    const onClickAnimation = (
+      e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
+    ) => {
       if (onClick) {
         onClick(e);
       }
@@ -183,7 +185,8 @@ export const Button = React.forwardRef(
         {...buttonProps}
         {...commonProps}
         disabled={disabled}
-        type={type}
+        // Cast the type prop to the allowed union
+        type={type as "button" | "reset" | "submit"}
         onClick={onClickAnimation}
         ref={ref as React.Ref<HTMLButtonElement>}
         id={id}
@@ -193,7 +196,7 @@ export const Button = React.forwardRef(
         {!iconReverse && buttonImage}
       </button>
     );
-  }
+  },
 );
 
 Button.displayName = "Button";

package/src/components/ContextMenu/ContextMenu.stories.tsx

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

package/src/components/Empty/Empty.stories.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import markdown from "./README.mdx";
 import Empty from "./Empty";
 import Button from "../Button";
-//import { IllustrationsMovingVanWithBackground } from '@progressiveui/pictograms-react';
 
 export default {
   title: "Components/UI Elements/Empty",
@@ -32,7 +31,7 @@ EmptyDefault.args = {
 
 const emptysourcecode = `
 import { Empty, Button  } from "@progressiveui/react";
-import { IllustrationsMovingVanWithBackground } from '@progressiveui/pictograms-react';
+
 
 <Empty
   button={<Button kind="accent">New entry</Button>}

package/src/components/Footer/Footer.tsx

@@ -3,10 +3,6 @@ import classNames from "classnames";
 import Link from "../Link";
 import Wrapper from "../Wrapper";
 import { ScreenSize } from "../../utils";
-import {
-  WfpLogoStandardBlackEn,
-  WfpLogoVerticalEn,
-} from "@progressiveui/icons-react";
 import useSettings from "../../hooks/useSettings";
 
 /** A Footer is a section at the bottom of each page. It typically contains basic site information, copyright data or links to related pages. */
@@ -28,18 +24,11 @@ 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
  */
@@ -63,7 +52,6 @@ const Footer: React.FC<FooterProps> = ({
   linkTextTwo,
   linkHrefTwo,
   logo,
-  logoExtended,
   metaContent,
   metaLinks,
   secondary,
@@ -101,35 +89,7 @@ const Footer: React.FC<FooterProps> = ({
             </div>
           )}
           <div className={`${prefix}--footer__cta`}>
-            {logoExtended && typeof logoExtended === "string" ? (
-              <img
-                className={`${prefix}--footer__cta-logo`}
-                src={logoExtended}
-                alt="World Food Programme Logo"
-              />
-            ) : logoExtended ? (
-              logoExtended
-            ) : (
-              <WfpLogoStandardBlackEn
-                className={`${prefix}--footer__cta-logo`}
-                alt="WFP"
-              />
-            )}
-
-            {logo && typeof logo === "string" ? (
-              <img
-                className={`${prefix}--footer__cta-logo-small`}
-                src={logo}
-                alt="WFP Logo"
-              />
-            ) : logo ? (
-              logo
-            ) : (
-              <WfpLogoVerticalEn
-                description="WFP"
-                className={`${prefix}--footer__cta-logo-small`}
-              />
-            )}
+            {logo}
             {secondary && (
               <div className={`${prefix}--footer__secondary`}>{secondary}</div>
             )}

package/src/components/Footer/FooterExternal.tsx

@@ -2,7 +2,6 @@ import * as React from "react";
 import Wrapper from "../Wrapper";
 import type { PropsWithChildren } from "react";
 import classNames from "classnames";
-import { WfpLogoVerticalEn } from "@progressiveui/icons-react";
 import {
   LinkedIn,
   Facebook,
@@ -40,10 +39,6 @@ const FooterExternal: React.FC<FooterExternalProps> = ({
         <div className={`${prefix}--footer-ext__content`}>
           <div className={`${prefix}--footer-ext__info`}>
             <div className={`${prefix}--footer-ext__branding`}>
-              <WfpLogoVerticalEn
-                alt="WFP"
-                className={`${prefix}--footer-ext__logo`}
-              />
               <div className={`${prefix}--footer-ext__product-name`}>
                 {productName}
               </div>

package/src/components/Footer/index.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/src/components/Hero/Hero.stories.tsx

@@ -4,7 +4,6 @@ import markdown from "./README.mdx";
 
 import { Hero, HeroExternal } from ".";
 import Button from "../Button";
-import { WfpHumEmergencyResponsePos } from "@progressiveui/pictograms-react";
 //import heroTwig from './Hero.twig';
 
 export default {
@@ -240,7 +239,6 @@ Emergencies.args = {
   ...Regular.args,
   title: (
     <>
-      <WfpHumEmergencyResponsePos fill="#FFF" style={{ marginRight: "1rem" }} />
       <span>
         Curabitur ullamcorper ultricies nisi. Proin magna.{" "}
         <a>Etiam iaculis nunc ac metus</a>

package/src/components/Input/Input.tsx

@@ -238,6 +238,7 @@ const Input: React.FC<PropsWithChildren<InputPropsI>> = ({
   // iconDescription,
   id,
   className,
+
   inputWrapperClassName,
   //placeholder,
   //type,

package/src/components/Input/useInput.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
-import React from 'react';
-import classNames from 'classnames';
-import useSettings from '../../hooks/useSettings';
+import React from "react";
+import classNames from "classnames";
+import useSettings from "../../hooks/useSettings";
 
 export interface UseInputProps {
   /**
@@ -108,10 +108,10 @@ export interface UseInputProps {
 export const useInput = ({
   addonAfter,
   className,
-  inputClassName = 'wfp--input',
+  inputClassName = "wfp--input",
   id,
   placeholder,
-  type = 'text',
+  type = "text",
   onChange = () => {},
   onClick = () => {},
   hideLabel,
@@ -155,6 +155,9 @@ export const useInput = ({
   };
 
   const wrapperProps = {
+    calculatedId,
+    id,
+    name,
     className,
     addonAfter,
     labelText,
@@ -164,7 +167,7 @@ export const useInput = ({
     invalidText,
   };
 
-  const errorId = calculatedId + '-error-msg';
+  const errorId = calculatedId + "-error-msg";
 
   /*const labelClasses = classNames(`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel || !labelText,
@@ -179,9 +182,9 @@ export const useInput = ({
   );*/
 
   if (invalid) {
-    inputProps['data-invalid'] = true;
-    inputProps['aria-invalid'] = true;
-    inputProps['aria-describedby'] = errorId;
+    inputProps["data-invalid"] = true;
+    inputProps["aria-invalid"] = true;
+    inputProps["aria-describedby"] = errorId;
   }
   return { inputProps, wrapperProps };
 };

package/src/components/MainNavigation/MainNavigation.stories.tsx

@@ -1,7 +1,6 @@
 import React from "react";
-//import markdown from './README.mdx';
 import { action } from "@storybook/addon-actions";
-import { MainNavigation, MainNavigationExternal } from ".";
+import { MainNavigation } from ".";
 import MainNavigationItem from "../MainNavigationItem";
 
 import {
@@ -23,7 +22,6 @@ import User from "../User";
 export default {
   title: "Components/Navigation/MainNavigation",
   component: MainNavigation,
-  subcomponents: { MainNavigationExternal },
   parameters: {
     componentSubtitle: "Component",
     status: "released",
@@ -183,7 +181,6 @@ You can customize the content by using \`MainNavigation\`.
 const sourcecode = (type) => {
   return `import { Button,User, Search } from "@progressiveui/react";
   import {
-    MainNavigationExternal,
     MainNavigationItem,
     SubNavigation,
     SubNavigationHeader,