@itwin/appui-react 5.24.2 → 5.25.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.
- package/CHANGELOG.md +13 -0
- package/lib/appui-react/layout/widget/widget-content-layout/WidgetContentLayout.d.ts +4 -0
- package/lib/appui-react/layout/widget/widget-content-layout/WidgetContentLayout.d.ts.map +1 -1
- package/lib/appui-react/layout/widget/widget-content-layout/WidgetContentLayout.js +2 -2
- package/lib/appui-react/layout/widget/widget-content-layout/WidgetContentLayout.js.map +1 -1
- package/lib/appui-react/layout/widget/widget-content-layout/header/HeaderIconToolbar.d.ts +2 -2
- package/lib/appui-react/layout/widget/widget-content-layout/header/HeaderIconToolbar.d.ts.map +1 -1
- package/lib/appui-react/layout/widget/widget-content-layout/header/HeaderIconToolbar.js +4 -4
- package/lib/appui-react/layout/widget/widget-content-layout/header/HeaderIconToolbar.js.map +1 -1
- package/lib/appui-react/layout/widget/widget-content-layout/header/HeaderIconToolbar.scss +9 -2
- package/lib/appui-react/layout/widget/widget-content-layout/header/HeaderLayout.d.ts +1 -1
- package/lib/appui-react/layout/widget/widget-content-layout/header/HeaderLayout.d.ts.map +1 -1
- package/lib/appui-react/layout/widget/widget-content-layout/header/HeaderLayout.js +1 -1
- package/lib/appui-react/layout/widget/widget-content-layout/header/HeaderLayout.js.map +1 -1
- package/lib/appui-react/layout/widget/widget-content-layout/header/HeaderSearch.d.ts +2 -4
- package/lib/appui-react/layout/widget/widget-content-layout/header/HeaderSearch.d.ts.map +1 -1
- package/lib/appui-react/layout/widget/widget-content-layout/header/HeaderSearch.js +2 -2
- package/lib/appui-react/layout/widget/widget-content-layout/header/HeaderSearch.js.map +1 -1
- package/lib/appui-react/layout/widget/widget-content-layout/header/HeaderTopBar.d.ts +1 -1
- package/lib/appui-react/layout/widget/widget-content-layout/header/HeaderTopBar.d.ts.map +1 -1
- package/lib/appui-react/layout/widget/widget-content-layout/header/HeaderTopBar.js +1 -1
- package/lib/appui-react/layout/widget/widget-content-layout/header/HeaderTopBar.js.map +1 -1
- package/lib/cjs/appui-react/layout/widget/widget-content-layout/header/HeaderIconToolbar.scss +9 -2
- package/lib/esm/appui-react/layout/widget/widget-content-layout/header/HeaderIconToolbar.scss +9 -2
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# Change Log - @itwin/appui-react
|
|
2
2
|
|
|
3
|
+
## 5.25.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 488c5cd: Add option to disable search in WidgetContentLayout
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- Updated dependencies [091fbdc]
|
|
12
|
+
- @itwin/imodel-components-react@5.25.0
|
|
13
|
+
- @itwin/components-react@5.25.0
|
|
14
|
+
- @itwin/core-react@5.25.0
|
|
15
|
+
|
|
3
16
|
## 5.24.2
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
|
@@ -46,6 +46,10 @@ interface WidgetContentLayoutHeaderProps extends ComponentPropsWithRef<"div"> {
|
|
|
46
46
|
* Callback function for search functionality.
|
|
47
47
|
*/
|
|
48
48
|
onSearch?: (value: string) => void;
|
|
49
|
+
/**
|
|
50
|
+
* Whether to disable the search functionality.
|
|
51
|
+
*/
|
|
52
|
+
disableSearch?: boolean;
|
|
49
53
|
/**
|
|
50
54
|
* Array of icon menu items to display in the header.
|
|
51
55
|
*/
|
|
@@ -1 +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,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;
|
|
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,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,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;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;AA8CD,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;AA4CD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,mBAAmB;;;;CAI9B,CAAC"}
|
|
@@ -11,9 +11,9 @@ import * as React from "react";
|
|
|
11
11
|
import { Divider, ProgressLinear, ProgressRadial } from "@itwin/itwinui-react";
|
|
12
12
|
import { HeaderLayout } from "./header/HeaderLayout.js";
|
|
13
13
|
const Header = React.forwardRef(function Header(props, ref) {
|
|
14
|
-
const { className, children, toggle, buttons, menu, title, onSearch, icons, iconSize, ...rest } = props;
|
|
14
|
+
const { className, children, toggle, buttons, menu, title, onSearch, disableSearch, icons, iconSize, ...rest } = props;
|
|
15
15
|
return (React.createElement("div", { className: classNames("nz-widget-widgetContentLayout-header", className), ...rest, ref: ref },
|
|
16
|
-
React.createElement(HeaderLayout, { toggle: toggle, buttons: buttons, menu: menu, title: title, onSearch: onSearch, icons: icons, iconSize: iconSize }, children)));
|
|
16
|
+
React.createElement(HeaderLayout, { toggle: toggle, buttons: buttons, menu: menu, title: title, onSearch: onSearch, disableSearch: disableSearch, icons: icons, iconSize: iconSize }, children)));
|
|
17
17
|
});
|
|
18
18
|
Header.displayName = "appui:WidgetContentLayout.Header";
|
|
19
19
|
const Body = React.forwardRef(function Body(props, ref) {
|
|
@@ -1 +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 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 </HeaderLayout>\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 data-_appui-hide-dividers={hideDividers ? \"true\" : \"false\"}\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"]}
|
|
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 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 * Whether to disable the search functionality.\n */\n disableSearch?: boolean;\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 disableSearch,\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 disableSearch={disableSearch}\n icons={icons}\n iconSize={iconSize}\n >\n {children}\n </HeaderLayout>\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 data-_appui-hide-dividers={hideDividers ? \"true\" : \"false\"}\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"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import "./HeaderIconToolbar.scss";
|
|
2
|
-
import
|
|
2
|
+
import React from "react";
|
|
3
3
|
import type { WidgetContentLayout } from "../WidgetContentLayout.js";
|
|
4
4
|
type WidgetContentLayoutHeaderProps = React.ComponentProps<typeof WidgetContentLayout.Header>;
|
|
5
5
|
type IconMenu = NonNullable<WidgetContentLayoutHeaderProps["icons"]>[number];
|
|
@@ -10,7 +10,7 @@ type SearchExpandedState = [
|
|
|
10
10
|
boolean,
|
|
11
11
|
React.Dispatch<React.SetStateAction<boolean>>
|
|
12
12
|
];
|
|
13
|
-
interface HeaderIconToolbarProps extends Pick<WidgetContentLayoutHeaderProps, "iconSize" | "onSearch"> {
|
|
13
|
+
interface HeaderIconToolbarProps extends Pick<WidgetContentLayoutHeaderProps, "iconSize" | "onSearch" | "disableSearch"> {
|
|
14
14
|
/** Array of icon menu items to display, including regular icons, search, and dividers. */
|
|
15
15
|
menuIcons: (IconMenu | IconMenuSearch)[];
|
|
16
16
|
/** State tuple controlling whether the search box is expanded or collapsed. */
|
package/lib/appui-react/layout/widget/widget-content-layout/header/HeaderIconToolbar.d.ts.map
CHANGED
|
@@ -1 +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,
|
|
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,MAAM,OAAO,CAAC;AAa1B,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,CACV,8BAA8B,EAC9B,UAAU,GAAG,UAAU,GAAG,eAAe,CAC1C;IACD,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,qBAsI9D"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
4
|
*--------------------------------------------------------------------------------------------*/
|
|
5
5
|
import "./HeaderIconToolbar.scss";
|
|
6
|
-
import
|
|
6
|
+
import React from "react";
|
|
7
7
|
import { ButtonGroup, Divider, DropdownMenu, IconButton, MenuDivider, MenuItem, Text, Tooltip, } from "@itwin/itwinui-react";
|
|
8
8
|
import { SvgMore, SvgSearch } from "@itwin/itwinui-icons-react";
|
|
9
9
|
import { HeaderSearch } from "./HeaderSearch.js";
|
|
@@ -27,7 +27,7 @@ export function HeaderIconToolbar(props) {
|
|
|
27
27
|
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: () => {
|
|
28
28
|
close();
|
|
29
29
|
setSearchIsExpanded(true);
|
|
30
|
-
}, startIcon: React.createElement(SvgSearch, null) }, "Search")) : (React.createElement(React.Fragment, { key: index }))) : icon.tooltipContent ? (React.createElement(Tooltip, { content: icon.tooltipContent, key: index },
|
|
30
|
+
}, startIcon: React.createElement(SvgSearch, null), disabled: props.disableSearch }, "Search")) : (React.createElement(React.Fragment, { key: index }))) : icon.tooltipContent ? (React.createElement(Tooltip, { content: icon.tooltipContent, key: index },
|
|
31
31
|
React.createElement(MenuItem, { isSelected: icon.isActive, disabled: icon.disabled, key: index, onClick: () => {
|
|
32
32
|
icon.onClick();
|
|
33
33
|
close();
|
|
@@ -36,8 +36,8 @@ export function HeaderIconToolbar(props) {
|
|
|
36
36
|
close();
|
|
37
37
|
}, startIcon: React.createElement(React.Fragment, null, icon.icon) }, icon.label));
|
|
38
38
|
}) },
|
|
39
|
-
React.createElement(IconButton, { size: props.iconSize, styleType: "borderless", "aria-label": "More" },
|
|
40
|
-
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" },
|
|
39
|
+
React.createElement(IconButton, { size: props.iconSize, styleType: "borderless", "aria-label": "More", className: "nz-header-overflow-button" },
|
|
40
|
+
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, disableSearch: props.disableSearch })) : (React.createElement(IconButton, { disabled: icon.disabled, label: icon.tooltipContent ? (React.createElement("div", { className: "nz-widget-widgetContentLayout-header-headerIconToolbar-iconButton-tooltip" },
|
|
41
41
|
React.createElement(Text, { variant: "small" }, icon.label),
|
|
42
42
|
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))))));
|
|
43
43
|
}
|
|
@@ -1 +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 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"]}
|
|
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 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<\n WidgetContentLayoutHeaderProps,\n \"iconSize\" | \"onSearch\" | \"disableSearch\"\n > {\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 disabled={props.disableSearch}\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 className=\"nz-header-overflow-button\"\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 disableSearch={props.disableSearch}\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"]}
|
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
@layer appui.component {
|
|
2
2
|
.nz-widget-widgetContentLayout-header-headerIconToolbar {
|
|
3
|
+
display: flex;
|
|
3
4
|
--_appui-icon-size: var(--iui-component-height);
|
|
4
5
|
--_appui-max-search-width: 200px;
|
|
5
6
|
min-width: var(--_appui-icon-size);
|
|
6
7
|
min-height: var(--_appui-icon-size);
|
|
7
8
|
|
|
8
9
|
&[data-_appui-icon-size="small"] {
|
|
9
|
-
--icon-size: var(--iui-component-height-small);
|
|
10
|
+
--_appui-icon-size: var(--iui-component-height-small);
|
|
10
11
|
}
|
|
11
12
|
|
|
12
13
|
&[data-_appui-icon-size="large"] {
|
|
13
|
-
--icon-size: var(--iui-component-height-large);
|
|
14
|
+
--_appui-icon-size: var(--iui-component-height-large);
|
|
14
15
|
}
|
|
15
16
|
|
|
16
17
|
&[data-_appui-search-expanded="true"] {
|
|
@@ -40,5 +41,11 @@
|
|
|
40
41
|
inset-block: unset;
|
|
41
42
|
}
|
|
42
43
|
}
|
|
44
|
+
|
|
45
|
+
// when icon-size is small, the button width is 2px wider than the icon size due to a transparent border,
|
|
46
|
+
// so we need to remove the border to make it the same width as the icon
|
|
47
|
+
.nz-header-overflow-button {
|
|
48
|
+
border: 0px;
|
|
49
|
+
}
|
|
43
50
|
}
|
|
44
51
|
}
|
|
@@ -2,7 +2,7 @@ import "./HeaderLayout.scss";
|
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import type { WidgetContentLayout } from "../WidgetContentLayout.js";
|
|
4
4
|
type WidgetContentLayoutHeaderProps = React.ComponentProps<typeof WidgetContentLayout.Header>;
|
|
5
|
-
type HeaderLayoutProps = Pick<WidgetContentLayoutHeaderProps, "toggle" | "buttons" | "menu" | "title" | "onSearch" | "icons" | "iconSize" | "children">;
|
|
5
|
+
type HeaderLayoutProps = Pick<WidgetContentLayoutHeaderProps, "toggle" | "buttons" | "menu" | "title" | "onSearch" | "disableSearch" | "icons" | "iconSize" | "children">;
|
|
6
6
|
/**
|
|
7
7
|
* A layout component for the header, including optional search, icons, buttons, title, and a menu.
|
|
8
8
|
* @internal
|
|
@@ -1 +1 @@
|
|
|
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,EAC5B,QAAQ,GACR,SAAS,GACT,MAAM,GACN,OAAO,GACP,UAAU,GACV,OAAO,GACP,UAAU,GACV,UAAU,CACb,CAAC;AAEF;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,
|
|
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,EAC5B,QAAQ,GACR,SAAS,GACT,MAAM,GACN,OAAO,GACP,UAAU,GACV,eAAe,GACf,OAAO,GACP,UAAU,GACV,UAAU,CACb,CAAC;AAEF;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAmDpD"}
|
|
@@ -25,7 +25,7 @@ export function HeaderLayout(props) {
|
|
|
25
25
|
: leftItems.slice(0, 1);
|
|
26
26
|
const remainingLeftItems = props.title ? leftItems : leftItems.slice(1);
|
|
27
27
|
return (React.createElement("div", { className: "nz-widget-widgetContentLayout-header-headerLayout" },
|
|
28
|
-
(props.onSearch || topBarLeftItems.length > 0 || icons.length > 0) && (React.createElement(HeaderTopBar, { primaryContent: topBarLeftItems, onSearch: props.onSearch, icons: icons, iconSize: props.iconSize })),
|
|
28
|
+
(props.onSearch || topBarLeftItems.length > 0 || icons.length > 0) && (React.createElement(HeaderTopBar, { primaryContent: topBarLeftItems, onSearch: props.onSearch, disableSearch: props.disableSearch, icons: icons, iconSize: props.iconSize })),
|
|
29
29
|
remainingLeftItems.map((item) => (React.createElement("div", { className: "nz-remainingItems", key: item.key }, item))),
|
|
30
30
|
props.children));
|
|
31
31
|
}
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
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;AAoBjD;;;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,aAAa,EAAE,KAAK,CAAC,aAAa,EAClC,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;QACD,KAAK,CAAC,QAAQ,CACX,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\"\n | \"buttons\"\n | \"menu\"\n | \"title\"\n | \"onSearch\"\n | \"disableSearch\"\n | \"icons\"\n | \"iconSize\"\n | \"children\"\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 disableSearch={props.disableSearch}\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 {props.children}\n </div>\n );\n}\n"]}
|
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
import "./HeaderSearch.scss";
|
|
2
|
-
import
|
|
3
|
-
import type { WidgetContentLayout } from "../WidgetContentLayout.js";
|
|
2
|
+
import React from "react";
|
|
4
3
|
import type { HeaderIconToolbar } from "./HeaderIconToolbar.js";
|
|
5
|
-
type WidgetContentLayoutHeaderProps = React.ComponentProps<typeof WidgetContentLayout.Header>;
|
|
6
4
|
type HeaderIconToolbarProps = React.ComponentProps<typeof HeaderIconToolbar>;
|
|
7
|
-
interface HeaderSearchProps extends Pick<
|
|
5
|
+
interface HeaderSearchProps extends Pick<HeaderIconToolbarProps, "iconSize" | "onSearch" | "disableSearch" | "searchExpandedState"> {
|
|
8
6
|
/** State tuple for the search text value and its setter function. */
|
|
9
7
|
searchState: [string, React.Dispatch<React.SetStateAction<string>>];
|
|
10
8
|
}
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAEhE,KAAK,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAE7E,UAAU,iBACR,SAAQ,IAAI,CACV,sBAAsB,EACtB,UAAU,GAAG,UAAU,GAAG,eAAe,GAAG,qBAAqB,CAClE;IACD,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,qBAgEpD"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
4
|
*--------------------------------------------------------------------------------------------*/
|
|
5
5
|
import "./HeaderSearch.scss";
|
|
6
|
-
import
|
|
6
|
+
import React from "react";
|
|
7
7
|
import { SearchBox } from "@itwin/itwinui-react";
|
|
8
8
|
import { SvgClose, SvgSearch } from "@itwin/itwinui-icons-react";
|
|
9
9
|
/**
|
|
@@ -32,7 +32,7 @@ export function HeaderSearch(props) {
|
|
|
32
32
|
}, [isExpanded]);
|
|
33
33
|
return (React.createElement(SearchBox, { onExpand: () => setIsExpanded(true), isExpanded: isExpanded, className: "nz-widget-widgetContentLayout-header-headerSearch", expandable: true, size: props.iconSize },
|
|
34
34
|
React.createElement(SearchBox.CollapsedState, null,
|
|
35
|
-
React.createElement(SearchBox.ExpandButton, { label: "Search", labelProps: { placement: "bottom" }, size: props.iconSize, styleType: "borderless" },
|
|
35
|
+
React.createElement(SearchBox.ExpandButton, { label: "Search", labelProps: { placement: "bottom" }, size: props.iconSize, styleType: "borderless", disabled: props.disableSearch },
|
|
36
36
|
React.createElement(SvgSearch, null))),
|
|
37
37
|
React.createElement(SearchBox.ExpandedState, null,
|
|
38
38
|
React.createElement(SearchBox.Icon, { size: props.iconSize },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderSearch.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/widget/widget-content-layout/header/HeaderSearch.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,qBAAqB,CAAC;AAC7B,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"HeaderSearch.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/widget/widget-content-layout/header/HeaderSearch.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,qBAAqB,CAAC;AAC7B,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAcjE;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,mBAAmB,CAAC;IAC9D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC;IACtD,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAA0B,IAAI,CAAC,CAAC;IAE7D,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,UAAU;YAAE,OAAO;QACxB,MAAM,EAAE,GAAG,QAAQ,CAAC,OAAO,CAAC;QAC5B,IAAI,CAAC,EAAE;YAAE,OAAO;QAChB,8EAA8E;QAC9E,MAAM,EAAE,GAAG,qBAAqB,CAAC,GAAG,EAAE;YACpC,EAAE,CAAC,KAAK,EAAE,CAAC;YACX,MAAM,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,CAAC;gBAAE,EAAE,CAAC,cAAc,GAAG,EAAE,CAAC,YAAY,GAAG,CAAC,CAAC,MAAM,CAAC;QACxD,CAAC,CAAC,CAAC;QACH,OAAO,GAAG,EAAE,CAAC,oBAAoB,CAAC,EAAE,CAAC,CAAC;IACxC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,oBAAC,SAAS,IACR,QAAQ,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EACnC,UAAU,EAAE,UAAU,EACtB,SAAS,EAAC,mDAAmD,EAC7D,UAAU,QACV,IAAI,EAAE,KAAK,CAAC,QAAQ;QAEpB,oBAAC,SAAS,CAAC,cAAc;YACvB,oBAAC,SAAS,CAAC,YAAY,IACrB,KAAK,EAAC,QAAQ,EACd,UAAU,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EACnC,IAAI,EAAE,KAAK,CAAC,QAAQ,EACpB,SAAS,EAAC,YAAY,EACtB,QAAQ,EAAE,KAAK,CAAC,aAAa;gBAE7B,oBAAC,SAAS,OAAG,CACU,CACA;QAC3B,oBAAC,SAAS,CAAC,aAAa;YACtB,oBAAC,SAAS,CAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,QAAQ;gBAClC,oBAAC,SAAS,OAAG,CACE;YACjB,oBAAC,SAAS,CAAC,KAAK,IACd,GAAG,EAAE,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAsC,EAAQ,EAAE;oBACzD,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;oBACrC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gBAC1C,CAAC,EACD,KAAK,EAAE,UAAU,GACjB;YACF,oBAAC,SAAS,CAAC,cAAc,IACvB,IAAI,EAAE,KAAK,CAAC,QAAQ,EACpB,KAAK,EAAC,OAAO,EACb,UAAU,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EACnC,OAAO,EAAE,GAAG,EAAE;oBACZ,aAAa,CAAC,KAAK,CAAC,CAAC;oBACrB,aAAa,CAAC,EAAE,CAAC,CAAC;oBAClB,IAAI,UAAU;wBAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;gBACvC,CAAC;gBAED,oBAAC,QAAQ,OAAG,CACa,CACH,CAChB,CACb,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 \"./HeaderSearch.scss\";\nimport React from \"react\";\n\nimport { SearchBox } from \"@itwin/itwinui-react\";\n\nimport { SvgClose, SvgSearch } from \"@itwin/itwinui-icons-react\";\nimport type { HeaderIconToolbar } from \"./HeaderIconToolbar.js\";\n\ntype HeaderIconToolbarProps = React.ComponentProps<typeof HeaderIconToolbar>;\n\ninterface HeaderSearchProps\n extends Pick<\n HeaderIconToolbarProps,\n \"iconSize\" | \"onSearch\" | \"disableSearch\" | \"searchExpandedState\"\n > {\n /** State tuple for the search text value and its setter function. */\n searchState: [string, React.Dispatch<React.SetStateAction<string>>];\n}\n\n/**\n * A collapsible search box component for widget headers.\n * Provides an expandable search input with icons that automatically focuses when expanded.\n * @internal\n */\nexport function HeaderSearch(props: HeaderSearchProps) {\n const [isExpanded, setIsExpanded] = props.searchExpandedState;\n const [searchText, setSearchText] = props.searchState;\n const inputRef = React.useRef<HTMLInputElement | null>(null);\n\n React.useEffect(() => {\n if (!isExpanded) return;\n const el = inputRef.current;\n if (!el) return;\n // Focus on next animation frame to allow expand animation / layout to settle.\n const id = requestAnimationFrame(() => {\n el.focus();\n const v = el.value;\n if (v) el.selectionStart = el.selectionEnd = v.length;\n });\n return () => cancelAnimationFrame(id);\n }, [isExpanded]);\n\n return (\n <SearchBox\n onExpand={() => setIsExpanded(true)}\n isExpanded={isExpanded}\n className=\"nz-widget-widgetContentLayout-header-headerSearch\"\n expandable\n size={props.iconSize}\n >\n <SearchBox.CollapsedState>\n <SearchBox.ExpandButton\n label=\"Search\"\n labelProps={{ placement: \"bottom\" }}\n size={props.iconSize}\n styleType=\"borderless\"\n disabled={props.disableSearch}\n >\n <SvgSearch />\n </SearchBox.ExpandButton>\n </SearchBox.CollapsedState>\n <SearchBox.ExpandedState>\n <SearchBox.Icon size={props.iconSize}>\n <SvgSearch />\n </SearchBox.Icon>\n <SearchBox.Input\n ref={inputRef}\n onChange={(e: React.ChangeEvent<HTMLInputElement>): void => {\n setSearchText(e.currentTarget.value);\n props.onSearch?.(e.currentTarget.value);\n }}\n value={searchText}\n />\n <SearchBox.CollapseButton\n size={props.iconSize}\n label=\"Clear\"\n labelProps={{ placement: \"bottom\" }}\n onClick={() => {\n setIsExpanded(false);\n setSearchText(\"\");\n if (searchText) props.onSearch?.(\"\");\n }}\n >\n <SvgClose />\n </SearchBox.CollapseButton>\n </SearchBox.ExpandedState>\n </SearchBox>\n );\n}\n"]}
|
|
@@ -2,7 +2,7 @@ import "./HeaderTopBar.scss";
|
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import type { WidgetContentLayout } from "../WidgetContentLayout.js";
|
|
4
4
|
type WidgetContentLayoutHeaderProps = React.ComponentProps<typeof WidgetContentLayout.Header>;
|
|
5
|
-
interface HeaderTopBarProps extends Pick<WidgetContentLayoutHeaderProps, "icons" | "onSearch" | "iconSize"> {
|
|
5
|
+
interface HeaderTopBarProps extends Pick<WidgetContentLayoutHeaderProps, "icons" | "onSearch" | "iconSize" | "disableSearch"> {
|
|
6
6
|
primaryContent: React.JSX.Element[];
|
|
7
7
|
}
|
|
8
8
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderTopBar.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/widget/widget-content-layout/header/HeaderTopBar.tsx"],"names":[],"mappings":"AAKA,OAAO,qBAAqB,CAAC;AAE7B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAErE,KAAK,8BAA8B,GAAG,KAAK,CAAC,cAAc,CACxD,OAAO,mBAAmB,CAAC,MAAM,CAClC,CAAC;AAGF,UAAU,iBACR,SAAQ,IAAI,CACV,8BAA8B,EAC9B,OAAO,GAAG,UAAU,GAAG,UAAU,
|
|
1
|
+
{"version":3,"file":"HeaderTopBar.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/widget/widget-content-layout/header/HeaderTopBar.tsx"],"names":[],"mappings":"AAKA,OAAO,qBAAqB,CAAC;AAE7B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAErE,KAAK,8BAA8B,GAAG,KAAK,CAAC,cAAc,CACxD,OAAO,mBAAmB,CAAC,MAAM,CAClC,CAAC;AAGF,UAAU,iBACR,SAAQ,IAAI,CACV,8BAA8B,EAC9B,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,eAAe,CACpD;IACD,cAAc,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;CACrC;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBA2CpD"}
|
|
@@ -30,6 +30,6 @@ export function HeaderTopBar(props) {
|
|
|
30
30
|
return (React.createElement("div", { className: classNames("nz-widget-widgetContentLayout-header-headerTopBar", (props.primaryContent.length === 0 || menuIcons.length === 0) &&
|
|
31
31
|
"nz-singleColumn"), "data-search-expanded": searchExpandedState[0] },
|
|
32
32
|
props.primaryContent.length > 0 && (React.createElement("div", { className: "nz-primaryContent" }, props.primaryContent)),
|
|
33
|
-
menuIcons.length > 0 && (React.createElement(HeaderIconToolbar, { menuIcons: menuIcons, onSearch: props.onSearch, searchExpandedState: searchExpandedState, iconSize: props.iconSize }))));
|
|
33
|
+
menuIcons.length > 0 && (React.createElement(HeaderIconToolbar, { menuIcons: menuIcons, onSearch: props.onSearch, searchExpandedState: searchExpandedState, iconSize: props.iconSize, disableSearch: props.disableSearch }))));
|
|
34
34
|
}
|
|
35
35
|
//# sourceMappingURL=HeaderTopBar.js.map
|
|
@@ -1 +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;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,
|
|
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;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,EACxB,aAAa,EAAE,KAAK,CAAC,aAAa,GAClC,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\" | \"disableSearch\"\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 disableSearch={props.disableSearch}\n />\n )}\n </div>\n );\n}\n"]}
|
package/lib/cjs/appui-react/layout/widget/widget-content-layout/header/HeaderIconToolbar.scss
CHANGED
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
@layer appui.component {
|
|
2
2
|
.nz-widget-widgetContentLayout-header-headerIconToolbar {
|
|
3
|
+
display: flex;
|
|
3
4
|
--_appui-icon-size: var(--iui-component-height);
|
|
4
5
|
--_appui-max-search-width: 200px;
|
|
5
6
|
min-width: var(--_appui-icon-size);
|
|
6
7
|
min-height: var(--_appui-icon-size);
|
|
7
8
|
|
|
8
9
|
&[data-_appui-icon-size="small"] {
|
|
9
|
-
--icon-size: var(--iui-component-height-small);
|
|
10
|
+
--_appui-icon-size: var(--iui-component-height-small);
|
|
10
11
|
}
|
|
11
12
|
|
|
12
13
|
&[data-_appui-icon-size="large"] {
|
|
13
|
-
--icon-size: var(--iui-component-height-large);
|
|
14
|
+
--_appui-icon-size: var(--iui-component-height-large);
|
|
14
15
|
}
|
|
15
16
|
|
|
16
17
|
&[data-_appui-search-expanded="true"] {
|
|
@@ -40,5 +41,11 @@
|
|
|
40
41
|
inset-block: unset;
|
|
41
42
|
}
|
|
42
43
|
}
|
|
44
|
+
|
|
45
|
+
// when icon-size is small, the button width is 2px wider than the icon size due to a transparent border,
|
|
46
|
+
// so we need to remove the border to make it the same width as the icon
|
|
47
|
+
.nz-header-overflow-button {
|
|
48
|
+
border: 0px;
|
|
49
|
+
}
|
|
43
50
|
}
|
|
44
51
|
}
|
package/lib/esm/appui-react/layout/widget/widget-content-layout/header/HeaderIconToolbar.scss
CHANGED
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
@layer appui.component {
|
|
2
2
|
.nz-widget-widgetContentLayout-header-headerIconToolbar {
|
|
3
|
+
display: flex;
|
|
3
4
|
--_appui-icon-size: var(--iui-component-height);
|
|
4
5
|
--_appui-max-search-width: 200px;
|
|
5
6
|
min-width: var(--_appui-icon-size);
|
|
6
7
|
min-height: var(--_appui-icon-size);
|
|
7
8
|
|
|
8
9
|
&[data-_appui-icon-size="small"] {
|
|
9
|
-
--icon-size: var(--iui-component-height-small);
|
|
10
|
+
--_appui-icon-size: var(--iui-component-height-small);
|
|
10
11
|
}
|
|
11
12
|
|
|
12
13
|
&[data-_appui-icon-size="large"] {
|
|
13
|
-
--icon-size: var(--iui-component-height-large);
|
|
14
|
+
--_appui-icon-size: var(--iui-component-height-large);
|
|
14
15
|
}
|
|
15
16
|
|
|
16
17
|
&[data-_appui-search-expanded="true"] {
|
|
@@ -40,5 +41,11 @@
|
|
|
40
41
|
inset-block: unset;
|
|
41
42
|
}
|
|
42
43
|
}
|
|
44
|
+
|
|
45
|
+
// when icon-size is small, the button width is 2px wider than the icon size due to a transparent border,
|
|
46
|
+
// so we need to remove the border to make it the same width as the icon
|
|
47
|
+
.nz-header-overflow-button {
|
|
48
|
+
border: 0px;
|
|
49
|
+
}
|
|
43
50
|
}
|
|
44
51
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itwin/appui-react",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.25.0",
|
|
4
4
|
"description": "A react component library for AppUI framework",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"types": "./lib/appui-react.d.ts",
|
|
@@ -45,9 +45,9 @@
|
|
|
45
45
|
"react-dom": "^18.0.0 || ^19.0.0",
|
|
46
46
|
"react-redux": "^7.2.2 || ^8.0.0 || ^9.0.0",
|
|
47
47
|
"redux": "^4.1.0 || ^5.0.0",
|
|
48
|
-
"@itwin/components-react": "5.
|
|
49
|
-
"@itwin/
|
|
50
|
-
"@itwin/
|
|
48
|
+
"@itwin/components-react": "5.25.0",
|
|
49
|
+
"@itwin/core-react": "5.25.0",
|
|
50
|
+
"@itwin/imodel-components-react": "5.25.0"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
53
|
"@itwin/appui-abstract": "^5.1.0",
|
|
@@ -89,9 +89,9 @@
|
|
|
89
89
|
"typescript": "~5.6.2",
|
|
90
90
|
"upath": "^2.0.1",
|
|
91
91
|
"vitest": "^3.2.4",
|
|
92
|
-
"@itwin/
|
|
93
|
-
"@itwin/imodel-components-react": "5.
|
|
94
|
-
"@itwin/
|
|
92
|
+
"@itwin/components-react": "5.25.0",
|
|
93
|
+
"@itwin/imodel-components-react": "5.25.0",
|
|
94
|
+
"@itwin/core-react": "5.25.0"
|
|
95
95
|
},
|
|
96
96
|
"dependencies": {
|
|
97
97
|
"@itwin/itwinui-icons-react": "^2.8.0",
|