@carbon-labs/react-ui-shell 0.80.0 → 0.81.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/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.
@@ -135,12 +134,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/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.
@@ -137,12 +136,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.
    */

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.81.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -42,5 +42,5 @@
   "dependencies": {
     "@ibm/telemetry-js": "^1.10.2"
   },
-  "gitHead": "b40ae3cdabef52e30ed4e74819325ca5c0e36877"
+  "gitHead": "d0f49a8c73733aa2a17bfbbbd90f8c7a62f8aa5a"
 }

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;