@itwin/core-react 4.0.0-dev.17 → 4.0.0-dev.18

package/lib/esm/core-react/style/colors.scss

@@ -1,77 +1,77 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-
-/// Variables ------------------------------------------------------------------
-
-/// Primary colors:
-
-$uicore-green:                 #56aa1c;
-$uicore-blue:                  #008be1;
-$uicore-gray:                  #9ba5ae;
-$uicore-text-color:            #2a2f34;
-
-/// Other colors:
-
-$uicore-black:                 #000;
-$uicore-white:                 #fff;
-$uicore-yellow:                #ffcf00;
-$uicore-orange:                #ff6600;
-$uicore-red:                   #cc0000;
-$uicore-teal:                  #2b9b7f;
-
-/// Highlights:
-
-$uicore-blue-highlight:        #e5f5fd;
-$uicore-green-highlight:       #eef6e8;
-$uicore-red-highlight:         #fae5e5;
-
-/// Gray:
-
-$uicore-gray-1:                #070809;
-$uicore-gray-3:                #3c434a;
-$uicore-gray-4:                #4d575f;
-$uicore-gray-5:                #677480;
-$uicore-gray-6:                #85929d;
-$uicore-gray-8:                #a6afb7;
-$uicore-gray-9:                #c7ccd1;
-$uicore-gray-a:                #dce0e3;
-$uicore-gray-b:                #eef0f3;
-$uicore-gray-c:                #f8f9fb;
-
-/// Blue:
-
-$uicore-blue-3:                #00426b;
-$uicore-blue-4:                #005a92;
-$uicore-blue-5:                #0073ba;
-$uicore-blue-6:                $uicore-blue;
-$uicore-blue-8:                #58bfff;
-$uicore-blue-a:                #a6ddff;
-
-/// Green:
-
-$uicore-green-3:               #23450b;
-$uicore-green-4:               #346711;
-$uicore-green-5:               #448615;
-
-$uicore-green-new:             #53A21A;
-
-/// Teal:
-
-$uicore-teal-0:                $uicore-green;
-$uicore-teal-1:                #2b9b1b;
-$uicore-teal-2:                #2b9b2f;
-$uicore-teal-3:                #2b9b43;
-$uicore-teal-4:                #2b9b57;
-$uicore-teal-5:                #2b9b6b;
-$uicore-teal-6:                #2b9b7f;
-$uicore-teal-7:                #2b9b93;
-$uicore-teal-8:                #2b9ba7;
-$uicore-teal-9:                #2b9bbb;
-$uicore-teal-a:                #2b9bcf;
-$uicore-teal-b:                #2b9be3;
-$uicore-teal-c:                $uicore-blue-6;
-$uicore-teal-d:                $uicore-blue-5;
-$uicore-teal-e:                $uicore-blue-4;
-$uicore-teal-f:                $uicore-blue-3;
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+/// Variables ------------------------------------------------------------------
+
+/// Primary colors:
+
+$uicore-green:                 #56aa1c;
+$uicore-blue:                  #008be1;
+$uicore-gray:                  #9ba5ae;
+$uicore-text-color:            #2a2f34;
+
+/// Other colors:
+
+$uicore-black:                 #000;
+$uicore-white:                 #fff;
+$uicore-yellow:                #ffcf00;
+$uicore-orange:                #ff6600;
+$uicore-red:                   #cc0000;
+$uicore-teal:                  #2b9b7f;
+
+/// Highlights:
+
+$uicore-blue-highlight:        #e5f5fd;
+$uicore-green-highlight:       #eef6e8;
+$uicore-red-highlight:         #fae5e5;
+
+/// Gray:
+
+$uicore-gray-1:                #070809;
+$uicore-gray-3:                #3c434a;
+$uicore-gray-4:                #4d575f;
+$uicore-gray-5:                #677480;
+$uicore-gray-6:                #85929d;
+$uicore-gray-8:                #a6afb7;
+$uicore-gray-9:                #c7ccd1;
+$uicore-gray-a:                #dce0e3;
+$uicore-gray-b:                #eef0f3;
+$uicore-gray-c:                #f8f9fb;
+
+/// Blue:
+
+$uicore-blue-3:                #00426b;
+$uicore-blue-4:                #005a92;
+$uicore-blue-5:                #0073ba;
+$uicore-blue-6:                $uicore-blue;
+$uicore-blue-8:                #58bfff;
+$uicore-blue-a:                #a6ddff;
+
+/// Green:
+
+$uicore-green-3:               #23450b;
+$uicore-green-4:               #346711;
+$uicore-green-5:               #448615;
+
+$uicore-green-new:             #53A21A;
+
+/// Teal:
+
+$uicore-teal-0:                $uicore-green;
+$uicore-teal-1:                #2b9b1b;
+$uicore-teal-2:                #2b9b2f;
+$uicore-teal-3:                #2b9b43;
+$uicore-teal-4:                #2b9b57;
+$uicore-teal-5:                #2b9b6b;
+$uicore-teal-6:                #2b9b7f;
+$uicore-teal-7:                #2b9b93;
+$uicore-teal-8:                #2b9ba7;
+$uicore-teal-9:                #2b9bbb;
+$uicore-teal-a:                #2b9bcf;
+$uicore-teal-b:                #2b9be3;
+$uicore-teal-c:                $uicore-blue-6;
+$uicore-teal-d:                $uicore-blue-5;
+$uicore-teal-e:                $uicore-blue-4;
+$uicore-teal-f:                $uicore-blue-3;

package/lib/esm/core-react/style/index.scss

@@ -1,10 +1,10 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "./baseline";
-@import "./breakpoints";
-@import "./themecolors";
-@import "./colors";
-@import "./mixins";
-@import "./opacity";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "./baseline";
+@import "./breakpoints";
+@import "./themecolors";
+@import "./colors";
+@import "./mixins";
+@import "./opacity";

package/lib/esm/core-react/style/mixins.scss

@@ -1,27 +1,27 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-
-@mixin no-link {
-
-  text-decoration:      none;
-  color:                var(--iui-color-text);
-
-  &:link,
-  &:visited,
-  &:hover,
-  &:active {
-
-    color:              var(--iui-color-text);
-    text-decoration:    none;
-  }
-}
-
-@mixin firefox-only {
-
-  @supports (-moz-appearance: none) {
-    @content;
-  }
-
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+@mixin no-link {
+
+  text-decoration:      none;
+  color:                var(--iui-color-text);
+
+  &:link,
+  &:visited,
+  &:hover,
+  &:active {
+
+    color:              var(--iui-color-text);
+    text-decoration:    none;
+  }
+}
+
+@mixin firefox-only {
+
+  @supports (-moz-appearance: none) {
+    @content;
+  }
+
+}

package/lib/esm/core-react/style/opacity.scss

@@ -1,16 +1,16 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/// Opacity stops:
-
-$uicore-opacity-1: var(--iui-opacity-1);
-$uicore-opacity-2: var(--iui-opacity-2);
-$uicore-opacity-3: var(--iui-opacity-3);
-$uicore-opacity-4: var(--iui-opacity-4);
-$uicore-opacity-5: var(--iui-opacity-5);
-$uicore-opacity-6: var(--iui-opacity-6);
-
-$uicore-opacity-muted: $uicore-opacity-3;
-$uicore-opacity-disabled: $uicore-opacity-4;
-$uicore-opacity-boxshadow: $uicore-opacity-4;
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/// Opacity stops:
+
+$uicore-opacity-1: var(--iui-opacity-1);
+$uicore-opacity-2: var(--iui-opacity-2);
+$uicore-opacity-3: var(--iui-opacity-3);
+$uicore-opacity-4: var(--iui-opacity-4);
+$uicore-opacity-5: var(--iui-opacity-5);
+$uicore-opacity-6: var(--iui-opacity-6);
+
+$uicore-opacity-muted: $uicore-opacity-3;
+$uicore-opacity-disabled: $uicore-opacity-4;
+$uicore-opacity-boxshadow: $uicore-opacity-4;

package/lib/esm/core-react/style/themecolors.scss

@@ -1,123 +1,123 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-
-// cspell:ignore scrollbar titlebar toolbutton outoffocus boxshadow mediumgray
-
-$buic-background-1:                       var(--buic-background-1);
-$buic-background-2:                       var(--buic-background-2);
-$buic-background-3:                       var(--buic-background-3);
-$buic-background-4:                       var(--buic-background-4);
-$buic-background-5:                       var(--buic-background-5);
-
-/* Backgrounds and strokes */
-$buic-background-primary:                 var(--buic-background-primary);
-$buic-background-scrollbar:               var(--buic-background-scrollbar);
-$buic-background-scrollbar-hover:         var(--buic-background-scrollbar-hover);
-
-$buic-background-titlebar:                var(--buic-background-titlebar);
-$buic-background-dialog-stroke:           var(--buic-background-dialog-stroke);
-$buic-background-widget-stroke:           var(--buic-background-widget-stroke);
-$buic-background-widget-panel:            var(--buic-background-widget-panel);
-$buic-background-panel-stroke:            var(--buic-background-panel-stroke);
-$buic-background-tooltip:                 var(--buic-background-tooltip);
-$buic-background-statusbar:               var(--buic-background-statusbar);
-$buic-background-control-stroke:          var(--buic-background-control-stroke);
-$buic-background-toolbutton-stroke:       var(--buic-background-toolbutton-stroke);
-
-$buic-background-titlebar-outoffocus:     var(--buic-background-titlebar-outoffocus);
-$buic-background-divider:                 var(--buic-background-divider);
-$buic-background-widget-element-stroke:   var(--buic-background-widget-element-stroke);
-$buic-background-control-disabled:        var(--buic-background-control-disabled);
-$buic-background-table-header:            var(--buic-background-table-header);
-$buic-background-control-stroke-disabled: var(--buic-background-control-stroke-disabled);
-
-$buic-background-tab-inactive:            var(--buic-background-tab-inactive);
-$buic-background-toolbutton-inactive:     var(--buic-background-toolbutton-inactive);
-$buic-background-context-menu:            var(--buic-background-context-menu);
-$buic-background-panel:                   var(--buic-background-panel);
-$buic-background-placeholder:             var(--buic-background-placeholder);
-$buic-background-striped_row:             var(--buic-background-striped_row);
-
-$buic-background-tab-active:              var(--buic-background-tab-active);
-$buic-background-dialog:                  var(--buic-background-dialog);
-$buic-background-widget:                  var(--buic-background-widget);
-$buic-background-window:                  var(--buic-background-window);
-$buic-background-toolbar:                 var(--buic-background-toolbar);
-
-$buic-background-card:                    var(--buic-background-card);
-$buic-background-control:                 var(--buic-background-control);
-
-$buic-background-focus-overlay:           var(--buic-background-focus-overlay);
-$buic-background-hover-overlay:           var(--buic-background-hover-overlay);
-$buic-background-active-overlay:          var(--buic-background-active-overlay);
-$buic-background-pressed-overlay:         var(--buic-background-pressed-overlay);
-
-/** Text and icons */
-$buic-foreground-body-rgb:                var(--buic-foreground-body-rgb);
-$buic-foreground-body-reverse-rgb:        var(--buic-foreground-body-reverse-rgb);
-
-$buic-foreground-body:                    var(--buic-foreground-body);
-$buic-foreground-body-reverse:            var(--buic-foreground-body-reverse);
-$buic-foreground-disabled:                var(--buic-foreground-disabled);
-$buic-foreground-muted:                   var(--buic-foreground-muted);
-$buic-foreground-activehover:             var(--buic-foreground-activehover);
-
-$buic-text-color:                         var(--buic-foreground-body);          // 0.85 opacity
-$buic-text-color-disabled:                var(--buic-foreground-disabled);      // 0.45 opacity (Note: 0.25 is too much)
-$buic-text-color-muted:                   var(--buic-foreground-muted);         // 0.65 opacity
-$buic-text-color-reverse:                 var(--buic-foreground-body-reverse);  // 0.85 opacity
-$buic-text-color-hover:                   var(--buic-foreground-activehover);   // 1.00 opacity
-$buic-text-color-highlight:               var(--buic-foreground-primary);       // themed
-
-$buic-icon-color:                         var(--buic-foreground-body);
-$buic-icon-color-disabled:                var(--buic-foreground-disabled);
-$buic-icon-color-reverse:                 var(--buic-foreground-body-reverse);
-
-$buic-background-editable:                var(--buic-background-editable);
-$buic-row-selection:                      var(--buic-row-selection);
-$buic-row-hover:                          var(--buic-row-hover);
-
-$buic-button-gradient1:                   var(--buic-button-gradient1);
-$buic-button-gradient2:                   var(--buic-button-gradient2);
-
-$buic-foreground-focus-border:            var(--buic-foreground-focus-border);
-$buic-inputs-border:                      var(--buic-inputs-border);
-$buic-focus-boxshadow:                    var(--buic-focus-boxshadow);
-$buic-inputs-boxshadow:                   var(--buic-inputs-boxshadow);
-$buic-popup-boxshadow:                    var(--buic-popup-boxshadow);
-
-/** Themed colors */
-$buic-foreground-accessory:               var(--buic-foreground-accessory);
-$buic-foreground-primary-rgb:             var(--buic-foreground-primary-rgb);
-$buic-foreground-primary:                 var(--buic-foreground-primary);
-$buic-foreground-primary-tone:            var(--buic-foreground-primary-tone);
-$buic-foreground-positive:                var(--buic-foreground-positive);
-$buic-foreground-positive-rgb:            var(--buic-foreground-positive-rgb);
-$buic-foreground-success:                 var(--buic-foreground-positive);
-$buic-foreground-negative:                var(--buic-foreground-negative);
-$buic-foreground-negative-rgb:            var(--buic-foreground-negative-rgb);
-$buic-foreground-alert:                   var(--buic-foreground-negative);
-$buic-foreground-error:                   var(--buic-foreground-negative);
-$buic-foreground-warning:                 var(--buic-foreground-warning);
-$buic-foreground-warning-rgb:             var(--buic-foreground-warning-rgb);
-$buic-foreground-focus:                   var(--buic-foreground-focus);
-
-/** Static colors */
-// NEEDSWORK - Need to deprecate
-$buic-accessory-hollow:                   var(--buic-accessory-hollow);
-$buic-accessory-primary:                  var(--buic-accessory-primary);
-$buic-accessory-success:                  var(--buic-accessory-success);
-$buic-accessory-alert:                    var(--buic-accessory-alert);
-$buic-accessory-warning:                  var(--buic-accessory-warning);
-$buic-accessory-primary-tint:             var(--buic-accessory-primary-tint);
-$buic-accessory-success-tint:             var(--buic-accessory-success-tint);
-$buic-accessory-alert-tint:               var(--buic-accessory-alert-tint);
-$buic-accessory-warning-tint:             var(--buic-accessory-warning-tint);
-
-/** Widget Opacity */
-$buic-widget-opacity:                     var(--buic-widget-opacity, 0.90);
-
-/** Toolbar Opacity */
-$buic-toolbar-opacity:                     var(--buic-toolbar-opacity, 0.50);
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+// cspell:ignore scrollbar titlebar toolbutton outoffocus boxshadow mediumgray
+
+$buic-background-1:                       var(--buic-background-1);
+$buic-background-2:                       var(--buic-background-2);
+$buic-background-3:                       var(--buic-background-3);
+$buic-background-4:                       var(--buic-background-4);
+$buic-background-5:                       var(--buic-background-5);
+
+/* Backgrounds and strokes */
+$buic-background-primary:                 var(--buic-background-primary);
+$buic-background-scrollbar:               var(--buic-background-scrollbar);
+$buic-background-scrollbar-hover:         var(--buic-background-scrollbar-hover);
+
+$buic-background-titlebar:                var(--buic-background-titlebar);
+$buic-background-dialog-stroke:           var(--buic-background-dialog-stroke);
+$buic-background-widget-stroke:           var(--buic-background-widget-stroke);
+$buic-background-widget-panel:            var(--buic-background-widget-panel);
+$buic-background-panel-stroke:            var(--buic-background-panel-stroke);
+$buic-background-tooltip:                 var(--buic-background-tooltip);
+$buic-background-statusbar:               var(--buic-background-statusbar);
+$buic-background-control-stroke:          var(--buic-background-control-stroke);
+$buic-background-toolbutton-stroke:       var(--buic-background-toolbutton-stroke);
+
+$buic-background-titlebar-outoffocus:     var(--buic-background-titlebar-outoffocus);
+$buic-background-divider:                 var(--buic-background-divider);
+$buic-background-widget-element-stroke:   var(--buic-background-widget-element-stroke);
+$buic-background-control-disabled:        var(--buic-background-control-disabled);
+$buic-background-table-header:            var(--buic-background-table-header);
+$buic-background-control-stroke-disabled: var(--buic-background-control-stroke-disabled);
+
+$buic-background-tab-inactive:            var(--buic-background-tab-inactive);
+$buic-background-toolbutton-inactive:     var(--buic-background-toolbutton-inactive);
+$buic-background-context-menu:            var(--buic-background-context-menu);
+$buic-background-panel:                   var(--buic-background-panel);
+$buic-background-placeholder:             var(--buic-background-placeholder);
+$buic-background-striped_row:             var(--buic-background-striped_row);
+
+$buic-background-tab-active:              var(--buic-background-tab-active);
+$buic-background-dialog:                  var(--buic-background-dialog);
+$buic-background-widget:                  var(--buic-background-widget);
+$buic-background-window:                  var(--buic-background-window);
+$buic-background-toolbar:                 var(--buic-background-toolbar);
+
+$buic-background-card:                    var(--buic-background-card);
+$buic-background-control:                 var(--buic-background-control);
+
+$buic-background-focus-overlay:           var(--buic-background-focus-overlay);
+$buic-background-hover-overlay:           var(--buic-background-hover-overlay);
+$buic-background-active-overlay:          var(--buic-background-active-overlay);
+$buic-background-pressed-overlay:         var(--buic-background-pressed-overlay);
+
+/** Text and icons */
+$buic-foreground-body-rgb:                var(--buic-foreground-body-rgb);
+$buic-foreground-body-reverse-rgb:        var(--buic-foreground-body-reverse-rgb);
+
+$buic-foreground-body:                    var(--buic-foreground-body);
+$buic-foreground-body-reverse:            var(--buic-foreground-body-reverse);
+$buic-foreground-disabled:                var(--buic-foreground-disabled);
+$buic-foreground-muted:                   var(--buic-foreground-muted);
+$buic-foreground-activehover:             var(--buic-foreground-activehover);
+
+$buic-text-color:                         var(--buic-foreground-body);          // 0.85 opacity
+$buic-text-color-disabled:                var(--buic-foreground-disabled);      // 0.45 opacity (Note: 0.25 is too much)
+$buic-text-color-muted:                   var(--buic-foreground-muted);         // 0.65 opacity
+$buic-text-color-reverse:                 var(--buic-foreground-body-reverse);  // 0.85 opacity
+$buic-text-color-hover:                   var(--buic-foreground-activehover);   // 1.00 opacity
+$buic-text-color-highlight:               var(--buic-foreground-primary);       // themed
+
+$buic-icon-color:                         var(--buic-foreground-body);
+$buic-icon-color-disabled:                var(--buic-foreground-disabled);
+$buic-icon-color-reverse:                 var(--buic-foreground-body-reverse);
+
+$buic-background-editable:                var(--buic-background-editable);
+$buic-row-selection:                      var(--buic-row-selection);
+$buic-row-hover:                          var(--buic-row-hover);
+
+$buic-button-gradient1:                   var(--buic-button-gradient1);
+$buic-button-gradient2:                   var(--buic-button-gradient2);
+
+$buic-foreground-focus-border:            var(--buic-foreground-focus-border);
+$buic-inputs-border:                      var(--buic-inputs-border);
+$buic-focus-boxshadow:                    var(--buic-focus-boxshadow);
+$buic-inputs-boxshadow:                   var(--buic-inputs-boxshadow);
+$buic-popup-boxshadow:                    var(--buic-popup-boxshadow);
+
+/** Themed colors */
+$buic-foreground-accessory:               var(--buic-foreground-accessory);
+$buic-foreground-primary-rgb:             var(--buic-foreground-primary-rgb);
+$buic-foreground-primary:                 var(--buic-foreground-primary);
+$buic-foreground-primary-tone:            var(--buic-foreground-primary-tone);
+$buic-foreground-positive:                var(--buic-foreground-positive);
+$buic-foreground-positive-rgb:            var(--buic-foreground-positive-rgb);
+$buic-foreground-success:                 var(--buic-foreground-positive);
+$buic-foreground-negative:                var(--buic-foreground-negative);
+$buic-foreground-negative-rgb:            var(--buic-foreground-negative-rgb);
+$buic-foreground-alert:                   var(--buic-foreground-negative);
+$buic-foreground-error:                   var(--buic-foreground-negative);
+$buic-foreground-warning:                 var(--buic-foreground-warning);
+$buic-foreground-warning-rgb:             var(--buic-foreground-warning-rgb);
+$buic-foreground-focus:                   var(--buic-foreground-focus);
+
+/** Static colors */
+// NEEDSWORK - Need to deprecate
+$buic-accessory-hollow:                   var(--buic-accessory-hollow);
+$buic-accessory-primary:                  var(--buic-accessory-primary);
+$buic-accessory-success:                  var(--buic-accessory-success);
+$buic-accessory-alert:                    var(--buic-accessory-alert);
+$buic-accessory-warning:                  var(--buic-accessory-warning);
+$buic-accessory-primary-tint:             var(--buic-accessory-primary-tint);
+$buic-accessory-success-tint:             var(--buic-accessory-success-tint);
+$buic-accessory-alert-tint:               var(--buic-accessory-alert-tint);
+$buic-accessory-warning-tint:             var(--buic-accessory-warning-tint);
+
+/** Widget Opacity */
+$buic-widget-opacity:                     var(--buic-widget-opacity, 0.90);
+
+/** Toolbar Opacity */
+$buic-toolbar-opacity:                     var(--buic-toolbar-opacity, 0.50);

package/lib/esm/core-react/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../src/core-react/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAgBjD,SAAS,kBAAkB,CAAC,IAAuB;IACjD,OAAO,CAAC,OAAO,IAAI,KAAK,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;AACrD,CAAC;AAED,SAAS,UAAU,CAAC,IAAuB;IACzC,OAAO,CAAC,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC;AACpC,CAAC;AAkCD;;GAEG;AACH,MAAM,OAAO,IAAK,SAAQ,KAAK,CAAC,aAAuC;IAIrE,YAAY,KAAoB;QAC9B,KAAK,CAAC,KAAK,CAAC,CAAC;QAJP,gBAAW,GAA8C,EAAE,CAAC;QA0D5D,qBAAgB,GAAG,CAAC,KAAa,EAAE,EAAE;YAC3C,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YACxC,uBAAuB;YACvB,IAAI,OAAO,IAAI,OAAO,CAAC,OAAO;gBAC5B,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QAC5B,CAAC,CAAC;QAEM,oBAAe,GAAG,CAAC,KAAa,EAAE,EAAE;YAC1C,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC,CAAC;QAYM,iBAAY,GAAG,CAAC,KAAa,EAAE,EAAE;YACvC,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC5D,IAAI,CAAC,QAAQ,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,CAAC;QACxC,CAAC,CAAC;QA5EA,MAAM,WAAW,GAAG,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QAChE,IAAI,CAAC,KAAK,GAAG;YACX,WAAW;SACZ,CAAC;QAEF,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAqB,CAAC,CAAC,CAAC;QACxF,IAAI,CAAC,sBAAsB,GAAG,IAAI,qBAAqB,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IACpG,CAAC;IAEO,mBAAmB,CAAC,GAAY;QACtC,IAAI,WAAW,GAAG,CAAC,CAAC;QACpB,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;YACnD,WAAW,GAAG,GAAG,CAAC;QACpB,OAAO,WAAW,CAAC;IACrB,CAAC;IAED,gBAAgB;IACA,iBAAiB;QAC/B,IAAI,CAAC,sBAAsB,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC;QACjE,IAAI,CAAC,sBAAsB,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC;IACnE,CAAC;IAED,gBAAgB;IACA,kBAAkB,CAAC,SAAwB;QACzD,IAAI,SAAS,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM;YACxC,IAAI,CAAC,sBAAsB,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC;QAEnE,IAAI,SAAS,CAAC,WAAW,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW;YAClD,IAAI,CAAC,sBAAsB,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC;QAEnE,IAAI,SAAS,CAAC,WAAW,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE;YACpD,IAAI,QAAQ,GAAG,KAAK,CAAC;YACrB,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC;YACjE,uBAAuB;YACvB,IAAI,OAAO,IAAI,QAAQ,CAAC,aAAa,KAAK,OAAO;gBAC/C,QAAQ,GAAG,IAAI,CAAC;YAClB,MAAM,WAAW,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;YAErE,IAAI,CAAC,QAAQ,CACX,GAAG,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,EACvB,GAAG,EAAE;gBACH,uBAAuB;gBACvB,IAAI,QAAQ,EAAE;oBACZ,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC;oBACzD,uBAAuB;oBACvB,IAAI,UAAU;wBACZ,UAAU,CAAC,KAAK,EAAE,CAAC;iBACtB;YACH,CAAC,CAAC,CAAC;SACN;IACH,CAAC;IAaD,6BAA6B;IACrB,mBAAmB,CAAC,KAA0B,EAAE,KAAa;QACnE,IAAI,CAAC,sBAAsB,CAAC,kBAAkB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAC/D,CAAC;IAED,2BAA2B;IACnB,iBAAiB,CAAC,KAA0B,EAAE,KAAa;QACjE,IAAI,CAAC,sBAAsB,CAAC,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAC7D,CAAC;IAOD,gBAAgB;IACA,MAAM;QACpB,MAAM,YAAY,GAAG,UAAU,CAC7B,IAAI,CAAC,KAAK,CAAC,aAAa,EACxB,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,mBAAmB,EACvC,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,MAAM,eAAe,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;QAEzG,OAAO,CACL,4BAAI,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAClD,IAAI,EAAC,SAAS,sBACI,IAAI,CAAC,KAAK,CAAC,WAAW,KAAK,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,IAE5F,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YACtC,IAAI,QAAQ,CAAC;YACb,IAAI,cAAuC,CAAC;YAC5C,IAAI,KAAyB,CAAC;YAC9B,IAAI,QAA4B,CAAC;YACjC,IAAI,KAAK,GAAG,EAAE,CAAC;YACf,IAAI,IAAI,CAAC;YACT,IAAI,UAAU,CAAC,KAAK,CAAC,EAAE;gBACrB,IAAI,GAAG,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;gBAC/C,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;gBAC1B,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;gBAC1B,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;gBACpB,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,OAAO,CAAC;oBACrC,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC;qBAC5B,IAAI,OAAO,KAAK,CAAC,OAAO,KAAK,QAAQ;oBACxC,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC;aACzB;YACD,OAAO,4BAAI,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EACjC,SAAS,EAAE,UAAU,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,aAAa,EAAE,QAAQ,IAAI,wBAAwB,CAAC,EAC9G,IAAI,EAAC,KAAK,mBACK,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW,cACrC,GAAG,KAAK,EAAE;gBAEnB,cAAc;gBAEf,2BAAG,GAAG,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAC7B,QAAQ,EAAE,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACnD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAC1C,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE,KAAK,CAAC,EAC5D,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,iBAC3C,GAAG,KAAK,EAAE,EACvB,IAAI,EAAC,QAAQ;;oBACb,6BAAK,SAAS,EAAE,UAAU,CAAC,0BAA0B,EAAE,QAAQ,IAAI,wBAAwB,CAAC;wBACzF,eAAe,IAAI,8BAAM,SAAS,EAAC,kBAAkB,IAAE,IAAI,CAAQ;wBACpE,6BAAK,SAAS,EAAC,sCAAsC;4BACnD,kCAAO,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAQ;4BAC/D,QAAQ,IAAI,8BAAM,SAAS,EAAC,sBAAsB,IAAE,QAAQ,CAAQ,CACjE,CACF,CACJ,CACD,CAAC;QACR,CAAC,CACA,CACE,CACN,CAAC;IACJ,CAAC;CACF","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 Tabs\n */\n\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CommonProps } from \"../utils/Props\";\nimport { Orientation } from \"../enums/Orientation\";\nimport { ItemKeyboardNavigator } from \"../focus/ItemKeyboardNavigator\";\nimport { IconHelper } from \"../utils/IconHelper\";\n\n/** TabLabel provides ability to define label, icon, and tooltip for a tab entry. The tooltip can be defined as JSX|Element\n *  to support react-tooltip component or a string that will be use to set the title property.\n * @public\n */\nexport interface TabLabel {\n  label: string;\n  subLabel?: string;\n  icon?: string | JSX.Element;\n  tabId: string; /* optional id added to tab so it can be used by react-tooltip  */\n  /** tooltip allows JSX.Element to support styled tooltips like react-tooltip. */\n  tooltip?: string | JSX.Element;\n  disabled?: boolean;\n}\n\nfunction isTabLabelWithIcon(item: string | TabLabel): item is TabLabel {\n  return (typeof item !== \"string\") && !!(item).icon;\n}\n\nfunction isTabLabel(item: string | TabLabel): item is TabLabel {\n  return (typeof item !== \"string\");\n}\n\n/** Properties for the [[VerticalTabs]] component\n * @public\n */\nexport interface TabsProps extends React.AllHTMLAttributes<HTMLUListElement>, CommonProps {\n  /** Text shown for each tab\n   * @public */\n  labels: Array<string | TabLabel>;\n  /** Handler for activating a tab */\n  onActivateTab?: (index: number) => any;\n  /** Index of the initial active tab */\n  activeIndex?: number;\n  /** Indicates whether the bar on the active tab is green instead of the default blue */\n  green?: boolean;\n}\n\n/** State for [[Tabs]] component\n * @internal\n */\ninterface TabsState {\n  activeIndex: number;\n}\n\n/** Properties for the base [[Tabs]] component\n * @public\n */\nexport interface MainTabsProps extends TabsProps {\n  /** Main CSS class name */\n  mainClassName: string;\n  /** Orientation of the Tabs list */\n  orientation: Orientation;\n}\n\n/** Tabs meant to represent the current position in a page/section\n * @public\n */\nexport class Tabs extends React.PureComponent<MainTabsProps, TabsState> {\n  private _anchorRefs: Array<React.RefObject<HTMLAnchorElement>> = [];\n  private _itemKeyboardNavigator: ItemKeyboardNavigator;\n\n  constructor(props: MainTabsProps) {\n    super(props);\n\n    const activeIndex = this.validateActiveIndex(props.activeIndex);\n    this.state = {\n      activeIndex,\n    };\n\n    props.labels.forEach(() => this._anchorRefs.push(React.createRef<HTMLAnchorElement>()));\n    this._itemKeyboardNavigator = new ItemKeyboardNavigator(this._handleFocusItem, this._activateTab);\n  }\n\n  private validateActiveIndex(idx?: number): number {\n    let activeIndex = 0;\n    if (idx && idx >= 0 && idx < this.props.labels.length)\n      activeIndex = idx;\n    return activeIndex;\n  }\n\n  /** @internal */\n  public override componentDidMount() {\n    this._itemKeyboardNavigator.itemCount = this.props.labels.length;\n    this._itemKeyboardNavigator.orientation = this.props.orientation;\n  }\n\n  /** @internal */\n  public override componentDidUpdate(prevProps: MainTabsProps) {\n    if (prevProps.labels !== this.props.labels)\n      this._itemKeyboardNavigator.itemCount = this.props.labels.length;\n\n    if (prevProps.orientation !== this.props.orientation)\n      this._itemKeyboardNavigator.orientation = this.props.orientation;\n\n    if (prevProps.activeIndex !== this.props.activeIndex) {\n      let hadFocus = false;\n      const element = this._anchorRefs[this.state.activeIndex].current;\n      // istanbul ignore else\n      if (element && document.activeElement === element)\n        hadFocus = true;\n      const activeIndex = this.validateActiveIndex(this.props.activeIndex);\n\n      this.setState(\n        () => ({ activeIndex }),\n        () => {\n          // istanbul ignore else\n          if (hadFocus) {\n            const newElement = this._anchorRefs[activeIndex].current;\n            // istanbul ignore else\n            if (newElement)\n              newElement.focus();\n          }\n        });\n    }\n  }\n\n  private _handleFocusItem = (index: number) => {\n    const itemRef = this._anchorRefs[index];\n    // istanbul ignore else\n    if (itemRef && itemRef.current)\n      itemRef.current.focus();\n  };\n\n  private _handleTabClick = (index: number) => {\n    this._activateTab(index);\n  };\n\n  /** Handle keydown on tabs */\n  private _handleKeyDownEvent(event: React.KeyboardEvent, index: number) {\n    this._itemKeyboardNavigator.handleKeyDownEvent(event, index);\n  }\n\n  /** Handle keyup on tabs */\n  private _handleKeyUpEvent(event: React.KeyboardEvent, index: number) {\n    this._itemKeyboardNavigator.handleKeyUpEvent(event, index);\n  }\n\n  private _activateTab = (index: number) => {\n    this.props.onActivateTab && this.props.onActivateTab(index);\n    this.setState({ activeIndex: index });\n  };\n\n  /** @internal */\n  public override render(): JSX.Element {\n    const ulClassNames = classnames(\n      this.props.mainClassName,\n      this.props.green && \"uicore-tabs-green\",\n      this.props.className,\n    );\n\n    const anyIconsPresent = (this.props.labels.reduce((a, b) => a + (isTabLabelWithIcon(b) ? 1 : 0), 0)) > 0;\n\n    return (\n      <ul className={ulClassNames} style={this.props.style}\n        role=\"tablist\"\n        aria-orientation={this.props.orientation === Orientation.Vertical ? \"vertical\" : \"horizontal\"}\n      >\n        {this.props.labels.map((label, index) => {\n          let disabled;\n          let tooltipElement: JSX.Element | undefined;\n          let title: string | undefined;\n          let subLabel: string | undefined;\n          let tabId = \"\";\n          let icon;\n          if (isTabLabel(label)) {\n            icon = IconHelper.getIconReactNode(label.icon);\n            subLabel = label.subLabel;\n            disabled = label.disabled;\n            tabId = label.tabId;\n            if (React.isValidElement(label.tooltip))\n              tooltipElement = label.tooltip;\n            else if (typeof label.tooltip === \"string\")\n              title = label.tooltip;\n          }\n          return <li key={index} title={title}\n            className={classnames(index === this.state.activeIndex && \"core-active\", disabled && \"core-tab-item-disabled\")}\n            role=\"tab\"\n            aria-selected={index === this.state.activeIndex}\n            data-for={`${tabId}`} /* to support react-tooltip */\n          >\n            {tooltipElement}\n            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}\n            <a ref={this._anchorRefs[index]}\n              tabIndex={index === this.state.activeIndex ? 0 : -1}\n              onClick={() => this._handleTabClick(index)}\n              onKeyDown={(event) => this._handleKeyDownEvent(event, index)}\n              onKeyUp={(event) => this._handleKeyUpEvent(event, index)}\n              data-testid={`${tabId}`}\n              role=\"button\"\n            > <div className={classnames(\"uicore-tabs-inline-label\", disabled && \"core-tab-item-disabled\")}>\n                {anyIconsPresent && <span className=\"uicore-tabs-icon\">{icon}</span>}\n                <div className=\"uicore-tabs-label-subLabel-container\">\n                  <span>{(typeof label === \"string\") ? label : label.label}</span>\n                  {subLabel && <span className=\"uicore-tabs-subLabel\">{subLabel}</span>}\n                </div>\n              </div>\n            </a>\n          </li>;\n        }\n        )}\n      </ul>\n    );\n  }\n}\n"]}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../src/core-react/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAgBjD,SAAS,kBAAkB,CAAC,IAAuB;IACjD,OAAO,CAAC,OAAO,IAAI,KAAK,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;AACrD,CAAC;AAED,SAAS,UAAU,CAAC,IAAuB;IACzC,OAAO,CAAC,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC;AACpC,CAAC;AAkCD;;GAEG;AACH,MAAM,OAAO,IAAK,SAAQ,KAAK,CAAC,aAAuC;IAIrE,YAAY,KAAoB;QAC9B,KAAK,CAAC,KAAK,CAAC,CAAC;QAJP,gBAAW,GAA8C,EAAE,CAAC;QA0D5D,qBAAgB,GAAG,CAAC,KAAa,EAAE,EAAE;YAC3C,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YACxC,uBAAuB;YACvB,IAAI,OAAO,IAAI,OAAO,CAAC,OAAO;gBAC5B,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QAC5B,CAAC,CAAC;QAEM,oBAAe,GAAG,CAAC,KAAa,EAAE,EAAE;YAC1C,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC,CAAC;QAYM,iBAAY,GAAG,CAAC,KAAa,EAAE,EAAE;YACvC,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC5D,IAAI,CAAC,QAAQ,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,CAAC;QACxC,CAAC,CAAC;QA5EA,MAAM,WAAW,GAAG,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QAChE,IAAI,CAAC,KAAK,GAAG;YACX,WAAW;SACZ,CAAC;QAEF,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAqB,CAAC,CAAC,CAAC;QACxF,IAAI,CAAC,sBAAsB,GAAG,IAAI,qBAAqB,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IACpG,CAAC;IAEO,mBAAmB,CAAC,GAAY;QACtC,IAAI,WAAW,GAAG,CAAC,CAAC;QACpB,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;YACnD,WAAW,GAAG,GAAG,CAAC;QACpB,OAAO,WAAW,CAAC;IACrB,CAAC;IAED,gBAAgB;IACA,iBAAiB;QAC/B,IAAI,CAAC,sBAAsB,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC;QACjE,IAAI,CAAC,sBAAsB,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC;IACnE,CAAC;IAED,gBAAgB;IACA,kBAAkB,CAAC,SAAwB;QACzD,IAAI,SAAS,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM;YACxC,IAAI,CAAC,sBAAsB,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC;QAEnE,IAAI,SAAS,CAAC,WAAW,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW;YAClD,IAAI,CAAC,sBAAsB,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC;QAEnE,IAAI,SAAS,CAAC,WAAW,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE;YACpD,IAAI,QAAQ,GAAG,KAAK,CAAC;YACrB,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC;YACjE,uBAAuB;YACvB,IAAI,OAAO,IAAI,QAAQ,CAAC,aAAa,KAAK,OAAO;gBAC/C,QAAQ,GAAG,IAAI,CAAC;YAClB,MAAM,WAAW,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;YAErE,IAAI,CAAC,QAAQ,CACX,GAAG,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,EACvB,GAAG,EAAE;gBACH,uBAAuB;gBACvB,IAAI,QAAQ,EAAE;oBACZ,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC;oBACzD,uBAAuB;oBACvB,IAAI,UAAU;wBACZ,UAAU,CAAC,KAAK,EAAE,CAAC;iBACtB;YACH,CAAC,CAAC,CAAC;SACN;IACH,CAAC;IAaD,6BAA6B;IACrB,mBAAmB,CAAC,KAA0B,EAAE,KAAa;QACnE,IAAI,CAAC,sBAAsB,CAAC,kBAAkB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAC/D,CAAC;IAED,2BAA2B;IACnB,iBAAiB,CAAC,KAA0B,EAAE,KAAa;QACjE,IAAI,CAAC,sBAAsB,CAAC,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAC7D,CAAC;IAOD,gBAAgB;IACA,MAAM;QACpB,MAAM,YAAY,GAAG,UAAU,CAC7B,IAAI,CAAC,KAAK,CAAC,aAAa,EACxB,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,mBAAmB,EACvC,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,MAAM,eAAe,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;QAEzG,OAAO,CACL,4BAAI,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAClD,IAAI,EAAC,SAAS,sBACI,IAAI,CAAC,KAAK,CAAC,WAAW,KAAK,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,IAE5F,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YACtC,IAAI,QAAQ,CAAC;YACb,IAAI,cAAuC,CAAC;YAC5C,IAAI,KAAyB,CAAC;YAC9B,IAAI,QAA4B,CAAC;YACjC,IAAI,KAAK,GAAG,EAAE,CAAC;YACf,IAAI,IAAI,CAAC;YACT,IAAI,UAAU,CAAC,KAAK,CAAC,EAAE;gBACrB,IAAI,GAAG,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;gBAC/C,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;gBAC1B,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;gBAC1B,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;gBACpB,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,OAAO,CAAC;oBACrC,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC;qBAC5B,IAAI,OAAO,KAAK,CAAC,OAAO,KAAK,QAAQ;oBACxC,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC;aACzB;YACD,OAAO,4BAAI,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EACjC,SAAS,EAAE,UAAU,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,aAAa,EAAE,QAAQ,IAAI,wBAAwB,CAAC,EAC9G,IAAI,EAAC,KAAK,mBACK,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW,cACrC,GAAG,KAAK,EAAE;gBAEnB,cAAc;gBAEf,2BAAG,GAAG,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAC7B,QAAQ,EAAE,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACnD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAC1C,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE,KAAK,CAAC,EAC5D,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,iBAC3C,GAAG,KAAK,EAAE,EACvB,IAAI,EAAC,QAAQ;;oBACb,6BAAK,SAAS,EAAE,UAAU,CAAC,0BAA0B,EAAE,QAAQ,IAAI,wBAAwB,CAAC;wBACzF,eAAe,IAAI,8BAAM,SAAS,EAAC,kBAAkB,IAAE,IAAI,CAAQ;wBACpE,6BAAK,SAAS,EAAC,sCAAsC;4BACnD,kCAAO,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAQ;4BAC/D,QAAQ,IAAI,8BAAM,SAAS,EAAC,sBAAsB,IAAE,QAAQ,CAAQ,CACjE,CACF,CACJ,CACD,CAAC;QACR,CAAC,CACA,CACE,CACN,CAAC;IACJ,CAAC;CACF","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 Tabs\r\n */\r\n\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { Orientation } from \"../enums/Orientation\";\r\nimport { ItemKeyboardNavigator } from \"../focus/ItemKeyboardNavigator\";\r\nimport { IconHelper } from \"../utils/IconHelper\";\r\n\r\n/** TabLabel provides ability to define label, icon, and tooltip for a tab entry. The tooltip can be defined as JSX|Element\r\n *  to support react-tooltip component or a string that will be use to set the title property.\r\n * @public\r\n */\r\nexport interface TabLabel {\r\n  label: string;\r\n  subLabel?: string;\r\n  icon?: string | JSX.Element;\r\n  tabId: string; /* optional id added to tab so it can be used by react-tooltip  */\r\n  /** tooltip allows JSX.Element to support styled tooltips like react-tooltip. */\r\n  tooltip?: string | JSX.Element;\r\n  disabled?: boolean;\r\n}\r\n\r\nfunction isTabLabelWithIcon(item: string | TabLabel): item is TabLabel {\r\n  return (typeof item !== \"string\") && !!(item).icon;\r\n}\r\n\r\nfunction isTabLabel(item: string | TabLabel): item is TabLabel {\r\n  return (typeof item !== \"string\");\r\n}\r\n\r\n/** Properties for the [[VerticalTabs]] component\r\n * @public\r\n */\r\nexport interface TabsProps extends React.AllHTMLAttributes<HTMLUListElement>, CommonProps {\r\n  /** Text shown for each tab\r\n   * @public */\r\n  labels: Array<string | TabLabel>;\r\n  /** Handler for activating a tab */\r\n  onActivateTab?: (index: number) => any;\r\n  /** Index of the initial active tab */\r\n  activeIndex?: number;\r\n  /** Indicates whether the bar on the active tab is green instead of the default blue */\r\n  green?: boolean;\r\n}\r\n\r\n/** State for [[Tabs]] component\r\n * @internal\r\n */\r\ninterface TabsState {\r\n  activeIndex: number;\r\n}\r\n\r\n/** Properties for the base [[Tabs]] component\r\n * @public\r\n */\r\nexport interface MainTabsProps extends TabsProps {\r\n  /** Main CSS class name */\r\n  mainClassName: string;\r\n  /** Orientation of the Tabs list */\r\n  orientation: Orientation;\r\n}\r\n\r\n/** Tabs meant to represent the current position in a page/section\r\n * @public\r\n */\r\nexport class Tabs extends React.PureComponent<MainTabsProps, TabsState> {\r\n  private _anchorRefs: Array<React.RefObject<HTMLAnchorElement>> = [];\r\n  private _itemKeyboardNavigator: ItemKeyboardNavigator;\r\n\r\n  constructor(props: MainTabsProps) {\r\n    super(props);\r\n\r\n    const activeIndex = this.validateActiveIndex(props.activeIndex);\r\n    this.state = {\r\n      activeIndex,\r\n    };\r\n\r\n    props.labels.forEach(() => this._anchorRefs.push(React.createRef<HTMLAnchorElement>()));\r\n    this._itemKeyboardNavigator = new ItemKeyboardNavigator(this._handleFocusItem, this._activateTab);\r\n  }\r\n\r\n  private validateActiveIndex(idx?: number): number {\r\n    let activeIndex = 0;\r\n    if (idx && idx >= 0 && idx < this.props.labels.length)\r\n      activeIndex = idx;\r\n    return activeIndex;\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentDidMount() {\r\n    this._itemKeyboardNavigator.itemCount = this.props.labels.length;\r\n    this._itemKeyboardNavigator.orientation = this.props.orientation;\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentDidUpdate(prevProps: MainTabsProps) {\r\n    if (prevProps.labels !== this.props.labels)\r\n      this._itemKeyboardNavigator.itemCount = this.props.labels.length;\r\n\r\n    if (prevProps.orientation !== this.props.orientation)\r\n      this._itemKeyboardNavigator.orientation = this.props.orientation;\r\n\r\n    if (prevProps.activeIndex !== this.props.activeIndex) {\r\n      let hadFocus = false;\r\n      const element = this._anchorRefs[this.state.activeIndex].current;\r\n      // istanbul ignore else\r\n      if (element && document.activeElement === element)\r\n        hadFocus = true;\r\n      const activeIndex = this.validateActiveIndex(this.props.activeIndex);\r\n\r\n      this.setState(\r\n        () => ({ activeIndex }),\r\n        () => {\r\n          // istanbul ignore else\r\n          if (hadFocus) {\r\n            const newElement = this._anchorRefs[activeIndex].current;\r\n            // istanbul ignore else\r\n            if (newElement)\r\n              newElement.focus();\r\n          }\r\n        });\r\n    }\r\n  }\r\n\r\n  private _handleFocusItem = (index: number) => {\r\n    const itemRef = this._anchorRefs[index];\r\n    // istanbul ignore else\r\n    if (itemRef && itemRef.current)\r\n      itemRef.current.focus();\r\n  };\r\n\r\n  private _handleTabClick = (index: number) => {\r\n    this._activateTab(index);\r\n  };\r\n\r\n  /** Handle keydown on tabs */\r\n  private _handleKeyDownEvent(event: React.KeyboardEvent, index: number) {\r\n    this._itemKeyboardNavigator.handleKeyDownEvent(event, index);\r\n  }\r\n\r\n  /** Handle keyup on tabs */\r\n  private _handleKeyUpEvent(event: React.KeyboardEvent, index: number) {\r\n    this._itemKeyboardNavigator.handleKeyUpEvent(event, index);\r\n  }\r\n\r\n  private _activateTab = (index: number) => {\r\n    this.props.onActivateTab && this.props.onActivateTab(index);\r\n    this.setState({ activeIndex: index });\r\n  };\r\n\r\n  /** @internal */\r\n  public override render(): JSX.Element {\r\n    const ulClassNames = classnames(\r\n      this.props.mainClassName,\r\n      this.props.green && \"uicore-tabs-green\",\r\n      this.props.className,\r\n    );\r\n\r\n    const anyIconsPresent = (this.props.labels.reduce((a, b) => a + (isTabLabelWithIcon(b) ? 1 : 0), 0)) > 0;\r\n\r\n    return (\r\n      <ul className={ulClassNames} style={this.props.style}\r\n        role=\"tablist\"\r\n        aria-orientation={this.props.orientation === Orientation.Vertical ? \"vertical\" : \"horizontal\"}\r\n      >\r\n        {this.props.labels.map((label, index) => {\r\n          let disabled;\r\n          let tooltipElement: JSX.Element | undefined;\r\n          let title: string | undefined;\r\n          let subLabel: string | undefined;\r\n          let tabId = \"\";\r\n          let icon;\r\n          if (isTabLabel(label)) {\r\n            icon = IconHelper.getIconReactNode(label.icon);\r\n            subLabel = label.subLabel;\r\n            disabled = label.disabled;\r\n            tabId = label.tabId;\r\n            if (React.isValidElement(label.tooltip))\r\n              tooltipElement = label.tooltip;\r\n            else if (typeof label.tooltip === \"string\")\r\n              title = label.tooltip;\r\n          }\r\n          return <li key={index} title={title}\r\n            className={classnames(index === this.state.activeIndex && \"core-active\", disabled && \"core-tab-item-disabled\")}\r\n            role=\"tab\"\r\n            aria-selected={index === this.state.activeIndex}\r\n            data-for={`${tabId}`} /* to support react-tooltip */\r\n          >\r\n            {tooltipElement}\r\n            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}\r\n            <a ref={this._anchorRefs[index]}\r\n              tabIndex={index === this.state.activeIndex ? 0 : -1}\r\n              onClick={() => this._handleTabClick(index)}\r\n              onKeyDown={(event) => this._handleKeyDownEvent(event, index)}\r\n              onKeyUp={(event) => this._handleKeyUpEvent(event, index)}\r\n              data-testid={`${tabId}`}\r\n              role=\"button\"\r\n            > <div className={classnames(\"uicore-tabs-inline-label\", disabled && \"core-tab-item-disabled\")}>\r\n                {anyIconsPresent && <span className=\"uicore-tabs-icon\">{icon}</span>}\r\n                <div className=\"uicore-tabs-label-subLabel-container\">\r\n                  <span>{(typeof label === \"string\") ? label : label.label}</span>\r\n                  {subLabel && <span className=\"uicore-tabs-subLabel\">{subLabel}</span>}\r\n                </div>\r\n              </div>\r\n            </a>\r\n          </li>;\r\n        }\r\n        )}\r\n      </ul>\r\n    );\r\n  }\r\n}\r\n"]}

package/lib/esm/core-react/tabs/VerticalTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalTabs.js","sourceRoot":"","sources":["../../../../src/core-react/tabs/VerticalTabs.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD;;GAEG;AACH,MAAM,UAAU,YAAY,CAAC,KAAgB;IAC3C,OAAO,CACL,oBAAC,IAAI,IAAC,aAAa,EAAC,sBAAsB,EAAC,WAAW,EAAE,WAAW,CAAC,QAAQ,KAAM,KAAK,GAAI,CAC5F,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 Tabs\n */\n\nimport * as React from \"react\";\nimport { Tabs, TabsProps } from \"./Tabs\";\nimport { Orientation } from \"../enums/Orientation\";\n\n/** Vertical tabs meant to represent the current position in a page/section\n * @public\n */\nexport function VerticalTabs(props: TabsProps) {\n  return (\n    <Tabs mainClassName=\"uicore-tabs-vertical\" orientation={Orientation.Vertical} {...props} />\n  );\n}\n"]}
+{"version":3,"file":"VerticalTabs.js","sourceRoot":"","sources":["../../../../src/core-react/tabs/VerticalTabs.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD;;GAEG;AACH,MAAM,UAAU,YAAY,CAAC,KAAgB;IAC3C,OAAO,CACL,oBAAC,IAAI,IAAC,aAAa,EAAC,sBAAsB,EAAC,WAAW,EAAE,WAAW,CAAC,QAAQ,KAAM,KAAK,GAAI,CAC5F,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 Tabs\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { Tabs, TabsProps } from \"./Tabs\";\r\nimport { Orientation } from \"../enums/Orientation\";\r\n\r\n/** Vertical tabs meant to represent the current position in a page/section\r\n * @public\r\n */\r\nexport function VerticalTabs(props: TabsProps) {\r\n  return (\r\n    <Tabs mainClassName=\"uicore-tabs-vertical\" orientation={Orientation.Vertical} {...props} />\r\n  );\r\n}\r\n"]}

package/lib/esm/core-react/tabs/classes.scss

@@ -1,7 +1,7 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "./index";
-
-.uicore-tabs-vertical   { @include uicore-tabs-vertical; }
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "./index";
+
+.uicore-tabs-vertical   { @include uicore-tabs-vertical; }

package/lib/esm/core-react/tabs/index.scss

@@ -1,5 +1,5 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "./vertical";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "./vertical";