@itwin/appui-react 5.23.1 → 5.24.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log - @itwin/appui-react
 
+## 5.24.0
+
+### Minor Changes
+
+- 6d0c07d: Tooltip content for icons in HeaderIconToolbar of WidgetContentLayout
+
+### Patch Changes
+
+- @itwin/components-react@5.24.0
+- @itwin/core-react@5.24.0
+- @itwin/imodel-components-react@5.24.0
+
 ## 5.23.1
 
 ### Patch Changes

package/lib/appui-react/layout/widget/widget-content-layout/WidgetContentLayout.d.ts

@@ -10,6 +10,7 @@ interface IconMenuButton {
     icon: React.ReactNode;
     onClick: () => void;
     label: string;
+    tooltipContent?: string;
     type?: "button";
     disabled?: boolean;
     isActive?: boolean;

package/lib/appui-react/layout/widget/widget-content-layout/WidgetContentLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetContentLayout.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/widget-content-layout/WidgetContentLayout.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,4BAA4B,CAAC;AAEpC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAIzD,KAAK,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC;AAEjD,UAAU,cAAc;IACtB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,eAAe;IACvB,IAAI,EAAE,SAAS,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,UAAU,8BAA+B,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IAC3E;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;IACnD;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAC5B;;OAEG;IACH,IAAI,CAAC,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,OAAO,EAAE,MAAM,IAAI,CAAA;SAAE,EAAE,CAAC;KACjD,CAAC;IACF;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA2CD,UAAU,4BAA6B,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IACzE;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA+BD,UAAU,8BAA+B,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IAC3E;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA6BD,UAAU,wBAAyB,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IACrE;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA2CD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,mBAAmB;;;;CAI9B,CAAC"}
+{"version":3,"file":"WidgetContentLayout.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/widget-content-layout/WidgetContentLayout.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,4BAA4B,CAAC;AAEpC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAIzD,KAAK,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC;AAEjD,UAAU,cAAc;IACtB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,eAAe;IACvB,IAAI,EAAE,SAAS,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,UAAU,8BAA+B,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IAC3E;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;IACnD;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAC5B;;OAEG;IACH,IAAI,CAAC,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,OAAO,EAAE,MAAM,IAAI,CAAA;SAAE,EAAE,CAAC;KACjD,CAAC;IACF;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA2CD,UAAU,4BAA6B,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IACzE;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA+BD,UAAU,8BAA+B,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IAC3E;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA6BD,UAAU,wBAAyB,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IACrE;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA2CD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,mBAAmB;;;;CAI9B,CAAC"}

package/lib/appui-react/layout/widget/widget-content-layout/WidgetContentLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetContentLayout.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/widget-content-layout/WidgetContentLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module WidgetContentLayout\n */\n\nimport \"./WidgetContentLayout.scss\";\nimport classNames from \"classnames\";\nimport type { ComponentPropsWithRef } from \"react\";\nimport * as React from \"react\";\n\nimport { Divider, ProgressLinear, ProgressRadial } from \"@itwin/itwinui-react\";\nimport type { ToggleSwitch } from \"@itwin/itwinui-react\";\n\nimport { HeaderLayout } from \"./header/HeaderLayout.js\";\n\ntype IconMenu = IconMenuButton | IconMenuDivider;\n\ninterface IconMenuButton {\n  icon: React.ReactNode;\n  onClick: () => void;\n  label: string;\n  type?: \"button\";\n  disabled?: boolean;\n  isActive?: boolean;\n}\n\ninterface IconMenuDivider {\n  type: \"divider\";\n  key?: string;\n}\n\ninterface WidgetContentLayoutHeaderProps extends ComponentPropsWithRef<\"div\"> {\n  /**\n   * Toggle switch in the header.\n   */\n  toggle?: React.ComponentProps<typeof ToggleSwitch>;\n  /**\n   * Array of buttons to display in the header.\n   */\n  buttons?: React.ReactNode[];\n  /**\n   * Menu in the header.\n   */\n  menu?: {\n    title: string;\n    items: { label: string; onClick: () => void }[];\n  };\n  /**\n   * Title to display in the header.\n   */\n  title?: string;\n  /**\n   * Callback function for search functionality.\n   */\n  onSearch?: (value: string) => void;\n  /**\n   * Array of icon menu items to display in the header.\n   */\n  icons?: IconMenu[];\n  /**\n   * Size of the icons.\n   */\n  iconSize?: \"small\" | \"large\";\n  /**\n   * Child elements to render within the header.\n   */\n  children?: React.ReactNode;\n}\n\nconst Header = React.forwardRef<HTMLDivElement, WidgetContentLayoutHeaderProps>(\n  function Header(props, ref) {\n    const {\n      className,\n      children,\n      toggle,\n      buttons,\n      menu,\n      title,\n      onSearch,\n      icons,\n      iconSize,\n      ...rest\n    } = props;\n\n    return (\n      <div\n        className={classNames(\n          \"nz-widget-widgetContentLayout-header\",\n          className\n        )}\n        {...rest}\n        ref={ref}\n      >\n        <HeaderLayout\n          toggle={toggle}\n          buttons={buttons}\n          menu={menu}\n          title={title}\n          onSearch={onSearch}\n          icons={icons}\n          iconSize={iconSize}\n        />\n        {children}\n      </div>\n    );\n  }\n);\n\nHeader.displayName = \"appui:WidgetContentLayout.Header\";\n\ninterface WidgetContentLayoutBodyProps extends ComponentPropsWithRef<\"div\"> {\n  /**\n   * Whether the body is in a loading state.\n   */\n  isLoading?: boolean;\n  /**\n   * Whether to show a non-blocking loading indicator.\n   */\n  isNonBlockingLoading?: boolean;\n  /**\n   * Child elements to render within the body.\n   */\n  children?: React.ReactNode;\n}\n\nconst Body = React.forwardRef<HTMLDivElement, WidgetContentLayoutBodyProps>(\n  function Body(props, ref) {\n    const { isNonBlockingLoading, isLoading, className, children, ...rest } =\n      props;\n    return (\n      <div className=\"nz-widget-widgetContentLayout-body_wrapper\">\n        {isLoading ? (\n          <LoadingOverlay />\n        ) : (\n          isNonBlockingLoading && (\n            <ProgressLinear className=\"nz-widget-widgetContentLayout-progress\" />\n          )\n        )}\n        <div\n          className={classNames(\n            \"nz-widget-widgetContentLayout-body\",\n            className\n          )}\n          {...rest}\n          ref={ref}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  }\n);\nBody.displayName = \"appui:WidgetContentLayout.Body\";\n\ninterface WidgetContentLayoutFooterProps extends ComponentPropsWithRef<\"div\"> {\n  /**\n   * Child elements to render within the footer.\n   */\n  children?: React.ReactNode;\n}\n\nconst Footer = React.forwardRef<HTMLDivElement, WidgetContentLayoutFooterProps>(\n  function Footer(props, ref) {\n    const { className, children, ...rest } = props;\n    return (\n      <div\n        className={classNames(\n          \"nz-widget-widgetContentLayout-footer\",\n          className\n        )}\n        {...rest}\n        ref={ref}\n      >\n        {children}\n      </div>\n    );\n  }\n);\nFooter.displayName = \"appui:WidgetContentLayout.Footer\";\n\nfunction LoadingOverlay() {\n  return (\n    <div className=\"nz-widget-widgetContentLayout-loadingOverlay\">\n      <ProgressRadial />\n    </div>\n  );\n}\n\ninterface WidgetContentLayoutProps extends ComponentPropsWithRef<\"div\"> {\n  /**\n   * Whether the entire layout is in a loading state.\n   */\n  isLoading?: boolean;\n  /**\n   * Whether to hide dividers between sections.\n   */\n  hideDividers?: boolean;\n  /**\n   * Child elements (Header, Body, Footer) to render.\n   */\n  children?: React.ReactNode;\n}\n\nconst WidgetContentLayoutInner = React.forwardRef<\n  HTMLDivElement,\n  WidgetContentLayoutProps\n>(function WidgetContentLayoutInner(props, ref) {\n  const { isLoading, hideDividers, children, className, ...divProps } = props;\n  const [headerElement, setHeaderElement] = React.useState<React.ReactNode>();\n  const [bodyElement, setBodyElement] = React.useState<React.ReactNode>();\n  const [footerElement, setFooterElement] = React.useState<React.ReactNode>();\n\n  React.useEffect(() => {\n    React.Children.forEach(children, (child) => {\n      if (!React.isValidElement(child)) return;\n      if (child.type === Header) setHeaderElement(child);\n      else if (child.type === Body) setBodyElement(child);\n      else if (child.type === Footer) setFooterElement(child);\n    });\n  }, [children]);\n\n  const widgetComponents = [headerElement, bodyElement, footerElement].filter(\n    Boolean\n  );\n\n  return (\n    <div\n      className={classNames(\"nz-widget-widgetContentLayout\", className)}\n      {...divProps}\n      ref={ref}\n    >\n      {isLoading && <LoadingOverlay />}\n      {widgetComponents.map((component, index) => (\n        <React.Fragment key={index}>\n          {component}\n          {index < widgetComponents.length - 1 && !hideDividers && (\n            <Divider className=\"nz-widget-widgetContentLayout-divider\" />\n          )}\n        </React.Fragment>\n      ))}\n    </div>\n  );\n});\n\n/**\n * A layout component for widgets that provides a top section for buttons, a body section and a footer section.\n * @example\n * <WidgetContentLayout>\n *  <WidgetContentLayout.Header />\n *  <WidgetContentLayout.Body>\n *   <ContentComponent />\n *  </WidgetContentLayout.Body>\n *  <WidgetContentLayout.Footer>\n *   <FooterComponent />\n *  </WidgetContentLayout.Footer>\n * </WidgetContentLayout>\n *  @public\n */\nexport const WidgetContentLayout = Object.assign(WidgetContentLayoutInner, {\n  Header,\n  Body,\n  Footer,\n});\n\nWidgetContentLayout.Header = Header;\nWidgetContentLayout.Body = Body;\nWidgetContentLayout.Footer = Footer;\n"]}
+{"version":3,"file":"WidgetContentLayout.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/widget-content-layout/WidgetContentLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module WidgetContentLayout\n */\n\nimport \"./WidgetContentLayout.scss\";\nimport classNames from \"classnames\";\nimport type { ComponentPropsWithRef } from \"react\";\nimport * as React from \"react\";\n\nimport { Divider, ProgressLinear, ProgressRadial } from \"@itwin/itwinui-react\";\nimport type { ToggleSwitch } from \"@itwin/itwinui-react\";\n\nimport { HeaderLayout } from \"./header/HeaderLayout.js\";\n\ntype IconMenu = IconMenuButton | IconMenuDivider;\n\ninterface IconMenuButton {\n  icon: React.ReactNode;\n  onClick: () => void;\n  label: string;\n  tooltipContent?: string;\n  type?: \"button\";\n  disabled?: boolean;\n  isActive?: boolean;\n}\n\ninterface IconMenuDivider {\n  type: \"divider\";\n  key?: string;\n}\n\ninterface WidgetContentLayoutHeaderProps extends ComponentPropsWithRef<\"div\"> {\n  /**\n   * Toggle switch in the header.\n   */\n  toggle?: React.ComponentProps<typeof ToggleSwitch>;\n  /**\n   * Array of buttons to display in the header.\n   */\n  buttons?: React.ReactNode[];\n  /**\n   * Menu in the header.\n   */\n  menu?: {\n    title: string;\n    items: { label: string; onClick: () => void }[];\n  };\n  /**\n   * Title to display in the header.\n   */\n  title?: string;\n  /**\n   * Callback function for search functionality.\n   */\n  onSearch?: (value: string) => void;\n  /**\n   * Array of icon menu items to display in the header.\n   */\n  icons?: IconMenu[];\n  /**\n   * Size of the icons.\n   */\n  iconSize?: \"small\" | \"large\";\n  /**\n   * Child elements to render within the header.\n   */\n  children?: React.ReactNode;\n}\n\nconst Header = React.forwardRef<HTMLDivElement, WidgetContentLayoutHeaderProps>(\n  function Header(props, ref) {\n    const {\n      className,\n      children,\n      toggle,\n      buttons,\n      menu,\n      title,\n      onSearch,\n      icons,\n      iconSize,\n      ...rest\n    } = props;\n\n    return (\n      <div\n        className={classNames(\n          \"nz-widget-widgetContentLayout-header\",\n          className\n        )}\n        {...rest}\n        ref={ref}\n      >\n        <HeaderLayout\n          toggle={toggle}\n          buttons={buttons}\n          menu={menu}\n          title={title}\n          onSearch={onSearch}\n          icons={icons}\n          iconSize={iconSize}\n        />\n        {children}\n      </div>\n    );\n  }\n);\n\nHeader.displayName = \"appui:WidgetContentLayout.Header\";\n\ninterface WidgetContentLayoutBodyProps extends ComponentPropsWithRef<\"div\"> {\n  /**\n   * Whether the body is in a loading state.\n   */\n  isLoading?: boolean;\n  /**\n   * Whether to show a non-blocking loading indicator.\n   */\n  isNonBlockingLoading?: boolean;\n  /**\n   * Child elements to render within the body.\n   */\n  children?: React.ReactNode;\n}\n\nconst Body = React.forwardRef<HTMLDivElement, WidgetContentLayoutBodyProps>(\n  function Body(props, ref) {\n    const { isNonBlockingLoading, isLoading, className, children, ...rest } =\n      props;\n    return (\n      <div className=\"nz-widget-widgetContentLayout-body_wrapper\">\n        {isLoading ? (\n          <LoadingOverlay />\n        ) : (\n          isNonBlockingLoading && (\n            <ProgressLinear className=\"nz-widget-widgetContentLayout-progress\" />\n          )\n        )}\n        <div\n          className={classNames(\n            \"nz-widget-widgetContentLayout-body\",\n            className\n          )}\n          {...rest}\n          ref={ref}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  }\n);\nBody.displayName = \"appui:WidgetContentLayout.Body\";\n\ninterface WidgetContentLayoutFooterProps extends ComponentPropsWithRef<\"div\"> {\n  /**\n   * Child elements to render within the footer.\n   */\n  children?: React.ReactNode;\n}\n\nconst Footer = React.forwardRef<HTMLDivElement, WidgetContentLayoutFooterProps>(\n  function Footer(props, ref) {\n    const { className, children, ...rest } = props;\n    return (\n      <div\n        className={classNames(\n          \"nz-widget-widgetContentLayout-footer\",\n          className\n        )}\n        {...rest}\n        ref={ref}\n      >\n        {children}\n      </div>\n    );\n  }\n);\nFooter.displayName = \"appui:WidgetContentLayout.Footer\";\n\nfunction LoadingOverlay() {\n  return (\n    <div className=\"nz-widget-widgetContentLayout-loadingOverlay\">\n      <ProgressRadial />\n    </div>\n  );\n}\n\ninterface WidgetContentLayoutProps extends ComponentPropsWithRef<\"div\"> {\n  /**\n   * Whether the entire layout is in a loading state.\n   */\n  isLoading?: boolean;\n  /**\n   * Whether to hide dividers between sections.\n   */\n  hideDividers?: boolean;\n  /**\n   * Child elements (Header, Body, Footer) to render.\n   */\n  children?: React.ReactNode;\n}\n\nconst WidgetContentLayoutInner = React.forwardRef<\n  HTMLDivElement,\n  WidgetContentLayoutProps\n>(function WidgetContentLayoutInner(props, ref) {\n  const { isLoading, hideDividers, children, className, ...divProps } = props;\n  const [headerElement, setHeaderElement] = React.useState<React.ReactNode>();\n  const [bodyElement, setBodyElement] = React.useState<React.ReactNode>();\n  const [footerElement, setFooterElement] = React.useState<React.ReactNode>();\n\n  React.useEffect(() => {\n    React.Children.forEach(children, (child) => {\n      if (!React.isValidElement(child)) return;\n      if (child.type === Header) setHeaderElement(child);\n      else if (child.type === Body) setBodyElement(child);\n      else if (child.type === Footer) setFooterElement(child);\n    });\n  }, [children]);\n\n  const widgetComponents = [headerElement, bodyElement, footerElement].filter(\n    Boolean\n  );\n\n  return (\n    <div\n      className={classNames(\"nz-widget-widgetContentLayout\", className)}\n      {...divProps}\n      ref={ref}\n    >\n      {isLoading && <LoadingOverlay />}\n      {widgetComponents.map((component, index) => (\n        <React.Fragment key={index}>\n          {component}\n          {index < widgetComponents.length - 1 && !hideDividers && (\n            <Divider className=\"nz-widget-widgetContentLayout-divider\" />\n          )}\n        </React.Fragment>\n      ))}\n    </div>\n  );\n});\n\n/**\n * A layout component for widgets that provides a top section for buttons, a body section and a footer section.\n * @example\n * <WidgetContentLayout>\n *  <WidgetContentLayout.Header />\n *  <WidgetContentLayout.Body>\n *   <ContentComponent />\n *  </WidgetContentLayout.Body>\n *  <WidgetContentLayout.Footer>\n *   <FooterComponent />\n *  </WidgetContentLayout.Footer>\n * </WidgetContentLayout>\n *  @public\n */\nexport const WidgetContentLayout = Object.assign(WidgetContentLayoutInner, {\n  Header,\n  Body,\n  Footer,\n});\n\nWidgetContentLayout.Header = Header;\nWidgetContentLayout.Body = Body;\nWidgetContentLayout.Footer = Footer;\n"]}

package/lib/appui-react/layout/widget/widget-content-layout/header/HeaderIconToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderIconToolbar.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/widget/widget-content-layout/header/HeaderIconToolbar.tsx"],"names":[],"mappings":"AAKA,OAAO,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAErE,KAAK,8BAA8B,GAAG,KAAK,CAAC,cAAc,CACxD,OAAO,mBAAmB,CAAC,MAAM,CAClC,CAAC;AACF,KAAK,QAAQ,GAAG,WAAW,CAAC,8BAA8B,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7E,UAAU,cAAc;IACtB,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,KAAK,mBAAmB,GAAG;IACzB,OAAO;IACP,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;CAC9C,CAAC;AAEF,UAAU,sBACR,SAAQ,IAAI,CAAC,8BAA8B,EAAE,UAAU,GAAG,UAAU,CAAC;IACrE,0FAA0F;IAC1F,SAAS,EAAE,CAAC,QAAQ,GAAG,cAAc,CAAC,EAAE,CAAC;IACzC,+EAA+E;IAC/E,mBAAmB,EAAE,mBAAmB,CAAC;CAC1C;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,qBAyG9D"}
+{"version":3,"file":"HeaderIconToolbar.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/widget/widget-content-layout/header/HeaderIconToolbar.tsx"],"names":[],"mappings":"AAKA,OAAO,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAErE,KAAK,8BAA8B,GAAG,KAAK,CAAC,cAAc,CACxD,OAAO,mBAAmB,CAAC,MAAM,CAClC,CAAC;AACF,KAAK,QAAQ,GAAG,WAAW,CAAC,8BAA8B,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7E,UAAU,cAAc;IACtB,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,KAAK,mBAAmB,GAAG;IACzB,OAAO;IACP,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;CAC9C,CAAC;AAEF,UAAU,sBACR,SAAQ,IAAI,CAAC,8BAA8B,EAAE,UAAU,GAAG,UAAU,CAAC;IACrE,0FAA0F;IAC1F,SAAS,EAAE,CAAC,QAAQ,GAAG,cAAc,CAAC,EAAE,CAAC;IACzC,+EAA+E;IAC/E,mBAAmB,EAAE,mBAAmB,CAAC;CAC1C;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,qBAmI9D"}

package/lib/appui-react/layout/widget/widget-content-layout/header/HeaderIconToolbar.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import "./HeaderIconToolbar.scss";
 import * as React from "react";
-import { ButtonGroup, Divider, DropdownMenu, IconButton, MenuDivider, MenuItem, } from "@itwin/itwinui-react";
+import { ButtonGroup, Divider, DropdownMenu, IconButton, MenuDivider, MenuItem, Text, Tooltip, } from "@itwin/itwinui-react";
 import { SvgMore, SvgSearch } from "@itwin/itwinui-icons-react";
 import { HeaderSearch } from "./HeaderSearch.js";
 /**
@@ -27,12 +27,18 @@ export function HeaderIconToolbar(props) {
                     return icon.type === "divider" ? (_index === 0 || searchIsExpanded ? (React.createElement(React.Fragment, { key: index })) : (React.createElement(MenuDivider, { key: index }))) : icon.type === "search" ? (!searchIsExpanded ? (React.createElement(MenuItem, { key: index, onClick: () => {
                             close();
                             setSearchIsExpanded(true);
-                        }, startIcon: React.createElement(SvgSearch, null) }, "Search")) : (React.createElement(React.Fragment, { key: index }))) : (React.createElement(MenuItem, { isSelected: icon.isActive, disabled: icon.disabled, key: index, onClick: () => {
+                        }, startIcon: React.createElement(SvgSearch, null) }, "Search")) : (React.createElement(React.Fragment, { key: index }))) : icon.tooltipContent ? (React.createElement(Tooltip, { content: icon.tooltipContent, key: index },
+                        React.createElement(MenuItem, { isSelected: icon.isActive, disabled: icon.disabled, key: index, onClick: () => {
+                                icon.onClick();
+                                close();
+                            }, startIcon: React.createElement(React.Fragment, null, icon.icon) }, icon.label))) : (React.createElement(MenuItem, { isSelected: icon.isActive, disabled: icon.disabled, key: index, onClick: () => {
                             icon.onClick();
                             close();
                         }, startIcon: React.createElement(React.Fragment, null, icon.icon) }, icon.label));
                 }) },
                 React.createElement(IconButton, { size: props.iconSize, styleType: "borderless", "aria-label": "More" },
-                    React.createElement(SvgMore, null)))) }, props.menuIcons.map((icon, index) => icon.type === "divider" ? (React.createElement(Divider, { orientation: "vertical", key: icon.key ?? `divider-${index}` })) : icon.type === "search" ? (React.createElement(HeaderSearch, { key: "search", searchExpandedState: props.searchExpandedState, searchState: searchState, iconSize: props.iconSize, onSearch: props.onSearch })) : (React.createElement(IconButton, { disabled: icon.disabled, label: icon.label, key: icon.label, size: props.iconSize, styleType: "borderless", onClick: icon.onClick, labelProps: { placement: "bottom" }, isActive: icon.isActive, className: "nz-iconButton" }, icon.icon))))));
+                    React.createElement(SvgMore, null)))) }, props.menuIcons.map((icon, index) => icon.type === "divider" ? (React.createElement(Divider, { orientation: "vertical", key: icon.key ?? `divider-${index}` })) : icon.type === "search" ? (React.createElement(HeaderSearch, { key: "search", searchExpandedState: props.searchExpandedState, searchState: searchState, iconSize: props.iconSize, onSearch: props.onSearch })) : (React.createElement(IconButton, { disabled: icon.disabled, label: icon.tooltipContent ? (React.createElement("div", { className: "nz-widget-widgetContentLayout-header-headerIconToolbar-iconButton-tooltip" },
+                React.createElement(Text, { variant: "small" }, icon.label),
+                React.createElement(Text, { isMuted: true, variant: "small" }, icon.tooltipContent))) : (icon.label), key: icon.label, size: props.iconSize, styleType: "borderless", onClick: icon.onClick, labelProps: { placement: "bottom" }, isActive: icon.isActive, className: "nz-iconButton" }, icon.icon))))));
 }
 //# sourceMappingURL=HeaderIconToolbar.js.map

package/lib/appui-react/layout/widget/widget-content-layout/header/HeaderIconToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderIconToolbar.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/widget/widget-content-layout/header/HeaderIconToolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport \"./HeaderIconToolbar.scss\";\nimport * as React from \"react\";\nimport {\n  ButtonGroup,\n  Divider,\n  DropdownMenu,\n  IconButton,\n  MenuDivider,\n  MenuItem,\n} from \"@itwin/itwinui-react\";\nimport { SvgMore, SvgSearch } from \"@itwin/itwinui-icons-react\";\nimport { HeaderSearch } from \"./HeaderSearch.js\";\nimport type { WidgetContentLayout } from \"../WidgetContentLayout.js\";\n\ntype WidgetContentLayoutHeaderProps = React.ComponentProps<\n  typeof WidgetContentLayout.Header\n>;\ntype IconMenu = NonNullable<WidgetContentLayoutHeaderProps[\"icons\"]>[number];\n\ninterface IconMenuSearch {\n  type: \"search\";\n}\n\ntype SearchExpandedState = [\n  boolean,\n  React.Dispatch<React.SetStateAction<boolean>>\n];\n\ninterface HeaderIconToolbarProps\n  extends Pick<WidgetContentLayoutHeaderProps, \"iconSize\" | \"onSearch\"> {\n  /** Array of icon menu items to display, including regular icons, search, and dividers. */\n  menuIcons: (IconMenu | IconMenuSearch)[];\n  /** State tuple controlling whether the search box is expanded or collapsed. */\n  searchExpandedState: SearchExpandedState;\n}\n\n/**\n * Header toolbar component that displays menu icons with overflow handling.\n * Renders a button group with icons, search functionality, and an overflow menu.\n * Icons that don't fit in the available space are moved into a dropdown menu.\n * @internal\n */\nexport function HeaderIconToolbar(props: HeaderIconToolbarProps) {\n  const [searchIsExpanded, setSearchIsExpanded] = props.searchExpandedState;\n  const searchState = React.useState(\"\");\n\n  return (\n    <div\n      className=\"nz-widget-widgetContentLayout-header-headerIconToolbar\"\n      data-_appui-icon-size={props.iconSize}\n      data-_appui-search-expanded={searchIsExpanded ? \"true\" : \"false\"}\n      data-_appui-single-item={props.menuIcons.length === 1 ? \"true\" : \"false\"}\n    >\n      <ButtonGroup\n        key={String(searchIsExpanded)}\n        className=\"nz-buttonGroup\"\n        overflowPlacement=\"end\"\n        overflowButton={(overflowStart) => (\n          <DropdownMenu\n            menuItems={(close) =>\n              Array(props.menuIcons.length - overflowStart)\n                .fill(null)\n                .map((_, _index) => {\n                  const index = overflowStart + _index;\n                  const icon = props.menuIcons.at(index);\n                  if (!icon) return <></>;\n                  return icon.type === \"divider\" ? (\n                    _index === 0 || searchIsExpanded ? (\n                      <React.Fragment key={index}></React.Fragment>\n                    ) : (\n                      <MenuDivider key={index} />\n                    )\n                  ) : icon.type === \"search\" ? (\n                    !searchIsExpanded ? (\n                      <MenuItem\n                        key={index}\n                        onClick={() => {\n                          close();\n                          setSearchIsExpanded(true);\n                        }}\n                        startIcon={<SvgSearch />}\n                      >\n                        Search\n                      </MenuItem>\n                    ) : (\n                      <React.Fragment key={index}></React.Fragment>\n                    )\n                  ) : (\n                    <MenuItem\n                      isSelected={icon.isActive}\n                      disabled={icon.disabled}\n                      key={index}\n                      onClick={() => {\n                        icon.onClick();\n                        close();\n                      }}\n                      startIcon={<>{icon.icon}</>}\n                    >\n                      {icon.label}\n                    </MenuItem>\n                  );\n                })\n            }\n          >\n            <IconButton\n              size={props.iconSize}\n              styleType=\"borderless\"\n              aria-label=\"More\"\n            >\n              <SvgMore />\n            </IconButton>\n          </DropdownMenu>\n        )}\n      >\n        {props.menuIcons.map((icon, index) =>\n          icon.type === \"divider\" ? (\n            <Divider\n              orientation=\"vertical\"\n              key={icon.key ?? `divider-${index}`}\n            />\n          ) : icon.type === \"search\" ? (\n            <HeaderSearch\n              key=\"search\"\n              searchExpandedState={props.searchExpandedState}\n              searchState={searchState}\n              iconSize={props.iconSize}\n              onSearch={props.onSearch}\n            />\n          ) : (\n            <IconButton\n              disabled={icon.disabled}\n              label={icon.label}\n              key={icon.label}\n              size={props.iconSize}\n              styleType=\"borderless\"\n              onClick={icon.onClick}\n              labelProps={{ placement: \"bottom\" }}\n              isActive={icon.isActive}\n              className=\"nz-iconButton\"\n            >\n              {icon.icon}\n            </IconButton>\n          )\n        )}\n      </ButtonGroup>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"HeaderIconToolbar.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/widget/widget-content-layout/header/HeaderIconToolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport \"./HeaderIconToolbar.scss\";\nimport * as React from \"react\";\nimport {\n  ButtonGroup,\n  Divider,\n  DropdownMenu,\n  IconButton,\n  MenuDivider,\n  MenuItem,\n  Text,\n  Tooltip,\n} from \"@itwin/itwinui-react\";\nimport { SvgMore, SvgSearch } from \"@itwin/itwinui-icons-react\";\nimport { HeaderSearch } from \"./HeaderSearch.js\";\nimport type { WidgetContentLayout } from \"../WidgetContentLayout.js\";\n\ntype WidgetContentLayoutHeaderProps = React.ComponentProps<\n  typeof WidgetContentLayout.Header\n>;\ntype IconMenu = NonNullable<WidgetContentLayoutHeaderProps[\"icons\"]>[number];\n\ninterface IconMenuSearch {\n  type: \"search\";\n}\n\ntype SearchExpandedState = [\n  boolean,\n  React.Dispatch<React.SetStateAction<boolean>>\n];\n\ninterface HeaderIconToolbarProps\n  extends Pick<WidgetContentLayoutHeaderProps, \"iconSize\" | \"onSearch\"> {\n  /** Array of icon menu items to display, including regular icons, search, and dividers. */\n  menuIcons: (IconMenu | IconMenuSearch)[];\n  /** State tuple controlling whether the search box is expanded or collapsed. */\n  searchExpandedState: SearchExpandedState;\n}\n\n/**\n * Header toolbar component that displays menu icons with overflow handling.\n * Renders a button group with icons, search functionality, and an overflow menu.\n * Icons that don't fit in the available space are moved into a dropdown menu.\n * @internal\n */\nexport function HeaderIconToolbar(props: HeaderIconToolbarProps) {\n  const [searchIsExpanded, setSearchIsExpanded] = props.searchExpandedState;\n  const searchState = React.useState(\"\");\n\n  return (\n    <div\n      className=\"nz-widget-widgetContentLayout-header-headerIconToolbar\"\n      data-_appui-icon-size={props.iconSize}\n      data-_appui-search-expanded={searchIsExpanded ? \"true\" : \"false\"}\n      data-_appui-single-item={props.menuIcons.length === 1 ? \"true\" : \"false\"}\n    >\n      <ButtonGroup\n        key={String(searchIsExpanded)}\n        className=\"nz-buttonGroup\"\n        overflowPlacement=\"end\"\n        overflowButton={(overflowStart) => (\n          <DropdownMenu\n            menuItems={(close) =>\n              Array(props.menuIcons.length - overflowStart)\n                .fill(null)\n                .map((_, _index) => {\n                  const index = overflowStart + _index;\n                  const icon = props.menuIcons.at(index);\n                  if (!icon) return <></>;\n                  return icon.type === \"divider\" ? (\n                    _index === 0 || searchIsExpanded ? (\n                      <React.Fragment key={index}></React.Fragment>\n                    ) : (\n                      <MenuDivider key={index} />\n                    )\n                  ) : icon.type === \"search\" ? (\n                    !searchIsExpanded ? (\n                      <MenuItem\n                        key={index}\n                        onClick={() => {\n                          close();\n                          setSearchIsExpanded(true);\n                        }}\n                        startIcon={<SvgSearch />}\n                      >\n                        Search\n                      </MenuItem>\n                    ) : (\n                      <React.Fragment key={index}></React.Fragment>\n                    )\n                  ) : icon.tooltipContent ? (\n                    <Tooltip content={icon.tooltipContent} key={index}>\n                      <MenuItem\n                        isSelected={icon.isActive}\n                        disabled={icon.disabled}\n                        key={index}\n                        onClick={() => {\n                          icon.onClick();\n                          close();\n                        }}\n                        startIcon={<>{icon.icon}</>}\n                      >\n                        {icon.label}\n                      </MenuItem>\n                    </Tooltip>\n                  ) : (\n                    <MenuItem\n                      isSelected={icon.isActive}\n                      disabled={icon.disabled}\n                      key={index}\n                      onClick={() => {\n                        icon.onClick();\n                        close();\n                      }}\n                      startIcon={<>{icon.icon}</>}\n                    >\n                      {icon.label}\n                    </MenuItem>\n                  );\n                })\n            }\n          >\n            <IconButton\n              size={props.iconSize}\n              styleType=\"borderless\"\n              aria-label=\"More\"\n            >\n              <SvgMore />\n            </IconButton>\n          </DropdownMenu>\n        )}\n      >\n        {props.menuIcons.map((icon, index) =>\n          icon.type === \"divider\" ? (\n            <Divider\n              orientation=\"vertical\"\n              key={icon.key ?? `divider-${index}`}\n            />\n          ) : icon.type === \"search\" ? (\n            <HeaderSearch\n              key=\"search\"\n              searchExpandedState={props.searchExpandedState}\n              searchState={searchState}\n              iconSize={props.iconSize}\n              onSearch={props.onSearch}\n            />\n          ) : (\n            <IconButton\n              disabled={icon.disabled}\n              label={\n                icon.tooltipContent ? (\n                  <div className=\"nz-widget-widgetContentLayout-header-headerIconToolbar-iconButton-tooltip\">\n                    <Text variant=\"small\">{icon.label}</Text>\n                    <Text isMuted variant=\"small\">\n                      {icon.tooltipContent}\n                    </Text>\n                  </div>\n                ) : (\n                  icon.label\n                )\n              }\n              key={icon.label}\n              size={props.iconSize}\n              styleType=\"borderless\"\n              onClick={icon.onClick}\n              labelProps={{ placement: \"bottom\" }}\n              isActive={icon.isActive}\n              className=\"nz-iconButton\"\n            >\n              {icon.icon}\n            </IconButton>\n          )\n        )}\n      </ButtonGroup>\n    </div>\n  );\n}\n"]}

package/lib/appui-react/layout/widget/widget-content-layout/header/HeaderTopBar.js

@@ -28,7 +28,7 @@ export function HeaderTopBar(props) {
     }, [props.icons, props.onSearch]);
     const searchExpandedState = React.useState(false);
     return (React.createElement("div", { className: classNames("nz-widget-widgetContentLayout-header-headerTopBar", (props.primaryContent.length === 0 || menuIcons.length === 0) &&
-            "nz-singleColumn"), "data-search-expanded": searchExpandedState[0] ? "true" : "false" },
+            "nz-singleColumn"), "data-search-expanded": searchExpandedState[0] },
         props.primaryContent.length > 0 && (React.createElement("div", { className: "nz-primaryContent" }, props.primaryContent)),
         menuIcons.length > 0 && (React.createElement(HeaderIconToolbar, { menuIcons: menuIcons, onSearch: props.onSearch, searchExpandedState: searchExpandedState, iconSize: props.iconSize }))));
 }

package/lib/appui-react/layout/widget/widget-content-layout/header/HeaderTopBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderTopBar.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/widget/widget-content-layout/header/HeaderTopBar.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,qBAAqB,CAAC;AAC7B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAgB3D;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACnC,IAAI,KAAK,GAAwC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;QACnE,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;gBAClB,KAAK,GAAG;oBACN,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,EAAE,gBAAgB,EAAE;oBAC1C,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAC3B,IAAI,CAAC,IAAI,KAAK,SAAS;wBACrB,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,WAAW,KAAK,EAAE,EAAE;wBACtC,CAAC,CAAC,IAAI,CACT;iBACF,CAAC;YACJ,KAAK,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,GAAG,KAAK,CAAC,CAAC;QACzC,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAElC,MAAM,mBAAmB,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,OAAO,CACL,6BACE,SAAS,EAAE,UAAU,CACnB,mDAAmD,EACnD,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,CAAC;YAC3D,iBAAiB,CACpB,0BACqB,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;QAE9D,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,IAAI,CAClC,6BAAK,SAAS,EAAC,mBAAmB,IAAE,KAAK,CAAC,cAAc,CAAO,CAChE;QACA,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,CACvB,oBAAC,iBAAiB,IAChB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,mBAAmB,EAAE,mBAAmB,EACxC,QAAQ,EAAE,KAAK,CAAC,QAAQ,GACxB,CACH,CACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport \"./HeaderTopBar.scss\";\nimport classNames from \"classnames\";\nimport * as React from \"react\";\n\nimport { HeaderIconToolbar } from \"./HeaderIconToolbar.js\";\nimport type { WidgetContentLayout } from \"../WidgetContentLayout.js\";\n\ntype WidgetContentLayoutHeaderProps = React.ComponentProps<\n  typeof WidgetContentLayout.Header\n>;\ntype HeaderIconToolbarProps = React.ComponentProps<typeof HeaderIconToolbar>;\n\ninterface HeaderTopBarProps\n  extends Pick<\n    WidgetContentLayoutHeaderProps,\n    \"icons\" | \"onSearch\" | \"iconSize\"\n  > {\n  primaryContent: React.JSX.Element[];\n}\n\n/**\n * Internal layout component that renders the top bar of the widget header,\n * including optional left content and a top-right icon/search area.\n * @internal\n */\nexport function HeaderTopBar(props: HeaderTopBarProps) {\n  const menuIcons = React.useMemo(() => {\n    let icons: HeaderIconToolbarProps[\"menuIcons\"] = props.icons || [];\n    if (props.onSearch) {\n      if (icons.length > 0)\n        icons = [\n          { type: \"divider\", key: \"search-divider\" },\n          ...icons.map((icon, index) =>\n            icon.type === \"divider\"\n              ? { ...icon, key: `divider-${index}` }\n              : icon\n          ),\n        ];\n      icons = [{ type: \"search\" }, ...icons];\n    }\n    return icons;\n  }, [props.icons, props.onSearch]);\n\n  const searchExpandedState = React.useState(false);\n\n  return (\n    <div\n      className={classNames(\n        \"nz-widget-widgetContentLayout-header-headerTopBar\",\n        (props.primaryContent.length === 0 || menuIcons.length === 0) &&\n          \"nz-singleColumn\"\n      )}\n      data-search-expanded={searchExpandedState[0] ? \"true\" : \"false\"}\n    >\n      {props.primaryContent.length > 0 && (\n        <div className=\"nz-primaryContent\">{props.primaryContent}</div>\n      )}\n      {menuIcons.length > 0 && (\n        <HeaderIconToolbar\n          menuIcons={menuIcons}\n          onSearch={props.onSearch}\n          searchExpandedState={searchExpandedState}\n          iconSize={props.iconSize}\n        />\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"HeaderTopBar.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/widget/widget-content-layout/header/HeaderTopBar.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,qBAAqB,CAAC;AAC7B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAgB3D;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACnC,IAAI,KAAK,GAAwC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;QACnE,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;gBAClB,KAAK,GAAG;oBACN,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,EAAE,gBAAgB,EAAE;oBAC1C,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAC3B,IAAI,CAAC,IAAI,KAAK,SAAS;wBACrB,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,WAAW,KAAK,EAAE,EAAE;wBACtC,CAAC,CAAC,IAAI,CACT;iBACF,CAAC;YACJ,KAAK,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,GAAG,KAAK,CAAC,CAAC;QACzC,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAElC,MAAM,mBAAmB,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,OAAO,CACL,6BACE,SAAS,EAAE,UAAU,CACnB,mDAAmD,EACnD,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,CAAC;YAC3D,iBAAiB,CACpB,0BACqB,mBAAmB,CAAC,CAAC,CAAC;QAE3C,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,IAAI,CAClC,6BAAK,SAAS,EAAC,mBAAmB,IAAE,KAAK,CAAC,cAAc,CAAO,CAChE;QACA,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,CACvB,oBAAC,iBAAiB,IAChB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,mBAAmB,EAAE,mBAAmB,EACxC,QAAQ,EAAE,KAAK,CAAC,QAAQ,GACxB,CACH,CACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport \"./HeaderTopBar.scss\";\nimport classNames from \"classnames\";\nimport * as React from \"react\";\n\nimport { HeaderIconToolbar } from \"./HeaderIconToolbar.js\";\nimport type { WidgetContentLayout } from \"../WidgetContentLayout.js\";\n\ntype WidgetContentLayoutHeaderProps = React.ComponentProps<\n  typeof WidgetContentLayout.Header\n>;\ntype HeaderIconToolbarProps = React.ComponentProps<typeof HeaderIconToolbar>;\n\ninterface HeaderTopBarProps\n  extends Pick<\n    WidgetContentLayoutHeaderProps,\n    \"icons\" | \"onSearch\" | \"iconSize\"\n  > {\n  primaryContent: React.JSX.Element[];\n}\n\n/**\n * Internal layout component that renders the top bar of the widget header,\n * including optional left content and a top-right icon/search area.\n * @internal\n */\nexport function HeaderTopBar(props: HeaderTopBarProps) {\n  const menuIcons = React.useMemo(() => {\n    let icons: HeaderIconToolbarProps[\"menuIcons\"] = props.icons || [];\n    if (props.onSearch) {\n      if (icons.length > 0)\n        icons = [\n          { type: \"divider\", key: \"search-divider\" },\n          ...icons.map((icon, index) =>\n            icon.type === \"divider\"\n              ? { ...icon, key: `divider-${index}` }\n              : icon\n          ),\n        ];\n      icons = [{ type: \"search\" }, ...icons];\n    }\n    return icons;\n  }, [props.icons, props.onSearch]);\n\n  const searchExpandedState = React.useState(false);\n\n  return (\n    <div\n      className={classNames(\n        \"nz-widget-widgetContentLayout-header-headerTopBar\",\n        (props.primaryContent.length === 0 || menuIcons.length === 0) &&\n          \"nz-singleColumn\"\n      )}\n      data-search-expanded={searchExpandedState[0]}\n    >\n      {props.primaryContent.length > 0 && (\n        <div className=\"nz-primaryContent\">{props.primaryContent}</div>\n      )}\n      {menuIcons.length > 0 && (\n        <HeaderIconToolbar\n          menuIcons={menuIcons}\n          onSearch={props.onSearch}\n          searchExpandedState={searchExpandedState}\n          iconSize={props.iconSize}\n        />\n      )}\n    </div>\n  );\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/appui-react",
-  "version": "5.23.1",
+  "version": "5.24.0",
   "description": "A react component library for AppUI framework",
   "type": "module",
   "types": "./lib/appui-react.d.ts",
@@ -45,9 +45,9 @@
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-redux": "^7.2.2 || ^8.0.0 || ^9.0.0",
     "redux": "^4.1.0 || ^5.0.0",
-    "@itwin/components-react": "5.23.1",
-    "@itwin/core-react": "5.23.1",
-    "@itwin/imodel-components-react": "5.23.1"
+    "@itwin/components-react": "5.24.0",
+    "@itwin/core-react": "5.24.0",
+    "@itwin/imodel-components-react": "5.24.0"
   },
   "devDependencies": {
     "@itwin/appui-abstract": "^5.1.0",
@@ -90,9 +90,9 @@
     "typescript": "~5.6.2",
     "upath": "^2.0.1",
     "vitest": "^3.2.4",
-    "@itwin/components-react": "5.23.1",
-    "@itwin/core-react": "5.23.1",
-    "@itwin/imodel-components-react": "5.23.1"
+    "@itwin/components-react": "5.24.0",
+    "@itwin/core-react": "5.24.0",
+    "@itwin/imodel-components-react": "5.24.0"
   },
   "dependencies": {
     "@itwin/itwinui-icons-react": "^2.8.0",