@carbon/react 1.51.0 → 1.52.0-rc.0

package/lib/components/TreeView/TreeView.js

@@ -15,6 +15,8 @@ var PropTypes = require('prop-types');
 var cx = require('classnames');
 var uniqueId = require('../../tools/uniqueId.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var useControllableState = require('../../internal/useControllableState.js');
+var index = require('../FeatureFlags/index.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -32,11 +34,13 @@ function TreeView(_ref) {
     hideLabel = false,
     label,
     multiselect = false,
+    onActivate,
     onSelect,
-    selected: preselected = [],
+    selected: preselected,
     size = 'sm',
     ...rest
   } = _ref;
+  const enableTreeviewControllable = index.useFeatureFlag('enable-treeview-controllable');
   const {
     current: treeId
   } = React.useRef(rest.id || uniqueId["default"]());
@@ -46,8 +50,20 @@ function TreeView(_ref) {
   });
   const treeRootRef = React.useRef(null);
   const treeWalker = React.useRef(treeRootRef?.current);
-  const [selected, setSelected] = React.useState(preselected);
-  const [active, setActive] = React.useState(prespecifiedActive);
+  const controllableSelectionState = useControllableState.useControllableState({
+    value: preselected,
+    onChange: onSelect,
+    defaultValue: []
+  });
+  const uncontrollableSelectionState = React.useState(preselected ?? []);
+  const [selected, setSelected] = enableTreeviewControllable ? controllableSelectionState : uncontrollableSelectionState;
+  const controllableActiveState = useControllableState.useControllableState({
+    value: prespecifiedActive,
+    onChange: onActivate,
+    defaultValue: undefined
+  });
+  const uncontrollableActiveState = React.useState(prespecifiedActive);
+  const [active, setActive] = enableTreeviewControllable ? controllableActiveState : uncontrollableActiveState;
   function resetNodeTabIndices() {
     Array.prototype.forEach.call(treeRootRef?.current?.querySelectorAll('[tabIndex="0"]') ?? [], item => {
       item.tabIndex = -1;
@@ -64,14 +80,18 @@ function TreeView(_ref) {
       } else {
         setSelected(selected.filter(selectedId => selectedId !== nodeId));
       }
-      onSelect?.(event, node);
+      if (!enableTreeviewControllable) {
+        onSelect?.(event, node);
+      }
     } else {
       setSelected([nodeId]);
       setActive(nodeId);
-      onSelect?.(event, {
-        activeNodeId: nodeId,
-        ...node
-      });
+      if (!enableTreeviewControllable) {
+        onSelect?.(event, {
+          activeNodeId: nodeId,
+          ...node
+        });
+      }
     }
   }
   function handleFocusEvent(event) {
@@ -177,11 +197,13 @@ function TreeView(_ref) {
     });
   }, [prefix]);
   const useActiveAndSelectedOnMount = () => React.useEffect(() => {
-    if (preselected.length) {
-      setSelected(preselected);
-    }
-    if (prespecifiedActive) {
-      setActive(prespecifiedActive);
+    if (!enableTreeviewControllable) {
+      if (preselected?.length) {
+        setSelected(preselected);
+      }
+      if (prespecifiedActive) {
+        setActive(prespecifiedActive);
+      }
     }
   }, []);
   useActiveAndSelectedOnMount();
@@ -226,6 +248,11 @@ TreeView.propTypes = {
    * If `multiselect` is `false` then only one node can be selected at a time
    */
   multiselect: PropTypes__default["default"].bool,
+  /**
+   * **[Experimental]** Callback function that is called when any node is activated.
+   * *This is only supported with the `enable-treeview-controllable` feature flag!*
+   */
+  onActivate: PropTypes__default["default"].func,
   /**
    * Callback function that is called when any node is selected
    */

package/lib/components/UIShell/Header.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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, { ReactNode } from 'react';
+interface HeaderProps {
+    children?: ReactNode;
+    /**
+     * Required props for the accessibility label of the header
+     */
+    'aria-label'?: string;
+    /**
+     * Required props for the accessibility label of the header
+     */
+    'aria-labelledby'?: string;
+    /**
+     * Optionally provide a custom class name that is applied to the underlying <header>
+     */
+    className?: string;
+}
+declare const Header: React.FC<HeaderProps>;
+export default Header;

package/lib/components/UIShell/Header.js

@@ -44,6 +44,5 @@ Header.propTypes = {
    */
   className: PropTypes__default["default"].string
 };
-var Header$1 = Header;
 
-exports["default"] = Header$1;
+exports["default"] = Header;

package/lib/components/UIShell/HeaderGlobalAction.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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, { ReactNode } from 'react';
+interface HeaderGlobalActionProps {
+    /**
+     * Required props for the accessibility label of the button
+     */
+    'aria-label'?: string;
+    /**
+     * Required props for the accessibility label of the button
+     */
+    'aria-labelledby'?: string;
+    /**
+     * Provide a custom icon for this global action
+     */
+    children: ReactNode;
+    /**
+     * Optionally provide a custom class name that is applied to the underlying
+     * button
+     */
+    className?: string;
+    /**
+     * Specify whether the action is currently active
+     */
+    isActive?: boolean;
+    /**
+     * Optionally provide an onClick handler that is called when the underlying
+     * button fires it's onclick event
+     */
+    onClick?: () => void;
+    /**
+     * Specify the alignment of the tooltip to the icon-only button.
+     * Can be one of: start, center, or end.
+     */
+    tooltipAlignment?: 'start' | 'center' | 'end';
+}
+/**
+ * HeaderGlobalAction is used as a part of the `HeaderGlobalBar`. It is
+ * essentially an Icon Button with an additional state to indicate whether it is
+ * "active". The active state comes from when a user clicks on the global action
+ * which should trigger a panel to appear.
+ *
+ * Note: children passed to this component should be an Icon.
+ */
+declare const HeaderGlobalAction: React.FC<HeaderGlobalActionProps>;
+export default HeaderGlobalAction;

package/lib/components/UIShell/HeaderGlobalAction.js

@@ -94,6 +94,5 @@ HeaderGlobalAction.propTypes = {
   tooltipAlignment: PropTypes__default["default"].oneOf(['start', 'center', 'end'])
 };
 HeaderGlobalAction.displayName = 'HeaderGlobalAction';
-var HeaderGlobalAction$1 = HeaderGlobalAction;
 
-exports["default"] = HeaderGlobalAction$1;
+exports["default"] = HeaderGlobalAction;

package/lib/components/UIShell/HeaderGlobalBar.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Generic container for `HeaderGlobalAction` components
+ */
+declare const HeaderGlobalBar: (props: import("../../types/common").ReactAttr<"div">) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export default HeaderGlobalBar;

package/lib/components/UIShell/HeaderGlobalBar.js

@@ -14,7 +14,8 @@ var wrapComponent = require('../../tools/wrapComponent.js');
 /**
  * Generic container for `HeaderGlobalAction` components
  */
-var HeaderGlobalBar = wrapComponent["default"]({
+
+const HeaderGlobalBar = wrapComponent["default"]({
   name: 'HeaderGlobalBar',
   className: prefix => `${prefix}--header__global`,
   type: 'div'

package/lib/components/UIShell/SideNavLink.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 { ComponentType, ElementType, ForwardedRef, ReactNode, WeakValidationMap } from 'react';
+import { LinkProps } from './Link';
+export type SideNavLinkProps<E extends ElementType> = LinkProps<E> & {
+    /**
+     * Required props for the accessibility label
+     */
+    'aria-label'?: string;
+    /**
+     * Required props for the accessibility label
+     */
+    'aria-labelledby'?: string;
+    /**
+     * Specify the text content for the link
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node
+     */
+    className?: string;
+    /**
+     * Specify whether the link is the current page
+     */
+    isActive?: boolean;
+    /**
+     * Property to indicate if the side nav container is open (or not). Use to
+     * keep local state and styling in step with the SideNav expansion state.
+     */
+    isSideNavExpanded?: boolean;
+    /**
+     * Specify if this is a large variation of the SideNavLink
+     */
+    large?: boolean;
+    /**
+     * Provide an icon to render in the side navigation link. Should be a React class.
+     */
+    renderIcon?: ComponentType;
+    /**
+     * Optional prop to specify the tabIndex of the button. If undefined, it will be applied default validation
+     */
+    tabIndex?: number;
+};
+export interface SideNavLinkComponent {
+    <E extends ElementType = 'a'>(props: SideNavLinkProps<E> & {
+        ref?: ForwardedRef<ElementType>;
+    }): JSX.Element | null;
+    displayName?: string;
+    propTypes?: WeakValidationMap<SideNavLinkProps<any>>;
+}
+declare const SideNavLink: SideNavLinkComponent;
+export declare const createCustomSideNavLink: (element: any) => (props: any) => import("react/jsx-runtime").JSX.Element;
+export default SideNavLink;

package/lib/components/UIShell/SideNavLink.js

@@ -26,7 +26,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const SideNavLink = /*#__PURE__*/React__default["default"].forwardRef(function SideNavLink(_ref, ref) {
+const SideNavLink = /*#__PURE__*/React.forwardRef(function SideNavLink(_ref, ref) {
   let {
     children,
     className: customClassName,
@@ -81,12 +81,12 @@ SideNavLink.propTypes = {
   /**
    * Provide an icon to render in the side navigation link. Should be a React class.
    */
+  // @ts-expect-error - PropTypes are unable to cover this case.
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
   /**
    * Optional prop to specify the tabIndex of the button. If undefined, it will be applied default validation
    */
   tabIndex: PropTypes__default["default"].number
 };
-var SideNavLink$1 = SideNavLink;
 
-exports["default"] = SideNavLink$1;
+exports["default"] = SideNavLink;

package/lib/internal/useAttachedMenu.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Copyright IBM Corp. 2023
+ *
+ * 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 { MouseEventHandler } from 'react';
+/**
+ * Array of two numbers either representing [left, right] or [top, bottom].
+ */
+type TwoCoordinates = [number, number];
+export interface UseAttachedMenuReturn {
+    /**
+     * Whether the menu is open or not.
+     */
+    open: boolean;
+    /**
+     * The x position of the menu.
+     */
+    x: TwoCoordinates;
+    /**
+     * The y position of the menu.
+     */
+    y: TwoCoordinates;
+    /**
+     * A function to be called when the trigger element receives a click event.
+     */
+    handleClick: () => void;
+    /**
+     * A function to be called when the trigger element receives a mousedown event.
+     */
+    handleMousedown: MouseEventHandler;
+    /**
+     * A function to be called when the menu emits onClose.
+     */
+    handleClose: () => void;
+}
+/**
+ * This hook contains common code to be used when a menu should be visually attached to an anchor based on a click event.
+ *
+ * @param {Element|object} anchor The element or ref the menu should visually be attached to.
+ * @returns {useAttachedMenuReturn}
+ */
+export declare function useAttachedMenu(anchor: any): UseAttachedMenuReturn;
+export {};

package/lib/internal/useAttachedMenu.js

@@ -12,13 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 
 /**
- * @typedef {object} useAttachedMenuReturn
- * @property {boolean} open Whether the menu is open or not
- * @property {[number, number]} x The x position of the menu
- * @property {[number, number]} y The y position of the menu
- * @property {Function} handleClick A function to be called when the trigger element receives a click event
- * @property {Function} handleMousedown A function to be called when the trigger element recives a mousedown event
- * @property {Function} handleClose A function to be called when the menu emits onClose
+ * Array of two numbers either representing [left, right] or [top, bottom].
  */
 
 /**

package/lib/tools/wrapComponent.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 from 'react';
+import { ReactAttr } from '../types/common';
+type HTMLTagName = keyof HTMLElementTagNameMap;
+type WrapComponentArgs<T extends HTMLTagName> = {
+    name: string;
+    type: T;
+    className?: string | ((prefix: string) => string);
+};
+/**
+ * @param {{ name: string, type: string, className?: string | (prefix: string) => string }} props
+ * @returns
+ */
+declare const wrapComponent: <T extends keyof HTMLElementTagNameMap>({ name, className: getClassName, type, }: WrapComponentArgs<T>) => (props: ReactAttr<T>) => React.ReactElement;
+export default wrapComponent;

package/lib/tools/wrapComponent.js

@@ -9,16 +9,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
-var PropTypes = require('prop-types');
 var cx = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
 var usePrefix = require('../internal/usePrefix.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 /**
  * @param {{ name: string, type: string, className?: string | (prefix: string) => string }} props
@@ -56,6 +56,5 @@ const wrapComponent = _ref => {
   };
   return Component;
 };
-var wrapComponent$1 = wrapComponent;
 
-exports["default"] = wrapComponent$1;
+exports["default"] = wrapComponent;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.51.0",
+  "version": "1.52.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -48,15 +48,15 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.3",
-    "@carbon/feature-flags": "^0.16.0",
-    "@carbon/icons-react": "^11.36.0",
+    "@carbon/feature-flags": "^0.17.0-rc.0",
+    "@carbon/icons-react": "^11.37.0-rc.0",
     "@carbon/layout": "^11.20.0",
-    "@carbon/styles": "^1.51.0",
-    "@ibm/telemetry-js": "^1.2.0",
+    "@carbon/styles": "^1.52.0-rc.0",
+    "@ibm/telemetry-js": "^1.2.1",
     "classnames": "2.5.1",
     "copy-to-clipboard": "^3.3.1",
     "downshift": "8.3.1",
-    "flatpickr": "4.6.9",
+    "flatpickr": "4.6.13",
     "invariant": "^2.2.3",
     "lodash.debounce": "^4.0.8",
     "lodash.findlast": "^4.5.0",
@@ -108,7 +108,7 @@
     "html-webpack-plugin": "^5.5.0",
     "mini-css-extract-plugin": "^2.4.5",
     "postcss": "^8.4.5",
-    "postcss-loader": "^7.0.0",
+    "postcss-loader": "^8.0.0",
     "process": "^0.11.10",
     "prop-types": "^15.7.2",
     "react": "^18.2.0",
@@ -139,5 +139,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "957667fa7f197b544f6cb336814daa7074daaaee"
+  "gitHead": "be0fb52e96855034df55e03f8bc281fc38ef606c"
 }