Merge branch 'master' into STCOM-1399

CHANGELOG.md

@@ -22,8 +22,11 @@
 * *BREAKING* Update `@csstools` postcss plugins to current versions in sync with `@folio/stripes-cli`. Refs STCOM-1404.
 * Paneset - deduplicate panes via `id` prior to registration. Refs STCOM-1386.
 * Calendar - improved color contrast of edge month days, as per WCAG standards. Changed hover bg color of edge/month days. Increased weight of day numbers overall. Refs STCOM-1390.
+* *BREAKING* Update `react-intl` to `^7`. Refs STCOM-1406.
+* *BREAKING* remove deprecated props. Refs STCOM-1398.
+* Add marginTop0 prop to the MessageBanner component. Refs STCOM-1408.
 * Popper - hide overlay if popper anchor is scrolled out of the view. Refs STCOM-1386.
-  
+
 ## [12.2.0](https://github.com/folio-org/stripes-components/tree/v12.2.0) (2024-10-11)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.1.0...v12.2.0)
 

lib/AutoSuggest/AutoSuggest.js

@@ -1,6 +1,5 @@
 import React, { useRef, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-import { deprecated } from 'prop-types-extra';
 import { useCombobox } from 'downshift';
 import classNames from 'classnames';
 import noop from 'lodash/noop';
@@ -176,9 +175,7 @@ AutoSuggest.propTypes = {
   onFocus: PropTypes.func,
   onSelect: PropTypes.func,
   placeholder: PropTypes.node,
-  popper: PropTypes.shape({
-    portal: deprecated(PropTypes.element, 'use the boolean prop "usePortal" instead'),
-  }),
+  popper: PropTypes.shape({}),
   renderOption: PropTypes.func,
   renderValue: PropTypes.func,
   required: PropTypes.bool,

lib/MessageBanner/MessageBanner.js

@@ -5,7 +5,6 @@
 import React, { forwardRef, useState, useEffect } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import { deprecated } from 'prop-types-extra';
 import { FormattedMessage } from 'react-intl';
 import get from 'lodash/get';
 import { CSSTransition } from 'react-transition-group';
@@ -34,7 +33,6 @@ const MessageBanner = forwardRef(
       children,
       className,
       contentClassName,
-      dismissable,
       dismissible,
       dismissButtonAriaLabel,
       dismissButtonProps = {},
@@ -46,6 +44,7 @@ const MessageBanner = forwardRef(
       onExited,
       show = true,
       type = TYPES.DEFAULT,
+      marginTop0 = false,
       ...rest
     },
     ref
@@ -79,8 +78,13 @@ const MessageBanner = forwardRef(
       );
     };
 
+    const getMessageBannerClass = () => classnames(
+      css.root,
+      { [css.marginTop0]: marginTop0 },
+    );
+
     return (
-      <div role="alert" aria-live={ariaLive} className={css.root}>
+      <div role="alert" aria-live={ariaLive} className={getMessageBannerClass()}>
         <CSSTransition
           in={visible}
           timeout={200}
@@ -110,7 +114,7 @@ const MessageBanner = forwardRef(
           >
             {renderIcon()}
             <div className={classnames(css.content, contentClassName)}>{children}</div>
-            {(dismissable || dismissible) && (
+            {(dismissible) && (
               <div className={css.dismissButtonWrap}>
                 <FormattedMessage id="stripes-components.MessageBanner.dismissButtonAriaLabel">
                   { ([dismissAriaLabel]) => (
@@ -141,7 +145,6 @@ MessageBanner.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   contentClassName: PropTypes.string,
-  dismissable: deprecated(PropTypes.bool),
   dismissButtonAriaLabel: PropTypes.string,
   dismissButtonProps: PropTypes.object,
   dismissible: PropTypes.bool,
@@ -153,6 +156,7 @@ MessageBanner.propTypes = {
   onExited: PropTypes.func,
   show: PropTypes.bool,
   type: PropTypes.oneOf(Object.keys(TYPES).map(key => TYPES[key])),
+  marginTop0: PropTypes.bool,
 };
 
 MessageBanner.displayName = 'MessageBanner';

lib/MessageBanner/MessageBanner.module.css

@@ -28,6 +28,10 @@
 
 .root + .root {
   margin-top: var(--message-banner-stacked-margin-top);
+
+  &.marginTop0 {
+    margin-top: 0;
+  }
 }
 
 .inner {

lib/MessageBanner/readme.md

@@ -72,7 +72,6 @@ aria-live | string | Sets the `aria-live`-attribute for the root element. | off,
 autoFocusDismissButton | bool | Autofocuses the dismiss button when the `<MessageBanner>` enters the DOM. This requires that the `dismissible`-prop is set to true | | false
 type | string | Sets the style of the `<MessageBanner>` | default, error, success, warning | default
 children | node | Renders the contents of the `<MessageBanner>` | |
-dismissable | boolean | Typo of dismissible, **deprecated** | true/false | false
 dismissible | boolean | Adds a close icon and makes the `<MessageBanner>` dismissible | true/false | false
 dismissButtonAriaLabel | string | Adds an aria-label attribute for the dismiss `<IconButton>`. | | "Hide message"
 dismissButtonProps | object | Add custom props for the dismiss button. This can be useful for e.g. adding a custom class name for the internal `<IconButton>`. | | {}
@@ -85,6 +84,7 @@ className | string | Adds a custom class name for the `<MessageBanner>` | |
 contentClassName | string | Adds a custom class name for the content element inside the `<MessageBanner>` | |
 element | string, element, func | Changes the root element of the `<MessageBanner>` | | div |
 show | boolean | Control the visiblity externally. Using the show-prop will enable the `<MessageBanner>` to transition in and out. | true/false | |
+marginTop0 | boolean | Removes the default top margin | true/false | false
 
 
 The remaining props passed to `<MessageBanner>` will be spread onto the root element of the component. This component also accepts a `ref`.

lib/MessageBanner/stories/ShowHide.js

@@ -15,7 +15,7 @@ const BasicUsage = () => {
       <Button onClick={() => setShow(!show)}>Toggle</Button>
       <MessageBanner
         autoFocusDismissButton
-        dismissable
+        dismissible
         onEnter={() => console.log('Enter')}
         onEntered={() => console.log('Entered')}
         onExit={() => console.log('Exit')}

lib/MessageBanner/tests/MessageBanner-test.js

@@ -35,6 +35,7 @@ describe('MessageBanner', () => {
           dismissButtonProps={{
             className: 'my-dismiss-button-class'
           }}
+          marginTop0={true}
           dismissible
         >
           Test
@@ -64,6 +65,10 @@ describe('MessageBanner', () => {
     messageBanner.has({ className: including('my-class') });
   });
 
+  it('Should have the marginTop0 class if passed to the prop', () => {
+    messageBanner.has({ className: including('marginTop0') });
+  });
+
   it('Should have a root element of <span> if passed via. the element prop', () => {
     messageBanner.has({ tagName: 'SPAN' });
   });
@@ -129,7 +134,7 @@ describe('MessageBanner', () => {
     beforeEach(async () => {
       await mount(
         <Harness>
-          <MessageBanner dismissButtonAriaLabel="Close me" dismissable>
+          <MessageBanner dismissButtonAriaLabel="Close me" dismissible>
             Test
           </MessageBanner>
         </Harness>
@@ -147,7 +152,7 @@ describe('MessageBanner', () => {
         <Harness>
           <MessageBanner
             autoFocusDismissButton
-            dismissable
+            dismissible
           >
             Test
           </MessageBanner>

lib/MultiSelection/MultiSelectOptionsList.js

@@ -37,7 +37,7 @@ const MultiSelectOptionsList = ({
   renderedItems,
   renderFilterInput,
   renderOptions,
-  renderToOverlay,
+  renderToOverlay = false,
   usePortal,
   warning,
 }) => {

lib/MultiSelection/MultiSelection.js

@@ -1,6 +1,5 @@
 import React, { useRef, useEffect, useState, useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { deprecated } from 'prop-types-extra';
 import classnames from 'classnames';
 import {
   isEqual,
@@ -97,7 +96,6 @@ const MultiSelection = ({
   onFocus = noop,
   onRemove = noop,
   placeholder,
-  renderToOverlay = false,
   required = false,
   showLoading,
   usePortal,
@@ -657,7 +655,6 @@ const MultiSelection = ({
             isOpen={isOpen}
             getMenuProps={getMenuProps}
             maxHeight={maxHeight}
-            renderToOverlay={renderToOverlay}
             emptyMessage={emptyMessage}
             error={error}
             warning={warning}
@@ -713,7 +710,6 @@ const propTypes = {
   onFocus: PropTypes.func,
   onRemove: PropTypes.func,
   placeholder: PropTypes.string,
-  renderToOverlay: deprecated(PropTypes.bool, 'use usePortal prop instead'),
   required: PropTypes.bool,
   showLoading: PropTypes.bool,
   usePortal: PropTypes.bool,

lib/Selection/Selection.js

@@ -1,6 +1,5 @@
 import React, { useState, useMemo, useEffect, useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { deprecated } from 'prop-types-extra';
 import { useIntl } from 'react-intl';
 import { useCombobox } from 'downshift';
 import classNames from 'classnames';
@@ -511,9 +510,7 @@ Selection.propTypes = {
   onFocus: PropTypes.func,
   optionAlignment: PropTypes.string,
   placeholder: PropTypes.node,
-  popper: PropTypes.shape({
-    portal: deprecated(PropTypes.element, 'use the boolean usePortal prop of Selection instead')
-  }),
+  popper: PropTypes.shape({}),
   readOnly: PropTypes.bool,
   readonly: PropTypes.bool,
   required: PropTypes.bool,

lib/Timepicker/TimeDropdown.js

@@ -4,7 +4,6 @@
 
 import React, { useState, useRef, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { deprecated } from 'prop-types-extra';
 import moment from 'moment-timezone';
 import { FormattedMessage, useIntl } from 'react-intl';
 import Button from '../Button';
@@ -125,10 +124,7 @@ const propTypes = {
   intl: PropTypes.shape({
     formatMessage: PropTypes.func
   }),
-  locale: deprecated(PropTypes.string, 'not necessary/accessed via context'), // eslint-disable-line
-  mainControl: deprecated(PropTypes.object, 'no longer needed - handle focus management in onSetTime'), // eslint-disable-line
   minuteIncrement: PropTypes.number,
-  onBlur: deprecated(PropTypes.func, 'focus trapped automatically'), //eslint-disable-line
   onFocus: PropTypes.func,
   onHide: PropTypes.func,
   onSetTime: PropTypes.func,

package.json

@@ -13,17 +13,14 @@
   "scripts": {
     "docgen": "react-docgen ./lib/ --pretty -e index.js -o ./docs/reactdoc.json ",
     "eslint": "eslint ./",
-    "formatjs-compile": "formatjs compile-folder --ast --format simple ./translations/stripes-components ./translations/stripes-components/compiled",
+    "formatjs-compile": "stripes translate compile",
     "lint": "eslint ./ && stylelint \"lib/**/*.css\"",
     "storybook": "storybook dev -p 9001 -c .storybook",
     "storybook-build": "storybook build -c .storybook -o .out",
     "stylelint": "stylelint \"lib/**/*.css\"",
     "test": "stripes test karma",
     "test-dev": "stripes test karma --watch"
   },
-  "engines": {
-    "node": ">=10.0.0"
-  },
   "stripes": {
     "type": "components",
     "actionNames": [
@@ -56,7 +53,6 @@
     "@folio/eslint-config-stripes": "^8.0.0",
     "@folio/stripes-cli": "^4.0.0",
     "@folio/stripes-testing": "^5.0.0",
-    "@formatjs/cli": "^6.1.3",
     "@storybook/addon-actions": "^7.6.12",
     "@storybook/addon-essentials": "^7.6.12",
     "@storybook/addon-mdx-gfm": "7.6.12",
@@ -82,7 +78,7 @@
     "postcss-loader": "^7.0.2",
     "react": "^18.2",
     "react-dom": "^18.2",
-    "react-intl": "^6.4.4",
+    "react-intl": "^7.1.5",
     "react-redux": "^8.0.5",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",