@itwin/appui-react 3.0.0-dev.84 → 3.0.0-dev.88

package/lib/esm/appui-react/messages/StatusMessageRenderer.scss

@@ -1,28 +1,28 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/z-index";
-
-.uifw-message-renderer {
-  width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-  left: 0;
-  top: 0;
-  right: 0;
-  position: fixed;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-  @include uicore-z-index(dialog-popup);
-}
-
-@media screen and (min-width: 401px) {
-  .uifw-message-renderer {
-    min-width: 400px;
-    max-width: 640px;
-    margin-top: 24px;
-  }
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/z-index";
+
+.uifw-message-renderer {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  left: 0;
+  top: 0;
+  right: 0;
+  position: fixed;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  @include uicore-z-index(dialog-popup);
+}
+
+@media screen and (min-width: 401px) {
+  .uifw-message-renderer {
+    min-width: 400px;
+    max-width: 640px;
+    margin-top: 24px;
+  }
 }

package/lib/esm/appui-react/messages/StatusMessagesContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusMessagesContainer.js","sourceRoot":"","sources":["../../../../src/appui-react/messages/StatusMessagesContainer.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 Notification\n */\n\nimport \"./StatusMessagesContainer.scss\";\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport { StatusMessage } from \"./StatusMessageManager\";\nimport { ActivityMessageEventArgs } from \"./MessageManager\";\nimport { OutputMessageType } from \"@itwin/core-frontend\";\nimport { ToastMessage } from \"./ToastMessage\";\nimport { StickyMessage } from \"./StickyMessage\";\nimport { ActivityMessage } from \"./ActivityMessage\";\nimport { useLayoutResizeObserver } from \"@itwin/core-react\";\n\n/** Properties for [[StatusMessagesContainer]] component\n * @internal\n */\nexport interface StatusMessagesContainerProps {\n  messages: ReadonlyArray<StatusMessage>;\n  activityMessageInfo: ActivityMessageEventArgs | undefined;\n  isActivityMessageVisible: boolean;\n  toastTarget: HTMLElement | null;\n  closeMessage: (id: string) => void;\n  cancelActivityMessage: () => void;\n  dismissActivityMessage: () => void;\n}\n\n/** Component that renders one or more Toast, Sticky or Activity messages\n * @internal\n */\nexport function StatusMessagesContainer(props: StatusMessagesContainerProps) {\n  const [containerElement, setContainerElement] = React.useState<HTMLDivElement | null>(null);\n  const isMountedRef = React.useRef(false);\n\n  React.useEffect(() => {\n    if (!isMountedRef.current && containerRef.current) {\n      isMountedRef.current = true;\n      setContainerElement(containerRef.current);\n    }\n  }, []);\n\n  const messages = props.messages;\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const [, height] = useLayoutResizeObserver(containerElement);\n  const [addScroll, setAddScroll] = React.useState(false);\n\n  React.useLayoutEffect(() => {\n    // istanbul ignore else\n    if (containerElement) {\n      // istanbul ignore next\n      const windowHeight = containerElement.ownerDocument.defaultView?.innerHeight ?? 800;\n      const maxHeight = Math.floor(windowHeight * .66);\n      setAddScroll((height ?? 0) >= maxHeight);\n    }\n  }, [height, containerElement]);\n\n  if (!(props.activityMessageInfo && props.isActivityMessageVisible) && props.messages.length === 0)\n    return null;\n\n  return (\n    <div ref={containerRef} className={classnames(\"uifw-statusbar-messages-container\", addScroll && \"uifw-scrollable\")}>\n      <ul className=\"uifw-statusbar-message-list\">\n        {messages.length > 0 &&\n          messages.map((message: StatusMessage) => {\n            let messageNode = null;\n            if (message.messageDetails.msgType === OutputMessageType.Toast) {\n              messageNode = (\n                <li key={message.id}>\n                  <ToastMessage id={message.id} messageDetails={message.messageDetails} severity={message.severity}\n                    closeMessage={props.closeMessage} toastTarget={props.toastTarget} />\n                </li>\n              );\n            } else if (message.messageDetails.msgType === OutputMessageType.Sticky) {\n              messageNode = (\n                <li key={message.id}>\n                  <StickyMessage id={message.id} messageDetails={message.messageDetails} severity={message.severity}\n                    closeMessage={props.closeMessage} />\n                </li>\n              );\n            }\n            return messageNode;\n          })\n        }\n        {(props.activityMessageInfo !== undefined && props.isActivityMessageVisible) &&\n          <li key=\"activity-message\">\n            <ActivityMessage\n              activityMessageInfo={props.activityMessageInfo}\n              cancelActivityMessage={props.cancelActivityMessage}\n              dismissActivityMessage={props.dismissActivityMessage}\n            />\n          </li>\n        }\n      </ul>\n    </div>\n  );\n\n}\n"]}
+{"version":3,"file":"StatusMessagesContainer.js","sourceRoot":"","sources":["../../../../src/appui-react/messages/StatusMessagesContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Notification\r\n */\r\n\r\nimport \"./StatusMessagesContainer.scss\";\r\nimport * as React from \"react\";\r\nimport classnames from \"classnames\";\r\nimport { StatusMessage } from \"./StatusMessageManager\";\r\nimport { ActivityMessageEventArgs } from \"./MessageManager\";\r\nimport { OutputMessageType } from \"@itwin/core-frontend\";\r\nimport { ToastMessage } from \"./ToastMessage\";\r\nimport { StickyMessage } from \"./StickyMessage\";\r\nimport { ActivityMessage } from \"./ActivityMessage\";\r\nimport { useLayoutResizeObserver } from \"@itwin/core-react\";\r\n\r\n/** Properties for [[StatusMessagesContainer]] component\r\n * @internal\r\n */\r\nexport interface StatusMessagesContainerProps {\r\n  messages: ReadonlyArray<StatusMessage>;\r\n  activityMessageInfo: ActivityMessageEventArgs | undefined;\r\n  isActivityMessageVisible: boolean;\r\n  toastTarget: HTMLElement | null;\r\n  closeMessage: (id: string) => void;\r\n  cancelActivityMessage: () => void;\r\n  dismissActivityMessage: () => void;\r\n}\r\n\r\n/** Component that renders one or more Toast, Sticky or Activity messages\r\n * @internal\r\n */\r\nexport function StatusMessagesContainer(props: StatusMessagesContainerProps) {\r\n  const [containerElement, setContainerElement] = React.useState<HTMLDivElement | null>(null);\r\n  const isMountedRef = React.useRef(false);\r\n\r\n  React.useEffect(() => {\r\n    if (!isMountedRef.current && containerRef.current) {\r\n      isMountedRef.current = true;\r\n      setContainerElement(containerRef.current);\r\n    }\r\n  }, []);\r\n\r\n  const messages = props.messages;\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n  const [, height] = useLayoutResizeObserver(containerElement);\r\n  const [addScroll, setAddScroll] = React.useState(false);\r\n\r\n  React.useLayoutEffect(() => {\r\n    // istanbul ignore else\r\n    if (containerElement) {\r\n      // istanbul ignore next\r\n      const windowHeight = containerElement.ownerDocument.defaultView?.innerHeight ?? 800;\r\n      const maxHeight = Math.floor(windowHeight * .66);\r\n      setAddScroll((height ?? 0) >= maxHeight);\r\n    }\r\n  }, [height, containerElement]);\r\n\r\n  if (!(props.activityMessageInfo && props.isActivityMessageVisible) && props.messages.length === 0)\r\n    return null;\r\n\r\n  return (\r\n    <div ref={containerRef} className={classnames(\"uifw-statusbar-messages-container\", addScroll && \"uifw-scrollable\")}>\r\n      <ul className=\"uifw-statusbar-message-list\">\r\n        {messages.length > 0 &&\r\n          messages.map((message: StatusMessage) => {\r\n            let messageNode = null;\r\n            if (message.messageDetails.msgType === OutputMessageType.Toast) {\r\n              messageNode = (\r\n                <li key={message.id}>\r\n                  <ToastMessage id={message.id} messageDetails={message.messageDetails} severity={message.severity}\r\n                    closeMessage={props.closeMessage} toastTarget={props.toastTarget} />\r\n                </li>\r\n              );\r\n            } else if (message.messageDetails.msgType === OutputMessageType.Sticky) {\r\n              messageNode = (\r\n                <li key={message.id}>\r\n                  <StickyMessage id={message.id} messageDetails={message.messageDetails} severity={message.severity}\r\n                    closeMessage={props.closeMessage} />\r\n                </li>\r\n              );\r\n            }\r\n            return messageNode;\r\n          })\r\n        }\r\n        {(props.activityMessageInfo !== undefined && props.isActivityMessageVisible) &&\r\n          <li key=\"activity-message\">\r\n            <ActivityMessage\r\n              activityMessageInfo={props.activityMessageInfo}\r\n              cancelActivityMessage={props.cancelActivityMessage}\r\n              dismissActivityMessage={props.dismissActivityMessage}\r\n            />\r\n          </li>\r\n        }\r\n      </ul>\r\n    </div>\r\n  );\r\n\r\n}\r\n"]}

package/lib/esm/appui-react/messages/StatusMessagesContainer.scss

@@ -1,53 +1,53 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/text/mixins";
-@import "~@itwin/core-react/lib/cjs/core-react/icons/index";
-@import "~@itwin/core-react/lib/cjs/core-react/scrollbar";
-@import "~@itwin/core-react/lib/cjs/core-react/z-index";
-
-.uifw-statusbar-message-label {
-  color: $buic-text-color;
-}
-
-.uifw-statusbar-message-brief {
-  @include uicore-text(body);
-}
-
-.uifw-statusbar-message-detailed {
-  @include uicore-text(small);
-}
-
-.uifw-statusbar-hollow-icon {
-  color: $buic-accessory-hollow;
-  width: $uicore-icons-small;
-  height: $uicore-icons-small;
-  font-size: $uicore-icons-small;
-  margin-bottom: 4px;
-}
-
-.uifw-statusbar-messages-container {
-  @include uicore-z-index(status-message);
-  max-height: 66vh;
-
-  &.uifw-scrollable {
-    overflow-y: auto;
-
-    @include uicore-touch-scrolling;
-    @include uicore-scrollbar();
-  }
-
-  >.uifw-statusbar-message-list {
-    display: block;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-
-    >li {
-      display: block;
-      position: relative;
-      padding: 4px 0;
-    }
-  }
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/text/mixins";
+@import "~@itwin/core-react/lib/cjs/core-react/icons/index";
+@import "~@itwin/core-react/lib/cjs/core-react/scrollbar";
+@import "~@itwin/core-react/lib/cjs/core-react/z-index";
+
+.uifw-statusbar-message-label {
+  color: $buic-text-color;
+}
+
+.uifw-statusbar-message-brief {
+  @include uicore-text(body);
+}
+
+.uifw-statusbar-message-detailed {
+  @include uicore-text(small);
+}
+
+.uifw-statusbar-hollow-icon {
+  color: $buic-accessory-hollow;
+  width: $uicore-icons-small;
+  height: $uicore-icons-small;
+  font-size: $uicore-icons-small;
+  margin-bottom: 4px;
+}
+
+.uifw-statusbar-messages-container {
+  @include uicore-z-index(status-message);
+  max-height: 66vh;
+
+  &.uifw-scrollable {
+    overflow-y: auto;
+
+    @include uicore-touch-scrolling;
+    @include uicore-scrollbar();
+  }
+
+  >.uifw-statusbar-message-list {
+    display: block;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    >li {
+      display: block;
+      position: relative;
+      padding: 4px 0;
+    }
+  }
 }

package/lib/esm/appui-react/messages/StickyMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"StickyMessage.js","sourceRoot":"","sources":["../../../../src/appui-react/messages/StickyMessage.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AAE9E,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAYtD;;GAEG;AACH,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAC7D,MAAM,QAAQ,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,UAAU,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC;IAC1C,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,UAAU,CAC3B,+BAA+B,EAC/B,OAAO,IAAI,cAAc,CAC1B,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAE,UAAU;QACxB,oBAAC,iBAAiB,IAChB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,IAAI,EACpB,OAAO,EAAE,WAAW,EACpB,OAAO,EACL,oBAAC,aAAa;gBACZ,oBAAC,YAAY,IAAC,OAAO,EAAE,cAAc,CAAC,YAAY,EAAE,SAAS,EAAC,8BAA8B,GAAG;gBAC9F,cAAc,CAAC,eAAe;oBAC7B,oBAAC,YAAY,IAAC,OAAO,EAAE,cAAc,CAAC,eAAe,EAAE,SAAS,EAAC,iCAAiC,GAAG,CAEzF,GAElB,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/** @packageDocumentation\n * @module Notification\n */\n\nimport \"./StickyMessage.scss\";\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport { MessageSeverity } from \"@itwin/appui-abstract\";\nimport { MessageLayout } from \"@itwin/appui-layout-react\";\nimport { ToastPresentation } from \"@itwin/itwinui-react/cjs/core/Toast/Toast\";\nimport { NotifyMessageDetailsType } from \"../messages/ReactNotifyMessageDetails\";\nimport { MessageLabel } from \"./MessageLabel\";\nimport { getToastCategory } from \"./getToastCategory\";\n\n/** Properties for a [[StickyMessage]]\n * @public\n */\nexport interface StickyMessageProps {\n  id: string;\n  messageDetails: NotifyMessageDetailsType;\n  severity: MessageSeverity;\n  closeMessage: (id: string) => void;\n}\n\n/** Sticky Message React component\n * @public\n */\nexport function StickyMessage(props: StickyMessageProps) {\n  const { id, messageDetails, severity, closeMessage } = props;\n  const category = getToastCategory(severity);\n  const [closing, setClosing] = React.useState(false);\n\n  const handleClose = () => {\n    setClosing(true);\n    setTimeout(() => closeMessage(id), 500);\n  };\n\n  const classNames = classnames(\n    \"uifw-statusbar-sticky-message\",\n    closing && \"uifw-closing\",\n  );\n\n  return (\n    <div className={classNames}>\n      <ToastPresentation\n        category={category}\n        hasCloseButton={true}\n        onClose={handleClose}\n        content={\n          <MessageLayout>\n            <MessageLabel message={messageDetails.briefMessage} className=\"uifw-statusbar-message-brief\" />\n            {messageDetails.detailedMessage &&\n              <MessageLabel message={messageDetails.detailedMessage} className=\"uifw-statusbar-message-detailed\" />\n            }\n          </MessageLayout>\n        }\n      />\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"StickyMessage.js","sourceRoot":"","sources":["../../../../src/appui-react/messages/StickyMessage.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AAE9E,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAYtD;;GAEG;AACH,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAC7D,MAAM,QAAQ,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,UAAU,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC;IAC1C,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,UAAU,CAC3B,+BAA+B,EAC/B,OAAO,IAAI,cAAc,CAC1B,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAE,UAAU;QACxB,oBAAC,iBAAiB,IAChB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,IAAI,EACpB,OAAO,EAAE,WAAW,EACpB,OAAO,EACL,oBAAC,aAAa;gBACZ,oBAAC,YAAY,IAAC,OAAO,EAAE,cAAc,CAAC,YAAY,EAAE,SAAS,EAAC,8BAA8B,GAAG;gBAC9F,cAAc,CAAC,eAAe;oBAC7B,oBAAC,YAAY,IAAC,OAAO,EAAE,cAAc,CAAC,eAAe,EAAE,SAAS,EAAC,iCAAiC,GAAG,CAEzF,GAElB,CACE,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Notification\r\n */\r\n\r\nimport \"./StickyMessage.scss\";\r\nimport * as React from \"react\";\r\nimport classnames from \"classnames\";\r\nimport { MessageSeverity } from \"@itwin/appui-abstract\";\r\nimport { MessageLayout } from \"@itwin/appui-layout-react\";\r\nimport { ToastPresentation } from \"@itwin/itwinui-react/cjs/core/Toast/Toast\";\r\nimport { NotifyMessageDetailsType } from \"../messages/ReactNotifyMessageDetails\";\r\nimport { MessageLabel } from \"./MessageLabel\";\r\nimport { getToastCategory } from \"./getToastCategory\";\r\n\r\n/** Properties for a [[StickyMessage]]\r\n * @public\r\n */\r\nexport interface StickyMessageProps {\r\n  id: string;\r\n  messageDetails: NotifyMessageDetailsType;\r\n  severity: MessageSeverity;\r\n  closeMessage: (id: string) => void;\r\n}\r\n\r\n/** Sticky Message React component\r\n * @public\r\n */\r\nexport function StickyMessage(props: StickyMessageProps) {\r\n  const { id, messageDetails, severity, closeMessage } = props;\r\n  const category = getToastCategory(severity);\r\n  const [closing, setClosing] = React.useState(false);\r\n\r\n  const handleClose = () => {\r\n    setClosing(true);\r\n    setTimeout(() => closeMessage(id), 500);\r\n  };\r\n\r\n  const classNames = classnames(\r\n    \"uifw-statusbar-sticky-message\",\r\n    closing && \"uifw-closing\",\r\n  );\r\n\r\n  return (\r\n    <div className={classNames}>\r\n      <ToastPresentation\r\n        category={category}\r\n        hasCloseButton={true}\r\n        onClose={handleClose}\r\n        content={\r\n          <MessageLayout>\r\n            <MessageLabel message={messageDetails.briefMessage} className=\"uifw-statusbar-message-brief\" />\r\n            {messageDetails.detailedMessage &&\r\n              <MessageLabel message={messageDetails.detailedMessage} className=\"uifw-statusbar-message-detailed\" />\r\n            }\r\n          </MessageLayout>\r\n        }\r\n      />\r\n    </div>\r\n  );\r\n}\r\n"]}

package/lib/esm/appui-react/messages/StickyMessage.scss

@@ -1,22 +1,22 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-
-$close-button-size: 35px;
-
-.uifw-statusbar-sticky-message {
-  max-height: 100px;
-  transition: max-height 0.5s ease;
-
-  &.uifw-closing {
-    max-height: 0;
-    opacity: 0;
-  }
-
-  .uifw-statusbar-sticky-close {
-    min-width:    $close-button-size;
-    min-height:   $close-button-size;
-  }
-}
-
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+$close-button-size: 35px;
+
+.uifw-statusbar-sticky-message {
+  max-height: 100px;
+  transition: max-height 0.5s ease;
+
+  &.uifw-closing {
+    max-height: 0;
+    opacity: 0;
+  }
+
+  .uifw-statusbar-sticky-close {
+    min-width:    $close-button-size;
+    min-height:   $close-button-size;
+  }
+}
+

package/lib/esm/appui-react/messages/ToastMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastMessage.js","sourceRoot":"","sources":["../../../../src/appui-react/messages/ToastMessage.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AAE9E,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAatD;;GAEG;AACH,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAC1E,MAAM,QAAQ,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAE5C,OAAO,CACL,oBAAC,KAAK,IACJ,YAAY,EAAE,WAAW,EACzB,aAAa,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,EACrC,OAAO,EAAE,cAAc,CAAC,WAAW,CAAC,YAAY,EAChD,OAAO,EACL,oBAAC,iBAAiB,IAChB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EACL,oBAAC,aAAa;gBACZ,oBAAC,YAAY,IAAC,OAAO,EAAE,cAAc,CAAC,YAAY,EAAE,SAAS,EAAC,8BAA8B,GAAG;gBAC9F,cAAc,CAAC,eAAe;oBAC7B,oBAAC,YAAY,IAAC,OAAO,EAAE,cAAc,CAAC,eAAe,EAAE,SAAS,EAAC,iCAAiC,GAAG,CAEzF,GAElB,GAEJ,CACH,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/** @packageDocumentation\n * @module Notification\n */\n\nimport * as React from \"react\";\nimport { MessageSeverity } from \"@itwin/appui-abstract\";\nimport { MessageLayout, Toast } from \"@itwin/appui-layout-react\";\nimport { ToastPresentation } from \"@itwin/itwinui-react/cjs/core/Toast/Toast\";\nimport { NotifyMessageDetailsType } from \"../messages/ReactNotifyMessageDetails\";\nimport { MessageLabel } from \"./MessageLabel\";\nimport { getToastCategory } from \"./getToastCategory\";\n\n/** Properties for a [[ToastMessage]]\n * @public\n */\nexport interface ToastMessageProps {\n  id: string;\n  messageDetails: NotifyMessageDetailsType;\n  severity: MessageSeverity;\n  toastTarget: HTMLElement | null;\n  closeMessage: (id: string) => void;\n}\n\n/** Toast Message React component\n * @public\n */\nexport function ToastMessage(props: ToastMessageProps) {\n  const { id, messageDetails, severity, toastTarget, closeMessage } = props;\n  const category = getToastCategory(severity);\n\n  return (\n    <Toast\n      animateOutTo={toastTarget}\n      onAnimatedOut={() => closeMessage(id)}\n      timeout={messageDetails.displayTime.milliseconds}\n      content={\n        <ToastPresentation\n          category={category}\n          content={\n            <MessageLayout>\n              <MessageLabel message={messageDetails.briefMessage} className=\"uifw-statusbar-message-brief\" />\n              {messageDetails.detailedMessage &&\n                <MessageLabel message={messageDetails.detailedMessage} className=\"uifw-statusbar-message-detailed\" />\n              }\n            </MessageLayout>\n          }\n        />\n      }\n    />\n  );\n}\n"]}
+{"version":3,"file":"ToastMessage.js","sourceRoot":"","sources":["../../../../src/appui-react/messages/ToastMessage.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AAE9E,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAatD;;GAEG;AACH,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAC1E,MAAM,QAAQ,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAE5C,OAAO,CACL,oBAAC,KAAK,IACJ,YAAY,EAAE,WAAW,EACzB,aAAa,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,EACrC,OAAO,EAAE,cAAc,CAAC,WAAW,CAAC,YAAY,EAChD,OAAO,EACL,oBAAC,iBAAiB,IAChB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EACL,oBAAC,aAAa;gBACZ,oBAAC,YAAY,IAAC,OAAO,EAAE,cAAc,CAAC,YAAY,EAAE,SAAS,EAAC,8BAA8B,GAAG;gBAC9F,cAAc,CAAC,eAAe;oBAC7B,oBAAC,YAAY,IAAC,OAAO,EAAE,cAAc,CAAC,eAAe,EAAE,SAAS,EAAC,iCAAiC,GAAG,CAEzF,GAElB,GAEJ,CACH,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Notification\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { MessageSeverity } from \"@itwin/appui-abstract\";\r\nimport { MessageLayout, Toast } from \"@itwin/appui-layout-react\";\r\nimport { ToastPresentation } from \"@itwin/itwinui-react/cjs/core/Toast/Toast\";\r\nimport { NotifyMessageDetailsType } from \"../messages/ReactNotifyMessageDetails\";\r\nimport { MessageLabel } from \"./MessageLabel\";\r\nimport { getToastCategory } from \"./getToastCategory\";\r\n\r\n/** Properties for a [[ToastMessage]]\r\n * @public\r\n */\r\nexport interface ToastMessageProps {\r\n  id: string;\r\n  messageDetails: NotifyMessageDetailsType;\r\n  severity: MessageSeverity;\r\n  toastTarget: HTMLElement | null;\r\n  closeMessage: (id: string) => void;\r\n}\r\n\r\n/** Toast Message React component\r\n * @public\r\n */\r\nexport function ToastMessage(props: ToastMessageProps) {\r\n  const { id, messageDetails, severity, toastTarget, closeMessage } = props;\r\n  const category = getToastCategory(severity);\r\n\r\n  return (\r\n    <Toast\r\n      animateOutTo={toastTarget}\r\n      onAnimatedOut={() => closeMessage(id)}\r\n      timeout={messageDetails.displayTime.milliseconds}\r\n      content={\r\n        <ToastPresentation\r\n          category={category}\r\n          content={\r\n            <MessageLayout>\r\n              <MessageLabel message={messageDetails.briefMessage} className=\"uifw-statusbar-message-brief\" />\r\n              {messageDetails.detailedMessage &&\r\n                <MessageLabel message={messageDetails.detailedMessage} className=\"uifw-statusbar-message-detailed\" />\r\n              }\r\n            </MessageLayout>\r\n          }\r\n        />\r\n      }\r\n    />\r\n  );\r\n}\r\n"]}

package/lib/esm/appui-react/messages/getToastCategory.js.map

@@ -1 +1 @@
-{"version":3,"file":"getToastCategory.js","sourceRoot":"","sources":["../../../../src/appui-react/messages/getToastCategory.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAExD,gBAAgB;AAChB,MAAM,UAAU,gBAAgB,CAAC,QAAyB;IACxD,QAAQ,QAAQ,EAAE;QAChB,KAAK,eAAe,CAAC,WAAW;YAC9B,OAAO,eAAe,CAAC;QACzB,KAAK,eAAe,CAAC,OAAO;YAC1B,OAAO,SAAS,CAAC;QACnB,KAAK,eAAe,CAAC,KAAK,CAAC;QAC3B,KAAK,eAAe,CAAC,KAAK;YACxB,OAAO,UAAU,CAAC;QACpB,KAAK,eAAe,CAAC,IAAI,CAAC;QAC1B;YACE,OAAO,UAAU,CAAC;KACrB;AACH,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 Notification\n */\n\nimport { MessageSeverity } from \"@itwin/appui-abstract\";\n\n/** @internal */\nexport function getToastCategory(severity: MessageSeverity) {\n  switch (severity) {\n    case MessageSeverity.Information:\n      return \"informational\";\n    case MessageSeverity.Warning:\n      return \"warning\";\n    case MessageSeverity.Error:\n    case MessageSeverity.Fatal:\n      return \"negative\";\n    case MessageSeverity.None:\n    default:\n      return \"positive\";\n  }\n}\n"]}
+{"version":3,"file":"getToastCategory.js","sourceRoot":"","sources":["../../../../src/appui-react/messages/getToastCategory.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAExD,gBAAgB;AAChB,MAAM,UAAU,gBAAgB,CAAC,QAAyB;IACxD,QAAQ,QAAQ,EAAE;QAChB,KAAK,eAAe,CAAC,WAAW;YAC9B,OAAO,eAAe,CAAC;QACzB,KAAK,eAAe,CAAC,OAAO;YAC1B,OAAO,SAAS,CAAC;QACnB,KAAK,eAAe,CAAC,KAAK,CAAC;QAC3B,KAAK,eAAe,CAAC,KAAK;YACxB,OAAO,UAAU,CAAC;QACpB,KAAK,eAAe,CAAC,IAAI,CAAC;QAC1B;YACE,OAAO,UAAU,CAAC;KACrB;AACH,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Notification\r\n */\r\n\r\nimport { MessageSeverity } from \"@itwin/appui-abstract\";\r\n\r\n/** @internal */\r\nexport function getToastCategory(severity: MessageSeverity) {\r\n  switch (severity) {\r\n    case MessageSeverity.Information:\r\n      return \"informational\";\r\n    case MessageSeverity.Warning:\r\n      return \"warning\";\r\n    case MessageSeverity.Error:\r\n    case MessageSeverity.Fatal:\r\n      return \"negative\";\r\n    case MessageSeverity.None:\r\n    default:\r\n      return \"positive\";\r\n  }\r\n}\r\n"]}

package/lib/esm/appui-react/navigationaids/CubeNavigationAidControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"CubeNavigationAidControl.js","sourceRoot":"","sources":["../../../../src/appui-react/navigationaids/CubeNavigationAidControl.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D;;GAEG;AACH,MAAM,OAAO,wBAAyB,SAAQ,oBAAoB;IAGhE,YAAY,IAA4B,EAAE,OAAY;QACpD,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrB,IAAI,CAAC,SAAS,GAAG,oBAAC,iBAAiB,IAAC,gBAAgB,EAAE,OAAO,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,QAAQ,GAAI,CAAC;IACvG,CAAC;IAEe,OAAO,KAAyB,OAAO,MAAM,CAAC,CAAC,CAAC;;AAPlD,wCAAe,GAAG,mBAAmB,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 NavigationAids\n */\n\nimport * as React from \"react\";\nimport { CubeNavigationAid } from \"@itwin/imodel-components-react\";\nimport { ConfigurableCreateInfo } from \"../configurableui/ConfigurableUiControl\";\nimport { NavigationAidControl } from \"./NavigationAidControl\";\n\n/** Navigation Aid that displays an interactive rotation cube for Spatial views that synchronizes with the rotation of the iModel Viewport\n * @public\n */\nexport class CubeNavigationAidControl extends NavigationAidControl {\n  public static navigationAidId = \"CubeNavigationAid\";\n\n  constructor(info: ConfigurableCreateInfo, options: any) {\n    super(info, options);\n    this.reactNode = <CubeNavigationAid iModelConnection={options.imodel} viewport={options.viewport} />;\n  }\n\n  public override getSize(): string | undefined { return \"96px\"; }\n}\n"]}
+{"version":3,"file":"CubeNavigationAidControl.js","sourceRoot":"","sources":["../../../../src/appui-react/navigationaids/CubeNavigationAidControl.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D;;GAEG;AACH,MAAM,OAAO,wBAAyB,SAAQ,oBAAoB;IAGhE,YAAY,IAA4B,EAAE,OAAY;QACpD,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrB,IAAI,CAAC,SAAS,GAAG,oBAAC,iBAAiB,IAAC,gBAAgB,EAAE,OAAO,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,QAAQ,GAAI,CAAC;IACvG,CAAC;IAEe,OAAO,KAAyB,OAAO,MAAM,CAAC,CAAC,CAAC;;AAPlD,wCAAe,GAAG,mBAAmB,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module NavigationAids\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { CubeNavigationAid } from \"@itwin/imodel-components-react\";\r\nimport { ConfigurableCreateInfo } from \"../configurableui/ConfigurableUiControl\";\r\nimport { NavigationAidControl } from \"./NavigationAidControl\";\r\n\r\n/** Navigation Aid that displays an interactive rotation cube for Spatial views that synchronizes with the rotation of the iModel Viewport\r\n * @public\r\n */\r\nexport class CubeNavigationAidControl extends NavigationAidControl {\r\n  public static navigationAidId = \"CubeNavigationAid\";\r\n\r\n  constructor(info: ConfigurableCreateInfo, options: any) {\r\n    super(info, options);\r\n    this.reactNode = <CubeNavigationAid iModelConnection={options.imodel} viewport={options.viewport} />;\r\n  }\r\n\r\n  public override getSize(): string | undefined { return \"96px\"; }\r\n}\r\n"]}

package/lib/esm/appui-react/navigationaids/DrawingNavigationAidControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawingNavigationAidControl.js","sourceRoot":"","sources":["../../../../src/appui-react/navigationaids/DrawingNavigationAidControl.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAEtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D;;GAEG;AACH,MAAM,OAAO,2BAA4B,SAAQ,oBAAoB;IAGnE,YAAY,IAA4B,EAAE,OAAY;QACpD,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrB,IAAI,CAAC,SAAS,GAAG,oBAAC,oBAAoB,IAAC,gBAAgB,EAAE,OAAO,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,QAAQ,GAAI,CAAC;IAC1G,CAAC;IAEe,OAAO,KAAyB,OAAO,MAAM,CAAC,CAAC,CAAC;;AAPlD,2CAAe,GAAG,sBAAsB,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 NavigationAids\n */\n\nimport * as React from \"react\";\nimport { DrawingNavigationAid } from \"@itwin/imodel-components-react\";\nimport { ConfigurableCreateInfo } from \"../configurableui/ConfigurableUiControl\";\nimport { NavigationAidControl } from \"./NavigationAidControl\";\n\n/** Navigation Aid that displays an interactive mini-map for Drawing views that synchronizes with the iModel Viewport.\n * @beta\n */\nexport class DrawingNavigationAidControl extends NavigationAidControl {\n  public static navigationAidId = \"DrawingNavigationAid\";\n\n  constructor(info: ConfigurableCreateInfo, options: any) {\n    super(info, options);\n    this.reactNode = <DrawingNavigationAid iModelConnection={options.imodel} viewport={options.viewport} />;\n  }\n\n  public override getSize(): string | undefined { return \"96px\"; }\n}\n"]}
+{"version":3,"file":"DrawingNavigationAidControl.js","sourceRoot":"","sources":["../../../../src/appui-react/navigationaids/DrawingNavigationAidControl.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAEtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D;;GAEG;AACH,MAAM,OAAO,2BAA4B,SAAQ,oBAAoB;IAGnE,YAAY,IAA4B,EAAE,OAAY;QACpD,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrB,IAAI,CAAC,SAAS,GAAG,oBAAC,oBAAoB,IAAC,gBAAgB,EAAE,OAAO,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,QAAQ,GAAI,CAAC;IAC1G,CAAC;IAEe,OAAO,KAAyB,OAAO,MAAM,CAAC,CAAC,CAAC;;AAPlD,2CAAe,GAAG,sBAAsB,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module NavigationAids\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { DrawingNavigationAid } from \"@itwin/imodel-components-react\";\r\nimport { ConfigurableCreateInfo } from \"../configurableui/ConfigurableUiControl\";\r\nimport { NavigationAidControl } from \"./NavigationAidControl\";\r\n\r\n/** Navigation Aid that displays an interactive mini-map for Drawing views that synchronizes with the iModel Viewport.\r\n * @beta\r\n */\r\nexport class DrawingNavigationAidControl extends NavigationAidControl {\r\n  public static navigationAidId = \"DrawingNavigationAid\";\r\n\r\n  constructor(info: ConfigurableCreateInfo, options: any) {\r\n    super(info, options);\r\n    this.reactNode = <DrawingNavigationAid iModelConnection={options.imodel} viewport={options.viewport} />;\r\n  }\r\n\r\n  public override getSize(): string | undefined { return \"96px\"; }\r\n}\r\n"]}

package/lib/esm/appui-react/navigationaids/NavigationAidControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationAidControl.js","sourceRoot":"","sources":["../../../../src/appui-react/navigationaids/NavigationAidControl.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAIH,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAA0B,qBAAqB,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AAUnI;;GAEG;AACH,MAAM,OAAO,2BAA4B,SAAQ,OAAwC;CAAI;AAE7F;;GAEG;AACH,MAAM,OAAO,oBAAqB,SAAQ,qBAAqB;IAG7D,YAAY,IAA4B,EAAE,OAAY;QACpD,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IACvB,CAAC;IAED,qDAAqD;IACrD,IAAW,SAAS,KAAsB,OAAO,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;IACnE,IAAW,SAAS,CAAC,CAAkB,IAAI,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC;IAEjE,+FAA+F;IACxF,OAAO,KAAyB,OAAO,SAAS,CAAC,CAAC,CAAC;IAE1D,oCAAoC;IAC7B,OAAO,KAAgC,OAAO,yBAAyB,CAAC,aAAa,CAAC,CAAC,CAAC;CAChG","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 NavigationAids\n */\n\nimport * as React from \"react\";\nimport { IModelConnection } from \"@itwin/core-frontend\";\nimport { UiEvent } from \"@itwin/core-react\";\nimport { ConfigurableCreateInfo, ConfigurableUiControl, ConfigurableUiControlType } from \"../configurableui/ConfigurableUiControl\";\n\n/** NavigationAid Activated Event Args interface.\n * @public\n */\nexport interface NavigationAidActivatedEventArgs {\n  navigationAidId: string;\n  iModelConnection: IModelConnection;\n}\n\n/** NavigationAid Activated Event class.\n * @public\n */\nexport class NavigationAidActivatedEvent extends UiEvent<NavigationAidActivatedEventArgs> { }\n\n/** The base class for Navigation Aid controls.\n * @public\n */\nexport class NavigationAidControl extends ConfigurableUiControl {\n  private _reactNode: React.ReactNode;\n\n  constructor(info: ConfigurableCreateInfo, options: any) {\n    super(info, options);\n  }\n\n  /** The React element associated with this control */\n  public get reactNode(): React.ReactNode { return this._reactNode; }\n  public set reactNode(r: React.ReactNode) { this._reactNode = r; }\n\n  /** Square size of navigation aid. Default size is \"64px\". Override to set a different size. */\n  public getSize(): string | undefined { return undefined; }\n\n  /** Get the type of this control. */\n  public getType(): ConfigurableUiControlType { return ConfigurableUiControlType.NavigationAid; }\n}\n"]}
+{"version":3,"file":"NavigationAidControl.js","sourceRoot":"","sources":["../../../../src/appui-react/navigationaids/NavigationAidControl.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAIH,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAA0B,qBAAqB,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AAUnI;;GAEG;AACH,MAAM,OAAO,2BAA4B,SAAQ,OAAwC;CAAI;AAE7F;;GAEG;AACH,MAAM,OAAO,oBAAqB,SAAQ,qBAAqB;IAG7D,YAAY,IAA4B,EAAE,OAAY;QACpD,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IACvB,CAAC;IAED,qDAAqD;IACrD,IAAW,SAAS,KAAsB,OAAO,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;IACnE,IAAW,SAAS,CAAC,CAAkB,IAAI,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC;IAEjE,+FAA+F;IACxF,OAAO,KAAyB,OAAO,SAAS,CAAC,CAAC,CAAC;IAE1D,oCAAoC;IAC7B,OAAO,KAAgC,OAAO,yBAAyB,CAAC,aAAa,CAAC,CAAC,CAAC;CAChG","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module NavigationAids\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { IModelConnection } from \"@itwin/core-frontend\";\r\nimport { UiEvent } from \"@itwin/core-react\";\r\nimport { ConfigurableCreateInfo, ConfigurableUiControl, ConfigurableUiControlType } from \"../configurableui/ConfigurableUiControl\";\r\n\r\n/** NavigationAid Activated Event Args interface.\r\n * @public\r\n */\r\nexport interface NavigationAidActivatedEventArgs {\r\n  navigationAidId: string;\r\n  iModelConnection: IModelConnection;\r\n}\r\n\r\n/** NavigationAid Activated Event class.\r\n * @public\r\n */\r\nexport class NavigationAidActivatedEvent extends UiEvent<NavigationAidActivatedEventArgs> { }\r\n\r\n/** The base class for Navigation Aid controls.\r\n * @public\r\n */\r\nexport class NavigationAidControl extends ConfigurableUiControl {\r\n  private _reactNode: React.ReactNode;\r\n\r\n  constructor(info: ConfigurableCreateInfo, options: any) {\r\n    super(info, options);\r\n  }\r\n\r\n  /** The React element associated with this control */\r\n  public get reactNode(): React.ReactNode { return this._reactNode; }\r\n  public set reactNode(r: React.ReactNode) { this._reactNode = r; }\r\n\r\n  /** Square size of navigation aid. Default size is \"64px\". Override to set a different size. */\r\n  public getSize(): string | undefined { return undefined; }\r\n\r\n  /** Get the type of this control. */\r\n  public getType(): ConfigurableUiControlType { return ConfigurableUiControlType.NavigationAid; }\r\n}\r\n"]}

package/lib/esm/appui-react/navigationaids/SheetNavigationAid.js.map

@@ -1 +1 @@
-{"version":3,"file":"SheetNavigationAid.js","sourceRoot":"","sources":["../../../../src/appui-react/navigationaids/SheetNavigationAid.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 NavigationAids\n */\n\nimport \"./SheetNavigationAid.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { IModelApp, IModelConnection, ScreenViewport, SelectedViewportChangedArgs } from \"@itwin/core-frontend\";\nimport { UiComponents } from \"@itwin/components-react\";\nimport { ViewIdChangedEventArgs, ViewportComponentEvents } from \"@itwin/imodel-components-react\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { ConfigurableCreateInfo } from \"../configurableui/ConfigurableUiControl\";\nimport { FrontstageManager, ModalFrontstageInfo } from \"../frontstage/FrontstageManager\";\nimport { UiFramework } from \"../UiFramework\";\nimport { ViewUtilities } from \"../utils/ViewUtilities\";\nimport { NavigationAidControl } from \"./NavigationAidControl\";\nimport { CardContainer, CardSelectedEventArgs, SheetsModalFrontstage } from \"./SheetsModalFrontstage\";\nimport { ProgressRadial } from \"@itwin/itwinui-react\";\n\n/** A Sheet Navigation Aid control.\n * @alpha\n */\nexport class SheetNavigationAidControl extends NavigationAidControl {\n  public static navigationAidId = \"SheetNavigationAid\";\n\n  constructor(info: ConfigurableCreateInfo, options: any) {\n    super(info, options);\n    this.reactNode = <SheetNavigationAid iModelConnection={options.imodel} />;\n  }\n\n  public override getSize(): string | undefined { return \"96px\"; }\n}\n\n/** Data displayed about sheet\n * @alpha\n */\nexport interface SheetData {\n  name: string;\n  viewId: string;\n}\n\n/** Properties for the [[SheetNavigationAid]] component\n * @alpha\n */\nexport interface SheetNavigationProps extends CommonProps {\n  iModelConnection: IModelConnection;\n}\n\n/** @internal */\ninterface SheetNavigationState {\n  index: number;\n  sheetData: SheetData[];\n}\n\n/** A Sheet Navigation Aid.\n * @alpha\n */\nexport class SheetNavigationAid extends React.Component<SheetNavigationProps, SheetNavigationState> {\n  private _isMounted = false;\n\n  /** @internal */\n  public override readonly state: Readonly<SheetNavigationState> = {\n    index: 0,\n    sheetData: [],\n  };\n\n  private _viewport: ScreenViewport | undefined;\n\n  constructor(props: SheetNavigationProps) {\n    super(props);\n\n    this._viewport = IModelApp.viewManager.selectedView;\n  }\n\n  /** Adds listeners when components mounts */\n  public override async componentDidMount() {\n    this._isMounted = true;\n\n    CardContainer.onCardSelectedEvent.addListener(this._handleCardSelected);\n    ViewportComponentEvents.onViewIdChangedEvent.addListener(this._handleViewIdChanged);\n\n    IModelApp.viewManager.onSelectedViewportChanged.addListener(this._handleSelectedViewportChanged);\n\n    const stateData = await this._setupSheets();\n\n    if (this._isMounted)\n      this.setState(stateData);\n  }\n\n  /** Removes listeners when component will unmount */\n  public override componentWillUnmount() {\n    this._isMounted = false;\n\n    CardContainer.onCardSelectedEvent.removeListener(this._handleCardSelected);\n    ViewportComponentEvents.onViewIdChangedEvent.removeListener(this._handleViewIdChanged);\n\n    IModelApp.viewManager.onSelectedViewportChanged.removeListener(this._handleSelectedViewportChanged);\n  }\n\n  /** Queries for sheet info and sets as sheetData */\n  private async _setupSheets(): Promise<SheetNavigationState> {\n    const stateData: SheetNavigationState = {\n      index: 0,\n      sheetData: [],\n    };\n\n    // istanbul ignore else\n    if (!this.props.iModelConnection || !this.props.iModelConnection.views.getViewList)\n      return stateData;\n\n    // istanbul ignore next\n    let viewId = \"\";\n    // istanbul ignore next\n    if (this._viewport) {\n      viewId = this._viewport.view.id.toString();\n    }\n\n    // istanbul ignore next\n    const sheets = await this.props.iModelConnection.views.getViewList({ from: \"BisCore.SheetViewDefinition\" });\n    // istanbul ignore next\n    sheets.forEach((viewSpec: IModelConnection.ViewSpec, index: number) => {\n      stateData.sheetData.push({ name: viewSpec.name, viewId: viewSpec.id });\n      if (viewSpec.id === viewId)\n        stateData.index = index;\n    });\n\n    // istanbul ignore next\n    return stateData;\n  }\n\n  /** @internal */\n  public override render(): React.ReactNode {\n    const name = (this.state.sheetData.length > 0) ? /* istanbul ignore next */ this.state.sheetData[this.state.index].name : \"\";\n    const sheet = UiFramework.translate(\"general.sheet\");\n    const ofStr = UiComponents.translate(\"general.of\");\n    const leftIndex = this.state.index === 0 ? this.state.sheetData.length - 1 : /* istanbul ignore next */ this.state.index - 1;\n    const rightIndex = this.state.index >= this.state.sheetData.length - 1 ? 0 : /* istanbul ignore next */this.state.index + 1;\n    const leftTitle = this.state.sheetData[leftIndex] ? /* istanbul ignore next */ this.state.sheetData[leftIndex].name : undefined;\n    const rightTitle = this.state.sheetData[rightIndex] ? /* istanbul ignore next */ this.state.sheetData[rightIndex].name : undefined;\n\n    let content: React.ReactNode;\n    // istanbul ignore if\n    if (this.state.sheetData.length > 0) {\n      content = (\n        <>\n          <div className=\"sheet-title\">{sheet}</div>\n          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n          <div className=\"sheet-name\" title={name} onClick={this._handleOnClickSheetName}\n            role=\"button\" tabIndex={-1}>\n            {name}\n          </div>\n          <div className=\"sheet-container\">\n            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n            <div className=\"sheet-caret icon icon-caret-left\" onClick={this._handleOnClickLeftArrow}\n              role=\"button\" tabIndex={-1} title={leftTitle} />\n            <div>{this.state.index + 1} {ofStr} {this.state.sheetData.length}</div>\n            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n            <div className=\"sheet-caret icon icon-caret-right\" onClick={this._handleOnClickRightArrow}\n              role=\"button\" tabIndex={-1} title={rightTitle} />\n          </div>\n        </>\n      );\n    } else {\n      content = <ProgressRadial size=\"x-small\" indeterminate />;\n    }\n\n    return (\n      <div className={classnames(\"uifw-sheet-navigation\", this.props.className)} style={this.props.style}>\n        <div className=\"gradient\"></div>\n        {content}\n      </div>\n    );\n  }\n\n  /** Sets index of newly selected card */\n  private _handleCardSelected = (event: CardSelectedEventArgs) => {\n    event && this.setState({\n      index: event.index,\n    });\n  };\n\n  /** Updates view to the next lowest index in sheetData */\n  // istanbul ignore next\n  private _handleOnClickLeftArrow = () => {\n    this.setState(\n      (prevState) => ({ index: prevState.index <= 0 ? prevState.sheetData.length - 1 : prevState.index - 1 }),\n      async () => this._updateView());\n  };\n\n  /** Updates view to next highest index in sheetData */\n  // istanbul ignore next\n  private _handleOnClickRightArrow = () => {\n    this.setState(\n      (prevState) => ({ index: (prevState.index + 1) % prevState.sheetData.length }),\n      async () => this._updateView());\n  };\n\n  /** Handles a Viewport change & synchs the index */\n  // istanbul ignore next\n  private _handleSelectedViewportChanged = (args: SelectedViewportChangedArgs) => {\n    if (args.current) {\n      this._handleViewportChanged(args.current);\n    }\n  };\n\n  // istanbul ignore next\n  private _handleViewIdChanged = (args: ViewIdChangedEventArgs) => {\n    if (this._viewport === args.viewport)\n      this._handleViewportChanged(args.viewport as ScreenViewport);\n  };\n\n  /** Handles a Viewport change & synchs the index */\n  // istanbul ignore next\n  private _handleViewportChanged = (viewport: ScreenViewport) => {\n    const className = ViewUtilities.getBisBaseClass(viewport.view.classFullName);\n\n    if (ViewUtilities.isSheet(className)) {\n      this._viewport = viewport;\n\n      const viewId = this._viewport.view.id.toString();\n\n      const index = this.state.sheetData.findIndex((sheetData: SheetData) => {\n        return (viewId === sheetData.viewId);\n      });\n\n      if (index >= 0)\n        this.setState({ index });\n    }\n  };\n\n  /** Updates view to currently set sheet */\n  // istanbul ignore next\n  private async _updateView() {\n    const viewState = await this.props.iModelConnection.views.load(this.state.sheetData[this.state.index].viewId);\n    if (this._viewport)\n      this._viewport.changeView(viewState);\n  }\n\n  /** Creates a new SheetsModalFrontstage */\n  // istanbul ignore next\n  private modalFrontstage(): ModalFrontstageInfo {\n    return new SheetsModalFrontstage(this.state.sheetData, this.props.iModelConnection, this.state.index);\n  }\n\n  /** Opens a new SheetsModelFrontstage on sheetName click */\n  // istanbul ignore next\n  private _handleOnClickSheetName = () => {\n    FrontstageManager.openModalFrontstage(this.modalFrontstage());\n  };\n}\n"]}
+{"version":3,"file":"SheetNavigationAid.js","sourceRoot":"","sources":["../../../../src/appui-react/navigationaids/SheetNavigationAid.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,2BAA2B,CAAC;AACnC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAiE,MAAM,sBAAsB,CAAC;AAChH,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAA0B,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AAGjG,OAAO,EAAE,iBAAiB,EAAuB,MAAM,iCAAiC,CAAC;AACzF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAyB,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AACtG,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD;;GAEG;AACH,MAAM,OAAO,yBAA0B,SAAQ,oBAAoB;IAGjE,YAAY,IAA4B,EAAE,OAAY;QACpD,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrB,IAAI,CAAC,SAAS,GAAG,oBAAC,kBAAkB,IAAC,gBAAgB,EAAE,OAAO,CAAC,MAAM,GAAI,CAAC;IAC5E,CAAC;IAEe,OAAO,KAAyB,OAAO,MAAM,CAAC,CAAC,CAAC;;AAPlD,yCAAe,GAAG,oBAAoB,CAAC;AA+BvD;;GAEG;AACH,MAAM,OAAO,kBAAmB,SAAQ,KAAK,CAAC,SAAqD;IAWjG,YAAY,KAA2B;QACrC,KAAK,CAAC,KAAK,CAAC,CAAC;QAXP,eAAU,GAAG,KAAK,CAAC;QAE3B,gBAAgB;QACS,UAAK,GAAmC;YAC/D,KAAK,EAAE,CAAC;YACR,SAAS,EAAE,EAAE;SACd,CAAC;QA8GF,wCAAwC;QAChC,wBAAmB,GAAG,CAAC,KAA4B,EAAE,EAAE;YAC7D,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC;gBACrB,KAAK,EAAE,KAAK,CAAC,KAAK;aACnB,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,yDAAyD;QACzD,uBAAuB;QACf,4BAAuB,GAAG,GAAG,EAAE;YACrC,IAAI,CAAC,QAAQ,CACX,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,EACvG,KAAK,IAAI,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;QACpC,CAAC,CAAC;QAEF,sDAAsD;QACtD,uBAAuB;QACf,6BAAwB,GAAG,GAAG,EAAE;YACtC,IAAI,CAAC,QAAQ,CACX,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,SAAS,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,SAAS,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC,EAC9E,KAAK,IAAI,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;QACpC,CAAC,CAAC;QAEF,mDAAmD;QACnD,uBAAuB;QACf,mCAA8B,GAAG,CAAC,IAAiC,EAAE,EAAE;YAC7E,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;aAC3C;QACH,CAAC,CAAC;QAEF,uBAAuB;QACf,yBAAoB,GAAG,CAAC,IAA4B,EAAE,EAAE;YAC9D,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,QAAQ;gBAClC,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,QAA0B,CAAC,CAAC;QACjE,CAAC,CAAC;QAEF,mDAAmD;QACnD,uBAAuB;QACf,2BAAsB,GAAG,CAAC,QAAwB,EAAE,EAAE;YAC5D,MAAM,SAAS,GAAG,aAAa,CAAC,eAAe,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YAE7E,IAAI,aAAa,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;gBACpC,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;gBAE1B,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC;gBAEjD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,SAAoB,EAAE,EAAE;oBACpE,OAAO,CAAC,MAAM,KAAK,SAAS,CAAC,MAAM,CAAC,CAAC;gBACvC,CAAC,CAAC,CAAC;gBAEH,IAAI,KAAK,IAAI,CAAC;oBACZ,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;aAC5B;QACH,CAAC,CAAC;QAgBF,2DAA2D;QAC3D,uBAAuB;QACf,4BAAuB,GAAG,GAAG,EAAE;YACrC,iBAAiB,CAAC,mBAAmB,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;QAChE,CAAC,CAAC;QAjLA,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC,WAAW,CAAC,YAAY,CAAC;IACtD,CAAC;IAED,4CAA4C;IAC5B,KAAK,CAAC,iBAAiB;QACrC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QAEvB,aAAa,CAAC,mBAAmB,CAAC,WAAW,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;QACxE,uBAAuB,CAAC,oBAAoB,CAAC,WAAW,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;QAEpF,SAAS,CAAC,WAAW,CAAC,yBAAyB,CAAC,WAAW,CAAC,IAAI,CAAC,8BAA8B,CAAC,CAAC;QAEjG,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC;QAE5C,IAAI,IAAI,CAAC,UAAU;YACjB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;IAC7B,CAAC;IAED,oDAAoD;IACpC,oBAAoB;QAClC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QAExB,aAAa,CAAC,mBAAmB,CAAC,cAAc,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;QAC3E,uBAAuB,CAAC,oBAAoB,CAAC,cAAc,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;QAEvF,SAAS,CAAC,WAAW,CAAC,yBAAyB,CAAC,cAAc,CAAC,IAAI,CAAC,8BAA8B,CAAC,CAAC;IACtG,CAAC;IAED,mDAAmD;IAC3C,KAAK,CAAC,YAAY;QACxB,MAAM,SAAS,GAAyB;YACtC,KAAK,EAAE,CAAC;YACR,SAAS,EAAE,EAAE;SACd,CAAC;QAEF,uBAAuB;QACvB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,KAAK,CAAC,WAAW;YAChF,OAAO,SAAS,CAAC;QAEnB,uBAAuB;QACvB,IAAI,MAAM,GAAG,EAAE,CAAC;QAChB,uBAAuB;QACvB,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC;SAC5C;QAED,uBAAuB;QACvB,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,6BAA6B,EAAE,CAAC,CAAC;QAC5G,uBAAuB;QACvB,MAAM,CAAC,OAAO,CAAC,CAAC,QAAmC,EAAE,KAAa,EAAE,EAAE;YACpE,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,EAAE,CAAC,CAAC;YACvE,IAAI,QAAQ,CAAC,EAAE,KAAK,MAAM;gBACxB,SAAS,CAAC,KAAK,GAAG,KAAK,CAAC;QAC5B,CAAC,CAAC,CAAC;QAEH,uBAAuB;QACvB,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,gBAAgB;IACA,MAAM;QACpB,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;QAC7H,MAAM,KAAK,GAAG,WAAW,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;QACrD,MAAM,KAAK,GAAG,YAAY,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;QACnD,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC;QAC7H,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAAA,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC;QAC5H,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;QAChI,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;QAEnI,IAAI,OAAwB,CAAC;QAC7B,qBAAqB;QACrB,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE;YACnC,OAAO,GAAG,CACR;gBACE,6BAAK,SAAS,EAAC,aAAa,IAAE,KAAK,CAAO;gBAE1C,6BAAK,SAAS,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,uBAAuB,EAC5E,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,CAAC,IACzB,IAAI,CACD;gBACN,6BAAK,SAAS,EAAC,iBAAiB;oBAE9B,6BAAK,SAAS,EAAC,kCAAkC,EAAC,OAAO,EAAE,IAAI,CAAC,uBAAuB,EACrF,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,GAAI;oBAClD;wBAAM,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC;;wBAAG,KAAK;;wBAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAO;oBAEvE,6BAAK,SAAS,EAAC,mCAAmC,EAAC,OAAO,EAAE,IAAI,CAAC,wBAAwB,EACvF,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,UAAU,GAAI,CAC/C,CACL,CACJ,CAAC;SACH;aAAM;YACL,OAAO,GAAG,oBAAC,cAAc,IAAC,IAAI,EAAC,SAAS,EAAC,aAAa,SAAG,CAAC;SAC3D;QAED,OAAO,CACL,6BAAK,SAAS,EAAE,UAAU,CAAC,uBAAuB,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YAChG,6BAAK,SAAS,EAAC,UAAU,GAAO;YAC/B,OAAO,CACJ,CACP,CAAC;IACJ,CAAC;IA0DD,0CAA0C;IAC1C,uBAAuB;IACf,KAAK,CAAC,WAAW;QACvB,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;QAC9G,IAAI,IAAI,CAAC,SAAS;YAChB,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;IACzC,CAAC;IAED,0CAA0C;IAC1C,uBAAuB;IACf,eAAe;QACrB,OAAO,IAAI,qBAAqB,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACxG,CAAC;CAOF","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module NavigationAids\r\n */\r\n\r\nimport \"./SheetNavigationAid.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { IModelApp, IModelConnection, ScreenViewport, SelectedViewportChangedArgs } from \"@itwin/core-frontend\";\r\nimport { UiComponents } from \"@itwin/components-react\";\r\nimport { ViewIdChangedEventArgs, ViewportComponentEvents } from \"@itwin/imodel-components-react\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { ConfigurableCreateInfo } from \"../configurableui/ConfigurableUiControl\";\r\nimport { FrontstageManager, ModalFrontstageInfo } from \"../frontstage/FrontstageManager\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { ViewUtilities } from \"../utils/ViewUtilities\";\r\nimport { NavigationAidControl } from \"./NavigationAidControl\";\r\nimport { CardContainer, CardSelectedEventArgs, SheetsModalFrontstage } from \"./SheetsModalFrontstage\";\r\nimport { ProgressRadial } from \"@itwin/itwinui-react\";\r\n\r\n/** A Sheet Navigation Aid control.\r\n * @alpha\r\n */\r\nexport class SheetNavigationAidControl extends NavigationAidControl {\r\n  public static navigationAidId = \"SheetNavigationAid\";\r\n\r\n  constructor(info: ConfigurableCreateInfo, options: any) {\r\n    super(info, options);\r\n    this.reactNode = <SheetNavigationAid iModelConnection={options.imodel} />;\r\n  }\r\n\r\n  public override getSize(): string | undefined { return \"96px\"; }\r\n}\r\n\r\n/** Data displayed about sheet\r\n * @alpha\r\n */\r\nexport interface SheetData {\r\n  name: string;\r\n  viewId: string;\r\n}\r\n\r\n/** Properties for the [[SheetNavigationAid]] component\r\n * @alpha\r\n */\r\nexport interface SheetNavigationProps extends CommonProps {\r\n  iModelConnection: IModelConnection;\r\n}\r\n\r\n/** @internal */\r\ninterface SheetNavigationState {\r\n  index: number;\r\n  sheetData: SheetData[];\r\n}\r\n\r\n/** A Sheet Navigation Aid.\r\n * @alpha\r\n */\r\nexport class SheetNavigationAid extends React.Component<SheetNavigationProps, SheetNavigationState> {\r\n  private _isMounted = false;\r\n\r\n  /** @internal */\r\n  public override readonly state: Readonly<SheetNavigationState> = {\r\n    index: 0,\r\n    sheetData: [],\r\n  };\r\n\r\n  private _viewport: ScreenViewport | undefined;\r\n\r\n  constructor(props: SheetNavigationProps) {\r\n    super(props);\r\n\r\n    this._viewport = IModelApp.viewManager.selectedView;\r\n  }\r\n\r\n  /** Adds listeners when components mounts */\r\n  public override async componentDidMount() {\r\n    this._isMounted = true;\r\n\r\n    CardContainer.onCardSelectedEvent.addListener(this._handleCardSelected);\r\n    ViewportComponentEvents.onViewIdChangedEvent.addListener(this._handleViewIdChanged);\r\n\r\n    IModelApp.viewManager.onSelectedViewportChanged.addListener(this._handleSelectedViewportChanged);\r\n\r\n    const stateData = await this._setupSheets();\r\n\r\n    if (this._isMounted)\r\n      this.setState(stateData);\r\n  }\r\n\r\n  /** Removes listeners when component will unmount */\r\n  public override componentWillUnmount() {\r\n    this._isMounted = false;\r\n\r\n    CardContainer.onCardSelectedEvent.removeListener(this._handleCardSelected);\r\n    ViewportComponentEvents.onViewIdChangedEvent.removeListener(this._handleViewIdChanged);\r\n\r\n    IModelApp.viewManager.onSelectedViewportChanged.removeListener(this._handleSelectedViewportChanged);\r\n  }\r\n\r\n  /** Queries for sheet info and sets as sheetData */\r\n  private async _setupSheets(): Promise<SheetNavigationState> {\r\n    const stateData: SheetNavigationState = {\r\n      index: 0,\r\n      sheetData: [],\r\n    };\r\n\r\n    // istanbul ignore else\r\n    if (!this.props.iModelConnection || !this.props.iModelConnection.views.getViewList)\r\n      return stateData;\r\n\r\n    // istanbul ignore next\r\n    let viewId = \"\";\r\n    // istanbul ignore next\r\n    if (this._viewport) {\r\n      viewId = this._viewport.view.id.toString();\r\n    }\r\n\r\n    // istanbul ignore next\r\n    const sheets = await this.props.iModelConnection.views.getViewList({ from: \"BisCore.SheetViewDefinition\" });\r\n    // istanbul ignore next\r\n    sheets.forEach((viewSpec: IModelConnection.ViewSpec, index: number) => {\r\n      stateData.sheetData.push({ name: viewSpec.name, viewId: viewSpec.id });\r\n      if (viewSpec.id === viewId)\r\n        stateData.index = index;\r\n    });\r\n\r\n    // istanbul ignore next\r\n    return stateData;\r\n  }\r\n\r\n  /** @internal */\r\n  public override render(): React.ReactNode {\r\n    const name = (this.state.sheetData.length > 0) ? /* istanbul ignore next */ this.state.sheetData[this.state.index].name : \"\";\r\n    const sheet = UiFramework.translate(\"general.sheet\");\r\n    const ofStr = UiComponents.translate(\"general.of\");\r\n    const leftIndex = this.state.index === 0 ? this.state.sheetData.length - 1 : /* istanbul ignore next */ this.state.index - 1;\r\n    const rightIndex = this.state.index >= this.state.sheetData.length - 1 ? 0 : /* istanbul ignore next */this.state.index + 1;\r\n    const leftTitle = this.state.sheetData[leftIndex] ? /* istanbul ignore next */ this.state.sheetData[leftIndex].name : undefined;\r\n    const rightTitle = this.state.sheetData[rightIndex] ? /* istanbul ignore next */ this.state.sheetData[rightIndex].name : undefined;\r\n\r\n    let content: React.ReactNode;\r\n    // istanbul ignore if\r\n    if (this.state.sheetData.length > 0) {\r\n      content = (\r\n        <>\r\n          <div className=\"sheet-title\">{sheet}</div>\r\n          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\r\n          <div className=\"sheet-name\" title={name} onClick={this._handleOnClickSheetName}\r\n            role=\"button\" tabIndex={-1}>\r\n            {name}\r\n          </div>\r\n          <div className=\"sheet-container\">\r\n            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\r\n            <div className=\"sheet-caret icon icon-caret-left\" onClick={this._handleOnClickLeftArrow}\r\n              role=\"button\" tabIndex={-1} title={leftTitle} />\r\n            <div>{this.state.index + 1} {ofStr} {this.state.sheetData.length}</div>\r\n            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\r\n            <div className=\"sheet-caret icon icon-caret-right\" onClick={this._handleOnClickRightArrow}\r\n              role=\"button\" tabIndex={-1} title={rightTitle} />\r\n          </div>\r\n        </>\r\n      );\r\n    } else {\r\n      content = <ProgressRadial size=\"x-small\" indeterminate />;\r\n    }\r\n\r\n    return (\r\n      <div className={classnames(\"uifw-sheet-navigation\", this.props.className)} style={this.props.style}>\r\n        <div className=\"gradient\"></div>\r\n        {content}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  /** Sets index of newly selected card */\r\n  private _handleCardSelected = (event: CardSelectedEventArgs) => {\r\n    event && this.setState({\r\n      index: event.index,\r\n    });\r\n  };\r\n\r\n  /** Updates view to the next lowest index in sheetData */\r\n  // istanbul ignore next\r\n  private _handleOnClickLeftArrow = () => {\r\n    this.setState(\r\n      (prevState) => ({ index: prevState.index <= 0 ? prevState.sheetData.length - 1 : prevState.index - 1 }),\r\n      async () => this._updateView());\r\n  };\r\n\r\n  /** Updates view to next highest index in sheetData */\r\n  // istanbul ignore next\r\n  private _handleOnClickRightArrow = () => {\r\n    this.setState(\r\n      (prevState) => ({ index: (prevState.index + 1) % prevState.sheetData.length }),\r\n      async () => this._updateView());\r\n  };\r\n\r\n  /** Handles a Viewport change & synchs the index */\r\n  // istanbul ignore next\r\n  private _handleSelectedViewportChanged = (args: SelectedViewportChangedArgs) => {\r\n    if (args.current) {\r\n      this._handleViewportChanged(args.current);\r\n    }\r\n  };\r\n\r\n  // istanbul ignore next\r\n  private _handleViewIdChanged = (args: ViewIdChangedEventArgs) => {\r\n    if (this._viewport === args.viewport)\r\n      this._handleViewportChanged(args.viewport as ScreenViewport);\r\n  };\r\n\r\n  /** Handles a Viewport change & synchs the index */\r\n  // istanbul ignore next\r\n  private _handleViewportChanged = (viewport: ScreenViewport) => {\r\n    const className = ViewUtilities.getBisBaseClass(viewport.view.classFullName);\r\n\r\n    if (ViewUtilities.isSheet(className)) {\r\n      this._viewport = viewport;\r\n\r\n      const viewId = this._viewport.view.id.toString();\r\n\r\n      const index = this.state.sheetData.findIndex((sheetData: SheetData) => {\r\n        return (viewId === sheetData.viewId);\r\n      });\r\n\r\n      if (index >= 0)\r\n        this.setState({ index });\r\n    }\r\n  };\r\n\r\n  /** Updates view to currently set sheet */\r\n  // istanbul ignore next\r\n  private async _updateView() {\r\n    const viewState = await this.props.iModelConnection.views.load(this.state.sheetData[this.state.index].viewId);\r\n    if (this._viewport)\r\n      this._viewport.changeView(viewState);\r\n  }\r\n\r\n  /** Creates a new SheetsModalFrontstage */\r\n  // istanbul ignore next\r\n  private modalFrontstage(): ModalFrontstageInfo {\r\n    return new SheetsModalFrontstage(this.state.sheetData, this.props.iModelConnection, this.state.index);\r\n  }\r\n\r\n  /** Opens a new SheetsModelFrontstage on sheetName click */\r\n  // istanbul ignore next\r\n  private _handleOnClickSheetName = () => {\r\n    FrontstageManager.openModalFrontstage(this.modalFrontstage());\r\n  };\r\n}\r\n"]}

package/lib/esm/appui-react/navigationaids/SheetNavigationAid.scss

@@ -1,83 +1,83 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/index";
-
-.uifw-sheet-navigation {
-  height: 96px;
-  width: 96px;
-  box-sizing: border-box;
-  border-color: $buic-background-widget-stroke;
-  border-width: 1px;
-  border-radius: 3px;
-  border-style: solid;
-  color: $buic-foreground-body;
-  background: $buic-background-window;
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-
-  >.sheet-title {
-    font-size: 12px;
-    font-weight: bold;
-  }
-
-  >.sheet-name {
-    cursor: pointer;
-    font-size: 11px;
-    z-index: 1;
-    height: 46px;
-    overflow: hidden;
-    margin: 0 2px;
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  >.sheet-container {
-    flex: 1 1 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 11px;
-
-    >* {
-      text-align: center;
-    }
-
-    >.sheet-caret {
-      cursor: pointer;
-      font-size: 15px;
-      filter: drop-shadow(0 1px 0 $buic-foreground-body-reverse);
-      z-index: 1;
-
-      &:active {
-        color: $buic-foreground-body-reverse;
-        filter: drop-shadow(0 0 0 transparent);
-      }
-
-      &:hover {
-        color: $buic-foreground-primary;
-      }
-
-      &:focus {
-        outline: none;
-      }
-    }
-  }
-
-  >.gradient {
-    background: linear-gradient(to bottom, $buic-button-gradient1, $buic-button-gradient2);
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-
-    display: none;
-  }
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/index";
+
+.uifw-sheet-navigation {
+  height: 96px;
+  width: 96px;
+  box-sizing: border-box;
+  border-color: $buic-background-widget-stroke;
+  border-width: 1px;
+  border-radius: 3px;
+  border-style: solid;
+  color: $buic-foreground-body;
+  background: $buic-background-window;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+
+  >.sheet-title {
+    font-size: 12px;
+    font-weight: bold;
+  }
+
+  >.sheet-name {
+    cursor: pointer;
+    font-size: 11px;
+    z-index: 1;
+    height: 46px;
+    overflow: hidden;
+    margin: 0 2px;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  >.sheet-container {
+    flex: 1 1 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 11px;
+
+    >* {
+      text-align: center;
+    }
+
+    >.sheet-caret {
+      cursor: pointer;
+      font-size: 15px;
+      filter: drop-shadow(0 1px 0 $buic-foreground-body-reverse);
+      z-index: 1;
+
+      &:active {
+        color: $buic-foreground-body-reverse;
+        filter: drop-shadow(0 0 0 transparent);
+      }
+
+      &:hover {
+        color: $buic-foreground-primary;
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+
+  >.gradient {
+    background: linear-gradient(to bottom, $buic-button-gradient1, $buic-button-gradient2);
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+
+    display: none;
+  }
 }