@carbon-labs/react-ui-shell 0.80.0 → 0.82.0

package/es/components/HeaderPopover.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { useRef, useState, useContext } from 'react';
-import { Popover, ToggletipContent, ToggletipActions, IconButton } from '@carbon/react';
+import { Popover, IconButton, ToggletipContent, ToggletipActions } from '@carbon/react';
 import { Escape } from '../internal/keyboard/keys.js';
 import { match } from '../internal/keyboard/match.js';
 import { useWindowEvent } from '../internal/useEvent.js';

package/es/components/Link.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import React, { type ElementType, type Ref } from 'react';
+import { type ElementType, type WeakValidationMap, type Ref } from 'react';
 import { type PolymorphicProps } from '../types/common';
 type LinkBaseProps<E extends ElementType> = {
     /**
@@ -21,9 +21,9 @@ export type LinkProps<E extends ElementType> = PolymorphicProps<E, LinkBaseProps
  * in their own components to support use-cases like `react-router` or
  * `@reach/router`
  */
-declare const Link: (<E extends React.ElementType = "a">(props: LinkProps<E>) => JSX.Element) & {
-    displayName?: string | undefined;
-    propTypes?: React.WeakValidationMap<LinkProps<any>> | undefined;
+declare const Link: (<E extends ElementType = "a">(props: LinkProps<E>) => JSX.Element) & {
+    displayName?: string;
+    propTypes?: WeakValidationMap<LinkProps<any>>;
 };
 declare const LinkPropTypes: {
     /**

package/es/components/SideNavMenu.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { ChevronRight, ChevronDown, ArrowLeft } from '@carbon/icons-react';
+import { ArrowLeft, ChevronRight, ChevronDown } from '@carbon/icons-react';
 import { SideNavIcon, Layer, Button } from '@carbon/react';
 import { breakpoints } from '../node_modules/@carbon/layout/es/index.js';
 import cx from 'classnames';

package/es/internal/useEvent.d.ts

@@ -27,5 +27,5 @@ export type GlobalEventCallback<E extends keyof GlobalEventHandlersEventMap> = (
 /**
  * <T>
  */
-export type MutableRefObject<T> = import('react').MutableRefObject<T>;
+export type MutableRefObject<T> = import("react").MutableRefObject<T>;
 export type WindowEventCallback<E extends keyof WindowEventMap> = (event: WindowEventMap[E]) => void;

package/es/internal/useId.d.ts

@@ -4,7 +4,7 @@
  * @param {string} [prefix] the optional prefix id
  * @returns {string}
  */
-export function useCompatibleId(prefix?: string | undefined): string;
+export function useCompatibleId(prefix?: string): string;
 /**
  * Generate a unique id if a given `id` is not provided
  * This is an internal utility, not intended for public usage.
@@ -18,4 +18,4 @@ export function useFallbackId(id: string | undefined): string;
  * @param {string} [prefix] the optional prefix id
  * @returns {string}
  */
-export function useId(prefix?: string | undefined): string;
+export function useId(prefix?: string): string;

package/es/internal/useId.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React__default, { useState, useEffect, useLayoutEffect } from 'react';
+import React__default, { useState, useLayoutEffect, useEffect } from 'react';
 import setupGetInstanceId from './setupGetInstanceId.js';
 import { useIdPrefix } from './useIdPrefix.js';
 import { canUseDOM } from './environment.js';

package/es/node_modules/@carbon/ibm-products/es/components/TooltipTrigger/TooltipTrigger.js

@@ -21,7 +21,7 @@ const componentName = 'TooltipTrigger';
  * This is an tooltip trigger as Carbon Tooltip requires an active element to work but provides
  * no blanked button.
  */
-let TooltipTrigger = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+const TooltipTrigger = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
     children,
     className,
@@ -40,7 +40,6 @@ let TooltipTrigger = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
 });
 
 // Return a placeholder if not released and not enabled by feature flag.
-TooltipTrigger = pkg.checkComponentEnabled(TooltipTrigger, componentName);
 
 // The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.

package/es/node_modules/@carbon/ibm-products/es/components/UserAvatar/UserAvatar.js

@@ -13,7 +13,6 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { usePrefix, Tooltip } from '@carbon/react';
 import { User } from '@carbon/react/icons';
-import '../../global/js/utils/props-helper.js';
 import { TooltipTrigger } from '../TooltipTrigger/TooltipTrigger.js';
 
 // Carbon and package components we use.
@@ -29,7 +28,7 @@ const componentName = 'UserAvatar';
  * TODO: A description of the component.
  */
 
-let UserAvatar = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+const UserAvatar = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const {
     backgroundColor = 'order-1-cyan',
     className,
@@ -107,7 +106,6 @@ let UserAvatar = /*#__PURE__*/React__default.forwardRef((props, ref) => {
 });
 
 // Return a placeholder if not released and not enabled by feature flag
-UserAvatar = pkg.checkComponentEnabled(UserAvatar, componentName);
 
 // The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.
@@ -135,12 +133,7 @@ UserAvatar.propTypes = {
    * When passing the image prop use the imageDescription prop to describe the image for screen reader.
    */
   /**@ts-ignore */
-  imageDescription: PropTypes.string.isRequired.if(_ref => {
-    let {
-      image
-    } = _ref;
-    return !!image;
-  }),
+  imageDescription: PropTypes.string,
   /**
    * When passing the name prop, either send the initials to be used or the user's full name. The first two capital letters of the user's name will be used as the name.
    */

package/es/node_modules/@carbon/ibm-products/es/global/js/utils/devtools.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { devtoolsAttribute, getDevtoolsId } from '../package-settings.js';
+import { getDevtoolsId, devtoolsAttribute } from '../package-settings.js';
 
 function getDevtoolsProps(componentName) {
   return {

package/es/node_modules/@carbon/layout/es/index.js

@@ -29,30 +29,10 @@ function rem(px) {
 // Initial map of our breakpoints and their values
 var breakpoints = {
   sm: {
-    width: rem(320),
-    columns: 4,
-    margin: '0'
-  },
+    width: rem(320)},
   md: {
-    width: rem(672),
-    columns: 8,
-    margin: rem(16)
-  },
+    width: rem(672)},
   lg: {
-    width: rem(1056),
-    columns: 16,
-    margin: rem(16)
-  },
-  xlg: {
-    width: rem(1312),
-    columns: 16,
-    margin: rem(16)
-  },
-  max: {
-    width: rem(1584),
-    columns: 16,
-    margin: rem(24)
-  }
-};
+    width: rem(1056)}};
 
 export { baseFontSize, breakpoints, rem };

package/lib/components/Link.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import React, { type ElementType, type Ref } from 'react';
+import { type ElementType, type WeakValidationMap, type Ref } from 'react';
 import { type PolymorphicProps } from '../types/common';
 type LinkBaseProps<E extends ElementType> = {
     /**
@@ -21,9 +21,9 @@ export type LinkProps<E extends ElementType> = PolymorphicProps<E, LinkBaseProps
  * in their own components to support use-cases like `react-router` or
  * `@reach/router`
  */
-declare const Link: (<E extends React.ElementType = "a">(props: LinkProps<E>) => JSX.Element) & {
-    displayName?: string | undefined;
-    propTypes?: React.WeakValidationMap<LinkProps<any>> | undefined;
+declare const Link: (<E extends ElementType = "a">(props: LinkProps<E>) => JSX.Element) & {
+    displayName?: string;
+    propTypes?: WeakValidationMap<LinkProps<any>>;
 };
 declare const LinkPropTypes: {
     /**

package/lib/internal/useEvent.d.ts

@@ -27,5 +27,5 @@ export type GlobalEventCallback<E extends keyof GlobalEventHandlersEventMap> = (
 /**
  * <T>
  */
-export type MutableRefObject<T> = import('react').MutableRefObject<T>;
+export type MutableRefObject<T> = import("react").MutableRefObject<T>;
 export type WindowEventCallback<E extends keyof WindowEventMap> = (event: WindowEventMap[E]) => void;

package/lib/internal/useId.d.ts

@@ -4,7 +4,7 @@
  * @param {string} [prefix] the optional prefix id
  * @returns {string}
  */
-export function useCompatibleId(prefix?: string | undefined): string;
+export function useCompatibleId(prefix?: string): string;
 /**
  * Generate a unique id if a given `id` is not provided
  * This is an internal utility, not intended for public usage.
@@ -18,4 +18,4 @@ export function useFallbackId(id: string | undefined): string;
  * @param {string} [prefix] the optional prefix id
  * @returns {string}
  */
-export function useId(prefix?: string | undefined): string;
+export function useId(prefix?: string): string;

package/lib/node_modules/@carbon/ibm-products/es/components/TooltipTrigger/TooltipTrigger.js

@@ -23,7 +23,7 @@ const componentName = 'TooltipTrigger';
  * This is an tooltip trigger as Carbon Tooltip requires an active element to work but provides
  * no blanked button.
  */
-exports.TooltipTrigger = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+const TooltipTrigger = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
     children,
     className,
@@ -42,16 +42,15 @@ exports.TooltipTrigger = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
 });
 
 // Return a placeholder if not released and not enabled by feature flag.
-exports.TooltipTrigger = settings.pkg.checkComponentEnabled(exports.TooltipTrigger, componentName);
 
 // The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.
-exports.TooltipTrigger.displayName = componentName;
+TooltipTrigger.displayName = componentName;
 
 // The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
-exports.TooltipTrigger.propTypes = {
+TooltipTrigger.propTypes = {
   /**
    * Child content of tooltip trigger
    */
@@ -61,3 +60,5 @@ exports.TooltipTrigger.propTypes = {
    */
   className: index.default.string
 };
+
+exports.TooltipTrigger = TooltipTrigger;

package/lib/node_modules/@carbon/ibm-products/es/components/UserAvatar/UserAvatar.js

@@ -15,7 +15,6 @@ var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var react = require('@carbon/react');
 var icons = require('@carbon/react/icons');
-require('../../global/js/utils/props-helper.js');
 var TooltipTrigger = require('../TooltipTrigger/TooltipTrigger.js');
 
 // Carbon and package components we use.
@@ -31,7 +30,7 @@ const componentName = 'UserAvatar';
  * TODO: A description of the component.
  */
 
-exports.UserAvatar = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+const UserAvatar = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const {
     backgroundColor = 'order-1-cyan',
     className,
@@ -109,16 +108,15 @@ exports.UserAvatar = /*#__PURE__*/React__default.forwardRef((props, ref) => {
 });
 
 // Return a placeholder if not released and not enabled by feature flag
-exports.UserAvatar = settings.pkg.checkComponentEnabled(exports.UserAvatar, componentName);
 
 // The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.
-exports.UserAvatar.displayName = componentName;
+UserAvatar.displayName = componentName;
 
 // The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
-exports.UserAvatar.propTypes = {
+UserAvatar.propTypes = {
   /**
    * Provide the background color need to be set for UserAvatar. Background color will be set based on lighter or darker theme.
    * For example: if you select order-5-purple, it will take $purple-60 for lighter theme and $purple-50 for darker theme.
@@ -137,12 +135,7 @@ exports.UserAvatar.propTypes = {
    * When passing the image prop use the imageDescription prop to describe the image for screen reader.
    */
   /**@ts-ignore */
-  imageDescription: index.default.string.isRequired.if(_ref => {
-    let {
-      image
-    } = _ref;
-    return !!image;
-  }),
+  imageDescription: index.default.string,
   /**
    * When passing the name prop, either send the initials to be used or the user's full name. The first two capital letters of the user's name will be used as the name.
    */
@@ -166,3 +159,5 @@ exports.UserAvatar.propTypes = {
   tooltipText: index.default.string
   /* TODO: add types and DocGen for all props. */
 };
+
+exports.UserAvatar = UserAvatar;

package/lib/node_modules/@carbon/layout/es/index.js

@@ -31,31 +31,11 @@ function rem(px) {
 // Initial map of our breakpoints and their values
 var breakpoints = {
   sm: {
-    width: rem(320),
-    columns: 4,
-    margin: '0'
-  },
+    width: rem(320)},
   md: {
-    width: rem(672),
-    columns: 8,
-    margin: rem(16)
-  },
+    width: rem(672)},
   lg: {
-    width: rem(1056),
-    columns: 16,
-    margin: rem(16)
-  },
-  xlg: {
-    width: rem(1312),
-    columns: 16,
-    margin: rem(16)
-  },
-  max: {
-    width: rem(1584),
-    columns: 16,
-    margin: rem(24)
-  }
-};
+    width: rem(1056)}};
 
 exports.baseFontSize = baseFontSize;
 exports.breakpoints = breakpoints;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-ui-shell",
-  "version": "0.80.0",
+  "version": "0.82.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -37,10 +37,10 @@
   },
   "devDependencies": {
     "@carbon-labs/utilities": "canary",
-    "@carbon/ibm-products": "^2.72.1"
+    "@carbon/ibm-products": "^2.76.0"
   },
   "dependencies": {
     "@ibm/telemetry-js": "^1.10.2"
   },
-  "gitHead": "b40ae3cdabef52e30ed4e74819325ca5c0e36877"
+  "gitHead": "5520cf06630215524af572ddea13596eaf8a0811"
 }

package/scss/styles/_header.scss

@@ -10,6 +10,7 @@
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/react/scss/utilities/convert' as convert;
 @use '@carbon/styles/scss/utilities/custom-property' as custom-property;
+@use '@carbon/styles/scss/breakpoint' as *;
 
 $prefix: 'cds' !default;
 
@@ -79,3 +80,14 @@ $prefix: 'cds' !default;
   ):hover {
   color: $text-primary;
 }
+
+//----------------------------------------------------------------------------
+// Search expanded inside Header
+//----------------------------------------------------------------------------
+@include breakpoint-down(lg) {
+  .#{$prefix}--header .#{$prefix}--search--expanded {
+    position: absolute;
+    z-index: 1;
+    inset-inline-start: 0;
+  }
+}

package/es/node_modules/@carbon/ibm-products/es/global/js/utils/props-helper.js

@@ -1,46 +0,0 @@
-/**
- * Copyright IBM Corp. 2024
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import 'react';
-import PropTypes from '../../../_virtual/index.js';
-import pconsole from './pconsole.js';
-
-/**
- * A prop-types validation function that takes a type checkers and a condition
- * function and invokes either the type checker or the isRequired variant of
- * the type checker according to whether the condition function returns false
- * or true when called with the full set of props. This can be useful to make
- * a prop conditionally required. The function also has a decorate function
- * which can be used to add isRequiredIf to any existing type which already has
- * an isRequired variant, and this is automatically applied to the simple type
- * checkers in PropTypes when this props-helper module is imported. The second
- * example produces better results with DocGen and Storybook.
- *
- * Examples:
- *
- * MyComponent1.propTypes = {
- *   showFoo: PropTypes.bool,
- *   fooLabel: isRequiredIf(PropTypes.string, ({ showFoo }) => showFoo),
- * }
- *
- * MyComponent2.propTypes = {
- *   showBar: PropTypes.bool,
- *   barLabel: PropTypes.string.isRequired.if(({ showBar }) => showBar),
- * }
- *
- */
-const isRequiredIf = (checker, conditionFn) => (props, propName, componentName, location, propFullName, secret) => (conditionFn(props) ? checker.isRequired : checker)(props, propName, componentName, location, propFullName, secret);
-isRequiredIf.decorate = checker => {
-  checker.isRequired.if = pconsole.isProduction ? pconsole.noop : isRequiredIf.bind(null, checker);
-};
-for (const checker in PropTypes) {
-  if (PropTypes[checker].isRequired) {
-    isRequiredIf.decorate(PropTypes[checker]);
-  }
-}
-
-export { isRequiredIf };

package/lib/node_modules/@carbon/ibm-products/es/global/js/utils/props-helper.js

@@ -1,48 +0,0 @@
-/**
- * Copyright IBM Corp. 2024
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-'use strict';
-
-require('react');
-var index = require('../../../_virtual/index.js');
-var pconsole = require('./pconsole.js');
-
-/**
- * A prop-types validation function that takes a type checkers and a condition
- * function and invokes either the type checker or the isRequired variant of
- * the type checker according to whether the condition function returns false
- * or true when called with the full set of props. This can be useful to make
- * a prop conditionally required. The function also has a decorate function
- * which can be used to add isRequiredIf to any existing type which already has
- * an isRequired variant, and this is automatically applied to the simple type
- * checkers in PropTypes when this props-helper module is imported. The second
- * example produces better results with DocGen and Storybook.
- *
- * Examples:
- *
- * MyComponent1.propTypes = {
- *   showFoo: PropTypes.bool,
- *   fooLabel: isRequiredIf(PropTypes.string, ({ showFoo }) => showFoo),
- * }
- *
- * MyComponent2.propTypes = {
- *   showBar: PropTypes.bool,
- *   barLabel: PropTypes.string.isRequired.if(({ showBar }) => showBar),
- * }
- *
- */
-const isRequiredIf = (checker, conditionFn) => (props, propName, componentName, location, propFullName, secret) => (conditionFn(props) ? checker.isRequired : checker)(props, propName, componentName, location, propFullName, secret);
-isRequiredIf.decorate = checker => {
-  checker.isRequired.if = pconsole.default.isProduction ? pconsole.default.noop : isRequiredIf.bind(null, checker);
-};
-for (const checker in index.default) {
-  if (index.default[checker].isRequired) {
-    isRequiredIf.decorate(index.default[checker]);
-  }
-}
-
-exports.isRequiredIf = isRequiredIf;