@carbon/react - npm Package Compare versions

Comparing version 1.39.0 to 1.40.0

es/components/DataTable/TableSelectAll.js

@@ -27,2 +27,3 @@ /**
   return /*#__PURE__*/React__default.createElement("th", {
+    "aria-live": "off",
     scope: "col",
@@ -29,0 +30,0 @@ className: cx(`${prefix}--table-column-checkbox`, className)

es/components/DataTable/TableSelectRow.js

@@ -45,3 +45,4 @@ /**
   return /*#__PURE__*/React__default.createElement("td", {
-    className: tableSelectRowClasses
+    className: tableSelectRowClasses,
+    "aria-live": "off"
   }, /*#__PURE__*/React__default.createElement(InlineInputComponent, _extends({}, selectionInputProps, radio && {
@@ -48,0 +49,0 @@ labelText: ariaLabel,

es/components/FileUploader/Filename.js

@@ -31,3 +31,4 @@ /**
         small: true,
-        withOverlay: false
+        withOverlay: false,
+        className: `${prefix}--file-loading`
       });
@@ -34,0 +35,0 @@ case 'edit':

es/components/FileUploader/FileUploaderItem.d.ts

@@ -32,2 +32,6 @@ /**
     /**
+     * Event handler that is called after files are added to the uploader
+     */
+    onAddFiles?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
      * Event handler that is called after removing a file from the file uploader
@@ -34,0 +38,0 @@ * The event handler signature looks like `onDelete(evt, { uuid })`

es/components/FileUploader/FileUploaderItem.js

@@ -11,6 +11,8 @@ /**
 import PropTypes from 'prop-types';
-import React__default, { useRef } from 'react';
+import React__default, { useState, useRef, useLayoutEffect } from 'react';
 import Filename from './Filename.js';
 import uniqueId from '../../tools/uniqueId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import '../Tooltip/DefinitionTooltip.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
 import { matches } from '../../internal/keyboard/match.js';
@@ -32,2 +34,3 @@ import { Enter, Space } from '../../internal/keyboard/keys.js';
   } = _ref;
+  const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
   const prefix = usePrefix();
@@ -42,9 +45,33 @@ const {
   });
+  const isInvalid = invalid ? `${prefix}--file-filename-container-wrap-invalid` : `${prefix}--file-filename-container-wrap`;
+  const isEllipsisActive = element => {
+    setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
+    return element.offsetWidth < element.scrollWidth;
+  };
+  useLayoutEffect(() => {
+    const element = document.querySelector(`[title="${name}"]`);
+    isEllipsisActive(element);
+  }, [prefix, name]);
   return /*#__PURE__*/React__default.createElement("span", _extends({
     className: classes
-  }, other), /*#__PURE__*/React__default.createElement("p", {
-    className: `${prefix}--file-filename`,
+  }, other), isEllipsisApplied ? /*#__PURE__*/React__default.createElement("div", {
+    className: isInvalid
+  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+    label: name,
+    align: "bottom",
+    className: `${prefix}--file-filename-tooltip`
+  }, /*#__PURE__*/React__default.createElement("button", {
+    className: `${prefix}--file-filename-button`,
+    type: "button"
+  }, /*#__PURE__*/React__default.createElement("p", {
     title: name,
+    className: `${prefix}--file-filename-button`,
     id: name
-  }, name), /*#__PURE__*/React__default.createElement("span", {
+  }, name)))) : /*#__PURE__*/React__default.createElement("p", {
+    title: name,
+    className: `${prefix}--file-filename`,
+    id: name
+  }, name), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--file-container-item`
+  }, /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--file__state-container`
@@ -74,3 +101,3 @@ }, /*#__PURE__*/React__default.createElement(Filename, {
     }
-  })), invalid && errorSubject && /*#__PURE__*/React__default.createElement("div", {
+  }))), invalid && errorSubject && /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--form-requirement`,
@@ -77,0 +104,0 @@ role: "alert",

es/components/Search/Search.js

@@ -128,3 +128,3 @@ /**
     onKeyDown: handleExpandButtonKeyDown,
-    tabIndex: onExpand && !isExpanded ? 1 : -1,
+    tabIndex: onExpand && !isExpanded ? 0 : -1,
     ref: expandButtonRef,
@@ -131,0 +131,0 @@ "aria-expanded": onExpand && isExpanded ? true : undefined,

es/components/UIShell/SideNavLinkText.js

@@ -10,5 +10,5 @@ /**
 import cx from 'classnames';
-import PropTypes from 'prop-types';
 import React__default from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
+import PropTypes from 'prop-types';
 
@@ -15,0 +15,0 @@ function SideNavLinkText(_ref) {

es/components/UIShell/SideNavMenu.js

@@ -19,4 +19,4 @@ /**
 var _ChevronDown;
-const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(props, ref) {
-  const {
+const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(_ref, ref) {
+  let {
     className: customClassName,
@@ -31,3 +31,3 @@ children,
     title
-  } = props;
+  } = _ref;
   const isRail = useContext(SideNavContext);
@@ -116,2 +116,3 @@ const prefix = usePrefix();
    */
+  // @ts-expect-error - PropTypes are unable to cover this case.
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
@@ -127,20 +128,30 @@ /**
 };
+
+/**
+Defining the children parameter with the type ReactNode | ReactNode[]. This allows for various possibilities:
+a single element, an array of elements, or null or undefined.
+**/
 function hasActiveChild(children) {
-  // if we have children, either a single or multiple, find if it is active
   if (Array.isArray(children)) {
     return children.some(child => {
-      if (!child.props) {
+      if (! /*#__PURE__*/React__default.isValidElement(child)) {
         return false;
       }
-      if (child.props.isActive === true) {
+
+      /** Explicitly defining the expected prop types (isActive and 'aria-current) for the children to ensure type
+      safety when accessing their props.
+      **/
+      const props = child.props;
+      if (props.isActive === true || props['aria-current']) {
         return true;
       }
-      if (child.props['aria-current']) {
-        return true;
-      }
       return false;
     });
   }
-  if (children.props) {
-    if (children.props.isActive === true || children.props['aria-current']) {
+
+  // We use React.isValidElement(child) to check if the child is a valid React element before accessing its props
+
+  if ( /*#__PURE__*/React__default.isValidElement(children)) {
+    const props = children.props;
+    if (props.isActive === true || props['aria-current']) {
       return true;
@@ -151,4 +162,3 @@ }
 }
-var SideNavMenu$1 = SideNavMenu;
 
-export { SideNavMenu, SideNavMenu$1 as default };
+export { SideNavMenu, SideNavMenu as default };

lib/components/DataTable/TableSelectAll.js

@@ -37,2 +37,3 @@ /**
   return /*#__PURE__*/React__default["default"].createElement("th", {
+    "aria-live": "off",
     scope: "col",
@@ -39,0 +40,0 @@ className: cx__default["default"](`${prefix}--table-column-checkbox`, className)

lib/components/DataTable/TableSelectRow.js

@@ -55,3 +55,4 @@ /**
   return /*#__PURE__*/React__default["default"].createElement("td", {
-    className: tableSelectRowClasses
+    className: tableSelectRowClasses,
+    "aria-live": "off"
   }, /*#__PURE__*/React__default["default"].createElement(InlineInputComponent, _rollupPluginBabelHelpers["extends"]({}, selectionInputProps, radio && {
@@ -58,0 +59,0 @@ labelText: ariaLabel,

lib/components/FileUploader/Filename.js

@@ -40,3 +40,4 @@ /**
         small: true,
-        withOverlay: false
+        withOverlay: false,
+        className: `${prefix}--file-loading`
       });
@@ -43,0 +44,0 @@ case 'edit':

lib/components/FileUploader/FileUploaderItem.d.ts

@@ -32,2 +32,6 @@ /**
     /**
+     * Event handler that is called after files are added to the uploader
+     */
+    onAddFiles?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
      * Event handler that is called after removing a file from the file uploader
@@ -34,0 +38,0 @@ * The event handler signature looks like `onDelete(evt, { uuid })`

lib/components/FileUploader/FileUploaderItem.js

@@ -19,2 +19,4 @@ /**
 var usePrefix = require('../../internal/usePrefix.js');
+require('../Tooltip/DefinitionTooltip.js');
+var Tooltip = require('../Tooltip/Tooltip.js');
 var match = require('../../internal/keyboard/match.js');
@@ -42,2 +44,3 @@ var keys = require('../../internal/keyboard/keys.js');
   } = _ref;
+  const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
   const prefix = usePrefix.usePrefix();
@@ -52,9 +55,33 @@ const {
   });
+  const isInvalid = invalid ? `${prefix}--file-filename-container-wrap-invalid` : `${prefix}--file-filename-container-wrap`;
+  const isEllipsisActive = element => {
+    setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
+    return element.offsetWidth < element.scrollWidth;
+  };
+  React.useLayoutEffect(() => {
+    const element = document.querySelector(`[title="${name}"]`);
+    isEllipsisActive(element);
+  }, [prefix, name]);
   return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({
     className: classes
-  }, other), /*#__PURE__*/React__default["default"].createElement("p", {
-    className: `${prefix}--file-filename`,
+  }, other), isEllipsisApplied ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: isInvalid
+  }, /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
+    label: name,
+    align: "bottom",
+    className: `${prefix}--file-filename-tooltip`
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
+    className: `${prefix}--file-filename-button`,
+    type: "button"
+  }, /*#__PURE__*/React__default["default"].createElement("p", {
     title: name,
+    className: `${prefix}--file-filename-button`,
     id: name
-  }, name), /*#__PURE__*/React__default["default"].createElement("span", {
+  }, name)))) : /*#__PURE__*/React__default["default"].createElement("p", {
+    title: name,
+    className: `${prefix}--file-filename`,
+    id: name
+  }, name), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--file-container-item`
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--file__state-container`
@@ -84,3 +111,3 @@ }, /*#__PURE__*/React__default["default"].createElement(Filename["default"], {
     }
-  })), invalid && errorSubject && /*#__PURE__*/React__default["default"].createElement("div", {
+  }))), invalid && errorSubject && /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--form-requirement`,
@@ -87,0 +114,0 @@ role: "alert",

lib/components/Search/Search.js

@@ -138,3 +138,3 @@ /**
     onKeyDown: handleExpandButtonKeyDown,
-    tabIndex: onExpand && !isExpanded ? 1 : -1,
+    tabIndex: onExpand && !isExpanded ? 0 : -1,
     ref: expandButtonRef,
@@ -141,0 +141,0 @@ "aria-expanded": onExpand && isExpanded ? true : undefined,

lib/components/UIShell/SideNavLinkText.js

@@ -14,5 +14,5 @@ /**
 var cx = require('classnames');
-var PropTypes = require('prop-types');
 var React = require('react');
 var usePrefix = require('../../internal/usePrefix.js');
+var PropTypes = require('prop-types');
 
@@ -22,4 +22,4 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
@@ -26,0 +26,0 @@ function SideNavLinkText(_ref) {

lib/components/UIShell/SideNavMenu.js

@@ -29,4 +29,4 @@ /**
 var _ChevronDown;
-const SideNavMenu = /*#__PURE__*/React__default["default"].forwardRef(function SideNavMenu(props, ref) {
-  const {
+const SideNavMenu = /*#__PURE__*/React__default["default"].forwardRef(function SideNavMenu(_ref, ref) {
+  let {
     className: customClassName,
@@ -41,3 +41,3 @@ children,
     title
-  } = props;
+  } = _ref;
   const isRail = React.useContext(SideNav.SideNavContext);
@@ -126,2 +126,3 @@ const prefix = usePrefix.usePrefix();
    */
+  // @ts-expect-error - PropTypes are unable to cover this case.
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
@@ -137,20 +138,30 @@ /**
 };
+
+/**
+Defining the children parameter with the type ReactNode | ReactNode[]. This allows for various possibilities:
+a single element, an array of elements, or null or undefined.
+**/
 function hasActiveChild(children) {
-  // if we have children, either a single or multiple, find if it is active
   if (Array.isArray(children)) {
     return children.some(child => {
-      if (!child.props) {
+      if (! /*#__PURE__*/React__default["default"].isValidElement(child)) {
         return false;
       }
-      if (child.props.isActive === true) {
+
+      /** Explicitly defining the expected prop types (isActive and 'aria-current) for the children to ensure type
+      safety when accessing their props.
+      **/
+      const props = child.props;
+      if (props.isActive === true || props['aria-current']) {
         return true;
       }
-      if (child.props['aria-current']) {
-        return true;
-      }
       return false;
     });
   }
-  if (children.props) {
-    if (children.props.isActive === true || children.props['aria-current']) {
+
+  // We use React.isValidElement(child) to check if the child is a valid React element before accessing its props
+
+  if ( /*#__PURE__*/React__default["default"].isValidElement(children)) {
+    const props = children.props;
+    if (props.isActive === true || props['aria-current']) {
       return true;
@@ -161,5 +172,4 @@ }
 }
-var SideNavMenu$1 = SideNavMenu;
 
 exports.SideNavMenu = SideNavMenu;
-exports["default"] = SideNavMenu$1;
+exports["default"] = SideNavMenu;

package.json

 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.39.0",
+  "version": "1.40.0",
   "license": "Apache-2.0",
@@ -52,7 +52,7 @@ "main": "lib/index.js",
     "@carbon/layout": "^11.19.0",
-    "@carbon/styles": "^1.39.0",
+    "@carbon/styles": "^1.40.0",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
-    "downshift": "8.2.0",
+    "downshift": "8.2.1",
     "flatpickr": "4.6.9",
@@ -91,2 +91,3 @@ "invariant": "^2.2.3",
     "@storybook/addon-knobs": "^7.0.2",
+    "@storybook/addon-links": "^7.4.5",
     "@storybook/addon-notes": "^5.3.21",
@@ -143,3 +144,3 @@ "@storybook/addon-storysource": "^7.1.0",
   ],
-  "gitHead": "7c151d929564f2cf414f3a0fef4a5fc888242fae"
+  "gitHead": "99314f69da3f5791c3c0f46564a47ef9ee7c9e0f"
 }

New alerts

Telemetry

Supply chain risk

This package contains telemetry which tracks how it is used.

Found 1 instance in 1 package

Fixed alerts

Telemetry

Supply chain risk

This package contains telemetry which tracks how it is used.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3523929

increased by1.33%

Number of package files

1236

increased by0.32%

Lines of code

97494

increased by1.4%

Worsened metrics

Dev dependency count

59

increased by1.72%

Dependency changes

• + Addeddownshift@8.2.1(transitive)

• - Removeddownshift@8.2.0(transitive)

• Updated@carbon/styles@^1.40.0

• Updateddownshift@8.2.1