npm - @itwin/appui-react - Versions diffs - 5.21.1 → 5.23.0 - Mend

@itwin/appui-react 5.21.1 → 5.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (56) hide show

package/lib/appui-react/layout/widget/Overflow.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Overflow.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/Overflow.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,iBAAiB,CAAC;AAEzB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,UAAU,mBAAmB;IAC3B,KAAK,EAAE,KAAK,CAAC,YAAY,EAAE,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED,gBAAgB;AAChB,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,~~qBAoCxD~~;AAED,UAAU,yBAAyB;IACjC,KAAK,IAAI,IAAI,CAAC;CACf;AAED,gBAAgB;AAChB,eAAO,MAAM,qBAAqB,sDAEtB,CAAC"}
1	+ {"version":3,"file":"Overflow.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/Overflow.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,iBAAiB,CAAC;AAEzB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,UAAU,mBAAmB;IAC3B,KAAK,EAAE,KAAK,CAAC,YAAY,EAAE,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED,gBAAgB;AAChB,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAqCxD;AAED,UAAU,yBAAyB;IACjC,KAAK,IAAI,IAAI,CAAC;CACf;AAED,gBAAgB;AAChB,eAAO,MAAM,qBAAqB,sDAEtB,CAAC"}

package/lib/appui-react/layout/widget/Overflow.js CHANGED Viewed

@@ -31,7 +31,7 @@ export function WidgetOverflow(props) {
     const { translate } = useTranslation();
     const moreWidgetsTitle = translate("widget.tooltips.moreWidgets");
     return (React.createElement(WidgetOverflowContext.Provider, { value: overflowContext },
-        React.createElement(DropdownMenu, { className: "nz-widget-overflow_menu", menuItems: props.items, visible: open, onVisibleChange: setOpen },
+        React.createElement(DropdownMenu, { className: "nz-widget-overflow_menu", menuItems: props.items, visible: open, onVisibleChange: setOpen, closeOnItemClick: false },
             React.createElement(TabBarButton, { label: moreWidgetsTitle, className: classnames("nz-widget-overflow", props.hidden && "nz-hidden"), ref: resizeObserverRef },
                 React.createElement(SvgChevronRightSmall, null)))));
 }

package/lib/appui-react/layout/widget/Overflow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Overflow.js","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/Overflow.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,iBAAiB,CAAC;AACzB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAQ/D,gBAAgB;AAChB,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,iBAAiB,GAAG,iBAAiB,CAAiB,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC5E,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,OAAO,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,aAAa,CAAC,WAAW,CAAC,CAAC;IAC3B,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CAA4B,GAAG,EAAE;QACpE,OAAO;YACL,KAAK,EAAE,WAAW;SACnB,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,EAAE,SAAS,EAAE,GAAG,cAAc,EAAE,CAAC;IACvC,MAAM,gBAAgB,GAAG,SAAS,CAAC,6BAA6B,CAAC,CAAC;IAClE,OAAO,CACL,oBAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,eAAe;QACpD,oBAAC,YAAY,IACX,SAAS,EAAC,yBAAyB,EACnC,SAAS,EAAE,KAAK,CAAC,KAAK,EACtB,OAAO,EAAE,IAAI,EACb,eAAe,EAAE,OAAO;~~YAExB~~,oBAAC,YAAY,IACX,KAAK,EAAE,gBAAgB,EACvB,SAAS,EAAE,UAAU,CACnB,oBAAoB,EACpB,KAAK,CAAC,MAAM,IAAI,WAAW,CAC5B,EACD,GAAG,EAAE,iBAAiB;gBAEtB,oBAAC,oBAAoB,OAAG,CACX,CACF,CACgB,CAClC,CAAC;AACJ,CAAC;AAMD,gBAAgB;AAChB,MAAM,CAAC,MAAM,qBAAqB,GAAG,KAAK,CAAC,aAAa,CAEtD,SAAS,CAAC,CAAC;AACb,qBAAqB,CAAC,WAAW,GAAG,0BAA0B,CAAC;AAE/D,SAAS,aAAa,CAAC,OAAmB;IACxC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAChD,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE,CACpC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAC5C,CAAC;IACF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,SAAS,EAAE,CAAC;YACd,OAAO,EAAE,CAAC;QACZ,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;AAC3B,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/** @packageDocumentation\n * @module Widget\n /\n\nimport \"./Overflow.scss\";\nimport classnames from \"classnames\";\nimport as React from \"react\";\nimport { useResizeObserver } from \"@itwin/core-react/internal\";\nimport { PanelSideContext } from \"../widget-panels/Panel.js\";\nimport { useLayout } from \"../base/LayoutStore.js\";\nimport { DropdownMenu } from \"@itwin/itwinui-react\";\nimport { SvgChevronRightSmall } from \"@itwin/itwinui-icons-react\";\nimport { TabBarButton } from \"./Button.js\";\nimport { useTranslation } from \"../../hooks/useTranslation.js\";\n\ninterface WidgetOverflowProps {\n items: React.ReactElement[];\n hidden?: boolean;\n onResize?: (w: number) => void;\n}\n\n/** @internal /\nexport function WidgetOverflow(props: WidgetOverflowProps) {\n const [open, setOpen] = React.useState(false);\n const resizeObserverRef = useResizeObserver<HTMLDivElement>(props.onResize);\n const handleClose = React.useCallback(() => {\n setOpen(false);\n }, []);\n usePanelPopup(handleClose);\n const overflowContext = React.useMemo<WidgetOverflowContextArgs>(() => {\n return {\n close: handleClose,\n };\n }, [handleClose]);\n\n const { translate } = useTranslation();\n const moreWidgetsTitle = translate(\"widget.tooltips.moreWidgets\");\n return (\n <WidgetOverflowContext.Provider value={overflowContext}>\n <DropdownMenu\n className=\"nz-widget-overflow_menu\"\n menuItems={props.items}\n visible={open}\n onVisibleChange={setOpen}\n >\n <TabBarButton\n label={moreWidgetsTitle}\n className={classnames(\n \"nz-widget-overflow\",\n props.hidden && \"nz-hidden\"\n )}\n ref={resizeObserverRef}\n >\n <SvgChevronRightSmall />\n </TabBarButton>\n </DropdownMenu>\n </WidgetOverflowContext.Provider>\n );\n}\n\ninterface WidgetOverflowContextArgs {\n close(): void;\n}\n\n/* @internal */\nexport const WidgetOverflowContext = React.createContext<\n WidgetOverflowContextArgs \| undefined\n>(undefined);\nWidgetOverflowContext.displayName = \"nz:WidgetOverflowContext\";\n\nfunction usePanelPopup(onClose: () => void) {\n const side = React.useContext(PanelSideContext);\n const collapsed = useLayout((state) =>\n side ? state.panels[side].collapsed : false\n );\n React.useEffect(() => {\n if (collapsed) {\n onClose();\n }\n }, [collapsed, onClose]);\n}\n"]}
1	+ {"version":3,"file":"Overflow.js","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/Overflow.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,iBAAiB,CAAC;AACzB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAQ/D,gBAAgB;AAChB,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,iBAAiB,GAAG,iBAAiB,CAAiB,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC5E,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,OAAO,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,aAAa,CAAC,WAAW,CAAC,CAAC;IAC3B,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CAA4B,GAAG,EAAE;QACpE,OAAO;YACL,KAAK,EAAE,WAAW;SACnB,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,EAAE,SAAS,EAAE,GAAG,cAAc,EAAE,CAAC;IACvC,MAAM,gBAAgB,GAAG,SAAS,CAAC,6BAA6B,CAAC,CAAC;IAClE,OAAO,CACL,oBAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,eAAe;QACpD,oBAAC,YAAY,IACX,SAAS,EAAC,yBAAyB,EACnC,SAAS,EAAE,KAAK,CAAC,KAAK,EACtB,OAAO,EAAE,IAAI,EACb,eAAe,EAAE,OAAO,EACxB,gBAAgB,EAAE,KAAK;YAEvB,oBAAC,YAAY,IACX,KAAK,EAAE,gBAAgB,EACvB,SAAS,EAAE,UAAU,CACnB,oBAAoB,EACpB,KAAK,CAAC,MAAM,IAAI,WAAW,CAC5B,EACD,GAAG,EAAE,iBAAiB;gBAEtB,oBAAC,oBAAoB,OAAG,CACX,CACF,CACgB,CAClC,CAAC;AACJ,CAAC;AAMD,gBAAgB;AAChB,MAAM,CAAC,MAAM,qBAAqB,GAAG,KAAK,CAAC,aAAa,CAEtD,SAAS,CAAC,CAAC;AACb,qBAAqB,CAAC,WAAW,GAAG,0BAA0B,CAAC;AAE/D,SAAS,aAAa,CAAC,OAAmB;IACxC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAChD,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE,CACpC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAC5C,CAAC;IACF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,SAAS,EAAE,CAAC;YACd,OAAO,EAAE,CAAC;QACZ,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;AAC3B,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/** @packageDocumentation\n * @module Widget\n /\n\nimport \"./Overflow.scss\";\nimport classnames from \"classnames\";\nimport as React from \"react\";\nimport { useResizeObserver } from \"@itwin/core-react/internal\";\nimport { PanelSideContext } from \"../widget-panels/Panel.js\";\nimport { useLayout } from \"../base/LayoutStore.js\";\nimport { DropdownMenu } from \"@itwin/itwinui-react\";\nimport { SvgChevronRightSmall } from \"@itwin/itwinui-icons-react\";\nimport { TabBarButton } from \"./Button.js\";\nimport { useTranslation } from \"../../hooks/useTranslation.js\";\n\ninterface WidgetOverflowProps {\n items: React.ReactElement[];\n hidden?: boolean;\n onResize?: (w: number) => void;\n}\n\n/** @internal /\nexport function WidgetOverflow(props: WidgetOverflowProps) {\n const [open, setOpen] = React.useState(false);\n const resizeObserverRef = useResizeObserver<HTMLDivElement>(props.onResize);\n const handleClose = React.useCallback(() => {\n setOpen(false);\n }, []);\n usePanelPopup(handleClose);\n const overflowContext = React.useMemo<WidgetOverflowContextArgs>(() => {\n return {\n close: handleClose,\n };\n }, [handleClose]);\n\n const { translate } = useTranslation();\n const moreWidgetsTitle = translate(\"widget.tooltips.moreWidgets\");\n return (\n <WidgetOverflowContext.Provider value={overflowContext}>\n <DropdownMenu\n className=\"nz-widget-overflow_menu\"\n menuItems={props.items}\n visible={open}\n onVisibleChange={setOpen}\n closeOnItemClick={false}\n >\n <TabBarButton\n label={moreWidgetsTitle}\n className={classnames(\n \"nz-widget-overflow\",\n props.hidden && \"nz-hidden\"\n )}\n ref={resizeObserverRef}\n >\n <SvgChevronRightSmall />\n </TabBarButton>\n </DropdownMenu>\n </WidgetOverflowContext.Provider>\n );\n}\n\ninterface WidgetOverflowContextArgs {\n close(): void;\n}\n\n/* @internal */\nexport const WidgetOverflowContext = React.createContext<\n WidgetOverflowContextArgs \| undefined\n>(undefined);\nWidgetOverflowContext.displayName = \"nz:WidgetOverflowContext\";\n\nfunction usePanelPopup(onClose: () => void) {\n const side = React.useContext(PanelSideContext);\n const collapsed = useLayout((state) =>\n side ? state.panels[side].collapsed : false\n );\n React.useEffect(() => {\n if (collapsed) {\n onClose();\n }\n }, [collapsed, onClose]);\n}\n"]}

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

@@ -0,0 +1,115 @@
+/** @packageDocumentation
+ * @module WidgetContentLayout
+ */
+import "./WidgetContentLayout.scss";
+import type { ComponentPropsWithRef } from "react";
+import * as React from "react";
+import type { ToggleSwitch } from "@itwin/itwinui-react";
+type IconMenu = IconMenuButton | IconMenuDivider;
+interface IconMenuButton {
+    icon: React.ReactNode;
+    onClick: () => void;
+    label: string;
+    type?: "button";
+    disabled?: boolean;
+    isActive?: boolean;
+}
+interface IconMenuDivider {
+    type: "divider";
+    key?: string;
+}
+interface WidgetContentLayoutHeaderProps extends ComponentPropsWithRef<"div"> {
+    /**
+     * Toggle switch in the header.
+     */
+    toggle?: React.ComponentProps<typeof ToggleSwitch>;
+    /**
+     * Array of buttons to display in the header.
+     */
+    buttons?: React.ReactNode[];
+    /**
+     * Menu in the header.
+     */
+    menu?: {
+        title: string;
+        items: {
+            label: string;
+            onClick: () => void;
+        }[];
+    };
+    /**
+     * Title to display in the header.
+     */
+    title?: string;
+    /**
+     * Callback function for search functionality.
+     */
+    onSearch?: (value: string) => void;
+    /**
+     * Array of icon menu items to display in the header.
+     */
+    icons?: IconMenu[];
+    /**
+     * Size of the icons.
+     */
+    iconSize?: "small" | "large";
+    /**
+     * Child elements to render within the header.
+     */
+    children?: React.ReactNode;
+}
+interface WidgetContentLayoutBodyProps extends ComponentPropsWithRef<"div"> {
+    /**
+     * Whether the body is in a loading state.
+     */
+    isLoading?: boolean;
+    /**
+     * Whether to show a non-blocking loading indicator.
+     */
+    isNonBlockingLoading?: boolean;
+    /**
+     * Child elements to render within the body.
+     */
+    children?: React.ReactNode;
+}
+interface WidgetContentLayoutFooterProps extends ComponentPropsWithRef<"div"> {
+    /**
+     * Child elements to render within the footer.
+     */
+    children?: React.ReactNode;
+}
+interface WidgetContentLayoutProps extends ComponentPropsWithRef<"div"> {
+    /**
+     * Whether the entire layout is in a loading state.
+     */
+    isLoading?: boolean;
+    /**
+     * Whether to hide dividers between sections.
+     */
+    hideDividers?: boolean;
+    /**
+     * Child elements (Header, Body, Footer) to render.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * A layout component for widgets that provides a top section for buttons, a body section and a footer section.
+ * @example
+ * <WidgetContentLayout>
+ *  <WidgetContentLayout.Header />
+ *  <WidgetContentLayout.Body>
+ *   <ContentComponent />
+ *  </WidgetContentLayout.Body>
+ *  <WidgetContentLayout.Footer>
+ *   <FooterComponent />
+ *  </WidgetContentLayout.Footer>
+ * </WidgetContentLayout>
+ *  @public
+ */
+export declare const WidgetContentLayout: React.ForwardRefExoticComponent<Omit<WidgetContentLayoutProps, "ref"> & React.RefAttributes<HTMLDivElement>> & {
+    Header: React.ForwardRefExoticComponent<Omit<WidgetContentLayoutHeaderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Body: React.ForwardRefExoticComponent<Omit<WidgetContentLayoutBodyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Footer: React.ForwardRefExoticComponent<Omit<WidgetContentLayoutFooterProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export {};
+//# sourceMappingURL=WidgetContentLayout.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,82 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module WidgetContentLayout
+ */
+import "./WidgetContentLayout.scss";
+import classNames from "classnames";
+import * as React from "react";
+import { Divider, ProgressLinear, ProgressRadial } from "@itwin/itwinui-react";
+import { HeaderLayout } from "./header/HeaderLayout.js";
+const Header = React.forwardRef(function Header(props, ref) {
+    const { className, children, toggle, buttons, menu, title, onSearch, icons, iconSize, ...rest } = props;
+    return (React.createElement("div", { className: classNames("nz-widget-widgetContentLayout-header", className), ...rest, ref: ref },
+        React.createElement(HeaderLayout, { toggle: toggle, buttons: buttons, menu: menu, title: title, onSearch: onSearch, icons: icons, iconSize: iconSize }),
+        children));
+});
+Header.displayName = "appui:WidgetContentLayout.Header";
+const Body = React.forwardRef(function Body(props, ref) {
+    const { isNonBlockingLoading, isLoading, className, children, ...rest } = props;
+    return (React.createElement("div", { className: "nz-widget-widgetContentLayout-body_wrapper" },
+        isLoading ? (React.createElement(LoadingOverlay, null)) : (isNonBlockingLoading && (React.createElement(ProgressLinear, { className: "nz-widget-widgetContentLayout-progress" }))),
+        React.createElement("div", { className: classNames("nz-widget-widgetContentLayout-body", className), ...rest, ref: ref }, children)));
+});
+Body.displayName = "appui:WidgetContentLayout.Body";
+const Footer = React.forwardRef(function Footer(props, ref) {
+    const { className, children, ...rest } = props;
+    return (React.createElement("div", { className: classNames("nz-widget-widgetContentLayout-footer", className), ...rest, ref: ref }, children));
+});
+Footer.displayName = "appui:WidgetContentLayout.Footer";
+function LoadingOverlay() {
+    return (React.createElement("div", { className: "nz-widget-widgetContentLayout-loadingOverlay" },
+        React.createElement(ProgressRadial, null)));
+}
+const WidgetContentLayoutInner = React.forwardRef(function WidgetContentLayoutInner(props, ref) {
+    const { isLoading, hideDividers, children, className, ...divProps } = props;
+    const [headerElement, setHeaderElement] = React.useState();
+    const [bodyElement, setBodyElement] = React.useState();
+    const [footerElement, setFooterElement] = React.useState();
+    React.useEffect(() => {
+        React.Children.forEach(children, (child) => {
+            if (!React.isValidElement(child))
+                return;
+            if (child.type === Header)
+                setHeaderElement(child);
+            else if (child.type === Body)
+                setBodyElement(child);
+            else if (child.type === Footer)
+                setFooterElement(child);
+        });
+    }, [children]);
+    const widgetComponents = [headerElement, bodyElement, footerElement].filter(Boolean);
+    return (React.createElement("div", { className: classNames("nz-widget-widgetContentLayout", className), ...divProps, ref: ref },
+        isLoading && React.createElement(LoadingOverlay, null),
+        widgetComponents.map((component, index) => (React.createElement(React.Fragment, { key: index },
+            component,
+            index < widgetComponents.length - 1 && !hideDividers && (React.createElement(Divider, { className: "nz-widget-widgetContentLayout-divider" })))))));
+});
+/**
+ * A layout component for widgets that provides a top section for buttons, a body section and a footer section.
+ * @example
+ * <WidgetContentLayout>
+ *  <WidgetContentLayout.Header />
+ *  <WidgetContentLayout.Body>
+ *   <ContentComponent />
+ *  </WidgetContentLayout.Body>
+ *  <WidgetContentLayout.Footer>
+ *   <FooterComponent />
+ *  </WidgetContentLayout.Footer>
+ * </WidgetContentLayout>
+ *  @public
+ */
+export const WidgetContentLayout = Object.assign(WidgetContentLayoutInner, {
+    Header,
+    Body,
+    Footer,
+});
+WidgetContentLayout.Header = Header;
+WidgetContentLayout.Body = Body;
+WidgetContentLayout.Footer = Footer;
+//# sourceMappingURL=WidgetContentLayout.js.map

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

@@ -0,0 +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"]}

package/lib/appui-react/layout/widget/widget-content-layout/WidgetContentLayout.scss ADDED Viewed

@@ -0,0 +1,68 @@
+@layer appui.component {
+  .nz-widget-widgetContentLayout {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+  }
+  .nz-widget-widgetContentLayout-header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--iui-size-s);
+    padding: var(--iui-size-s);
+  }
+  .nz-widget-widgetContentLayout-body_wrapper {
+    position: relative;
+    flex: 1;
+    height: 0px;
+    width: 100%;
+    display: grid;
+    gap: var(--iui-size-s);
+    .nz-widget-widgetContentLayout-progress {
+      padding-inline: var(--iui-size-s);
+      /* check if it has sibling with classname .nz-widget-widgetContentLayout-body */
+      + .nz-widget-widgetContentLayout-body {
+        padding-block-start: 0px;
+      }
+    }
+    .nz-widget-widgetContentLayout-body {
+      display: flex;
+      width: 100%;
+      flex-direction: column;
+      gap: var(--iui-size-s);
+      flex: 1;
+      overflow: auto;
+      padding: var(--iui-size-s);
+    }
+  }
+  .nz-widget-widgetContentLayout-footer {
+    display: flex;
+    gap: var(--iui-size-s);
+    justify-content: flex-end;
+    width: 100%;
+    padding: var(--iui-size-s);
+  }
+  .nz-widget-widgetContentLayout-loadingOverlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: grid;
+    place-items: center;
+    z-index: 1000;
+    backdrop-filter: blur(5px);
+  }
+  .nz-widget-widgetContentLayout-divider {
+    margin-inline: var(--iui-size-s);
+  }
+}

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

@@ -0,0 +1,27 @@
+import "./HeaderIconToolbar.scss";
+import * as React from "react";
+import type { WidgetContentLayout } from "../WidgetContentLayout.js";
+type WidgetContentLayoutHeaderProps = React.ComponentProps<typeof WidgetContentLayout.Header>;
+type IconMenu = NonNullable<WidgetContentLayoutHeaderProps["icons"]>[number];
+interface IconMenuSearch {
+    type: "search";
+}
+type SearchExpandedState = [
+    boolean,
+    React.Dispatch<React.SetStateAction<boolean>>
+];
+interface HeaderIconToolbarProps extends Pick<WidgetContentLayoutHeaderProps, "iconSize" | "onSearch"> {
+    /** Array of icon menu items to display, including regular icons, search, and dividers. */
+    menuIcons: (IconMenu | IconMenuSearch)[];
+    /** State tuple controlling whether the search box is expanded or collapsed. */
+    searchExpandedState: SearchExpandedState;
+}
+/**
+ * Header toolbar component that displays menu icons with overflow handling.
+ * Renders a button group with icons, search functionality, and an overflow menu.
+ * Icons that don't fit in the available space are moved into a dropdown menu.
+ * @internal
+ */
+export declare function HeaderIconToolbar(props: HeaderIconToolbarProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=HeaderIconToolbar.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,38 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import "./HeaderIconToolbar.scss";
+import * as React from "react";
+import { ButtonGroup, Divider, DropdownMenu, IconButton, MenuDivider, MenuItem, } from "@itwin/itwinui-react";
+import { SvgMore, SvgSearch } from "@itwin/itwinui-icons-react";
+import { HeaderSearch } from "./HeaderSearch.js";
+/**
+ * Header toolbar component that displays menu icons with overflow handling.
+ * Renders a button group with icons, search functionality, and an overflow menu.
+ * Icons that don't fit in the available space are moved into a dropdown menu.
+ * @internal
+ */
+export function HeaderIconToolbar(props) {
+    const [searchIsExpanded, setSearchIsExpanded] = props.searchExpandedState;
+    const searchState = React.useState("");
+    return (React.createElement("div", { className: "nz-widget-widgetContentLayout-header-headerIconToolbar", "data-_appui-icon-size": props.iconSize, "data-_appui-search-expanded": searchIsExpanded ? "true" : "false", "data-_appui-single-item": props.menuIcons.length === 1 ? "true" : "false" },
+        React.createElement(ButtonGroup, { key: String(searchIsExpanded), className: "nz-buttonGroup", overflowPlacement: "end", overflowButton: (overflowStart) => (React.createElement(DropdownMenu, { menuItems: (close) => Array(props.menuIcons.length - overflowStart)
+                    .fill(null)
+                    .map((_, _index) => {
+                    const index = overflowStart + _index;
+                    const icon = props.menuIcons.at(index);
+                    if (!icon)
+                        return React.createElement(React.Fragment, null);
+                    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: () => {
+                            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))))));
+}
+//# sourceMappingURL=HeaderIconToolbar.js.map

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

@@ -0,0 +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"]}

package/lib/appui-react/layout/widget/widget-content-layout/header/HeaderIconToolbar.scss ADDED Viewed

@@ -0,0 +1,44 @@
+@layer appui.component {
+  .nz-widget-widgetContentLayout-header-headerIconToolbar {
+    --_appui-icon-size: var(--iui-component-height);
+    --_appui-max-search-width: 200px;
+    min-width: var(--_appui-icon-size);
+    min-height: var(--_appui-icon-size);
+    &[data-_appui-icon-size="small"] {
+      --icon-size: var(--iui-component-height-small);
+    }
+    &[data-_appui-icon-size="large"] {
+      --icon-size: var(--iui-component-height-large);
+    }
+    &[data-_appui-search-expanded="true"] {
+      &[data-_appui-single-item="true"] {
+        min-width: var(--_appui-max-search-width);
+      }
+      &[data-_appui-single-item="false"] {
+        min-width: calc(
+          var(--_appui-max-search-width) + var(--_appui-icon-size) +
+            var(--iui-size-s)
+        );
+      }
+    }
+    .nz-buttonGroup {
+      gap: var(--iui-size-s);
+      &:before {
+        content: "";
+        flex: 1;
+      }
+      > :first-child {
+        margin-inline-start: calc(-1 * var(--iui-size-s));
+      }
+      .nz-iconButton[data-iui-active="true"]:after {
+        inset-block: unset;
+      }
+    }
+  }
+}

package/lib/appui-react/layout/widget/widget-content-layout/header/HeaderLayout.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import "./HeaderLayout.scss";
+import * as React from "react";
+import type { WidgetContentLayout } from "../WidgetContentLayout.js";
+type WidgetContentLayoutHeaderProps = React.ComponentProps<typeof WidgetContentLayout.Header>;
+type HeaderLayoutProps = Pick<WidgetContentLayoutHeaderProps, "toggle" | "buttons" | "menu" | "title" | "onSearch" | "icons" | "iconSize">;
+/**
+ * A layout component for the header, including optional search, icons, buttons, title, and a menu.
+ * @internal
+ */
+export declare function HeaderLayout(props: HeaderLayoutProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=HeaderLayout.d.ts.map

package/lib/appui-react/layout/widget/widget-content-layout/header/HeaderLayout.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"HeaderLayout.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/widget/widget-content-layout/header/HeaderLayout.tsx"],"names":[],"mappings":"AAKA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAErE,KAAK,8BAA8B,GAAG,KAAK,CAAC,cAAc,CACxD,OAAO,mBAAmB,CAAC,MAAM,CAClC,CAAC;AAEF,KAAK,iBAAiB,GAAG,IAAI,CAC3B,8BAA8B,EAC9B,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAC5E,CAAC;AAEF;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAiDpD"}

package/lib/appui-react/layout/widget/widget-content-layout/header/HeaderLayout.js ADDED Viewed

@@ -0,0 +1,31 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import "./HeaderLayout.scss";
+import * as React from "react";
+import { DropdownButton, MenuItem, Text, ToggleSwitch, } from "@itwin/itwinui-react";
+import { HeaderTopBar } from "./HeaderTopBar.js";
+/**
+ * A layout component for the header, including optional search, icons, buttons, title, and a menu.
+ * @internal
+ */
+export function HeaderLayout(props) {
+    const buttons = props.buttons || [];
+    const icons = props.icons || [];
+    const leftItems = [
+        props.toggle ? React.createElement(ToggleSwitch, { key: "toggle", ...props.toggle }) : undefined,
+        props.menu ? (React.createElement(DropdownButton, { key: "menu", className: "nz-menu", menuItems: props.menu.items.map((i) => (React.createElement(MenuItem, { key: i.label, onClick: i.onClick }, i.label))) }, props.menu.title)) : undefined,
+        buttons.length > 0 ? (React.createElement("div", { key: "buttons", className: "nz-buttons" }, buttons)) : undefined,
+    ].filter((item) => !!item);
+    const topBarLeftItems = props.title
+        ? [
+            React.createElement(Text, { key: "title", className: "nz-title" }, props.title),
+        ]
+        : leftItems.slice(0, 1);
+    const remainingLeftItems = props.title ? leftItems : leftItems.slice(1);
+    return (React.createElement("div", { className: "nz-widget-widgetContentLayout-header-headerLayout" },
+        (props.onSearch || topBarLeftItems.length > 0 || icons.length > 0) && (React.createElement(HeaderTopBar, { primaryContent: topBarLeftItems, onSearch: props.onSearch, icons: icons, iconSize: props.iconSize })),
+        remainingLeftItems.map((item) => (React.createElement("div", { className: "nz-remainingItems", key: item.key }, item)))));
+}
+//# sourceMappingURL=HeaderLayout.js.map

package/lib/appui-react/layout/widget/widget-content-layout/header/HeaderLayout.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"HeaderLayout.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/widget/widget-content-layout/header/HeaderLayout.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,qBAAqB,CAAC;AAC7B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,cAAc,EACd,QAAQ,EACR,IAAI,EACJ,YAAY,GACb,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAYjD;;;GAGG;AACH,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC;IACpC,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;IAChC,MAAM,SAAS,GAAG;QAChB,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,oBAAC,YAAY,IAAC,GAAG,EAAC,QAAQ,KAAK,KAAK,CAAC,MAAM,GAAI,CAAC,CAAC,CAAC,SAAS;QAC1E,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,oBAAC,cAAc,IACb,GAAG,EAAC,MAAM,EACV,SAAS,EAAC,SAAS,EACnB,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACrC,oBAAC,QAAQ,IAAC,GAAG,EAAE,CAAC,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC,OAAO,IACvC,CAAC,CAAC,KAAK,CACC,CACZ,CAAC,IAED,KAAK,CAAC,IAAI,CAAC,KAAK,CACF,CAClB,CAAC,CAAC,CAAC,SAAS;QACb,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACnB,6BAAK,GAAG,EAAC,SAAS,EAAC,SAAS,EAAC,YAAY,IACtC,OAAO,CACJ,CACP,CAAC,CAAC,CAAC,SAAS;KACd,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAC3B,MAAM,eAAe,GAAG,KAAK,CAAC,KAAK;QACjC,CAAC,CAAC;YACE,oBAAC,IAAI,IAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAC,UAAU,IACnC,KAAK,CAAC,KAAK,CACP;SACR;QACH,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAC1B,MAAM,kBAAkB,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACxE,OAAO,CACL,6BAAK,SAAS,EAAC,mDAAmD;QAC/D,CAAC,KAAK,CAAC,QAAQ,IAAI,eAAe,CAAC,MAAM,GAAG,CAAC,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CACrE,oBAAC,YAAY,IACX,cAAc,EAAE,eAAe,EAC/B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,KAAK,CAAC,QAAQ,GACxB,CACH;QACA,kBAAkB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAChC,6BAAK,SAAS,EAAC,mBAAmB,EAAC,GAAG,EAAE,IAAI,CAAC,GAAG,IAC7C,IAAI,CACD,CACP,CAAC,CACE,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 \"./HeaderLayout.scss\";\nimport * as React from \"react\";\nimport {\n DropdownButton,\n MenuItem,\n Text,\n ToggleSwitch,\n} from \"@itwin/itwinui-react\";\nimport { HeaderTopBar } from \"./HeaderTopBar.js\";\nimport type { WidgetContentLayout } from \"../WidgetContentLayout.js\";\n\ntype WidgetContentLayoutHeaderProps = React.ComponentProps<\n typeof WidgetContentLayout.Header\n>;\n\ntype HeaderLayoutProps = Pick<\n WidgetContentLayoutHeaderProps,\n \"toggle\" | \"buttons\" | \"menu\" | \"title\" | \"onSearch\" | \"icons\" | \"iconSize\"\n>;\n\n/**\n * A layout component for the header, including optional search, icons, buttons, title, and a menu.\n * @internal\n */\nexport function HeaderLayout(props: HeaderLayoutProps) {\n const buttons = props.buttons || [];\n const icons = props.icons || [];\n const leftItems = [\n props.toggle ? <ToggleSwitch key=\"toggle\" {...props.toggle} /> : undefined,\n props.menu ? (\n <DropdownButton\n key=\"menu\"\n className=\"nz-menu\"\n menuItems={props.menu.items.map((i) => (\n <MenuItem key={i.label} onClick={i.onClick}>\n {i.label}\n </MenuItem>\n ))}\n >\n {props.menu.title}\n </DropdownButton>\n ) : undefined,\n buttons.length > 0 ? (\n <div key=\"buttons\" className=\"nz-buttons\">\n {buttons}\n </div>\n ) : undefined,\n ].filter((item) => !!item);\n const topBarLeftItems = props.title\n ? [\n <Text key=\"title\" className=\"nz-title\">\n {props.title}\n </Text>,\n ]\n : leftItems.slice(0, 1);\n const remainingLeftItems = props.title ? leftItems : leftItems.slice(1);\n return (\n <div className=\"nz-widget-widgetContentLayout-header-headerLayout\">\n {(props.onSearch || topBarLeftItems.length > 0 || icons.length > 0) && (\n <HeaderTopBar\n primaryContent={topBarLeftItems}\n onSearch={props.onSearch}\n icons={icons}\n iconSize={props.iconSize}\n />\n )}\n {remainingLeftItems.map((item) => (\n <div className=\"nz-remainingItems\" key={item.key}>\n {item}\n </div>\n ))}\n </div>\n );\n}\n"]}

package/lib/appui-react/layout/widget/widget-content-layout/header/HeaderLayout.scss ADDED Viewed

@@ -0,0 +1,47 @@
+@layer appui.component {
+  .nz-widget-widgetContentLayout-header-headerLayout {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--iui-size-s);
+    container-type: inline-size;
+    .nz-menu {
+      width: 100%;
+      max-width: 560px;
+    }
+    .nz-buttons {
+      display: flex;
+      gap: var(--iui-size-s);
+      align-items: center;
+      width: 100%;
+      max-width: 560px;
+      > button {
+        overflow: auto;
+        min-width: fit-content;
+      }
+    }
+    .nz-title {
+      font-weight: bolder;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+    .nz-remainingItems {
+      overflow-x: auto;
+      .nz-buttons {
+        flex-wrap: wrap;
+      }
+    }
+    .nz-headerTopBarWrapper {
+      display: flex;
+      gap: var(--iui-size-s);
+      width: 100%;
+    }
+  }
+}

package/lib/appui-react/layout/widget/widget-content-layout/header/HeaderSearch.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import "./HeaderSearch.scss";
+import * as React from "react";
+import type { WidgetContentLayout } from "../WidgetContentLayout.js";
+import type { HeaderIconToolbar } from "./HeaderIconToolbar.js";
+type WidgetContentLayoutHeaderProps = React.ComponentProps<typeof WidgetContentLayout.Header>;
+type HeaderIconToolbarProps = React.ComponentProps<typeof HeaderIconToolbar>;
+interface HeaderSearchProps extends Pick<WidgetContentLayoutHeaderProps, "iconSize" | "onSearch">, Pick<HeaderIconToolbarProps, "searchExpandedState"> {
+    /** State tuple for the search text value and its setter function. */
+    searchState: [string, React.Dispatch<React.SetStateAction<string>>];
+}
+/**
+ * A collapsible search box component for widget headers.
+ * Provides an expandable search input with icons that automatically focuses when expanded.
+ * @internal
+ */
+export declare function HeaderSearch(props: HeaderSearchProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=HeaderSearch.d.ts.map

package/lib/appui-react/layout/widget/widget-content-layout/header/HeaderSearch.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"HeaderSearch.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/widget/widget-content-layout/header/HeaderSearch.tsx"],"names":[],"mappings":"AAKA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAEhE,KAAK,8BAA8B,GAAG,KAAK,CAAC,cAAc,CACxD,OAAO,mBAAmB,CAAC,MAAM,CAClC,CAAC;AACF,KAAK,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAE7E,UAAU,iBACR,SAAQ,IAAI,CAAC,8BAA8B,EAAE,UAAU,GAAG,UAAU,CAAC,EACnE,IAAI,CAAC,sBAAsB,EAAE,qBAAqB,CAAC;IACrD,qEAAqE;IACrE,WAAW,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;CACrE;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBA+DpD"}