@carbon/ibm-products 1.61.1 → 1.62.1

package/scss/components/Coachmark/styles/_coachmark-overlay.scss

@@ -19,6 +19,8 @@
   // The block part of our conventional BEM class names (blockClass__E--M).
   $block-class: #{$pkg-prefix}--coachmark-overlay;
   $carousel-class: #{$pkg-prefix}--carousel;
+  $close-btn-class: #{$block-class}--close-btn;
+  $draghandle-btn-class: #{$block-class}__handle;
 
   .#{$block-class} {
     position: absolute;
@@ -33,6 +35,8 @@
     $caret-center: $caret-height; // use "center" for left-right calculations, and "height" for top-bottom calculations
     $distance-offset: $spacing-06; // see also ./utils/constants.js > distanceOffset
 
+    visibility: hidden;
+
     &--fixed {
       position: fixed;
       right: $spacing-05;
@@ -45,8 +49,15 @@
       }
     }
 
+    &--is-dragmode {
+      border-radius: 0;
+      box-shadow: 0 0 0 $spacing-02 $inverse-02;
+      outline: $spacing-01 solid $inverse-01;
+    }
+
     &--is-visible {
       transform: translateY(0);
+      visibility: visible;
     }
 
     // CARET STYLING
@@ -202,8 +213,6 @@
 
     // BODY
     &__body {
-      padding: $spacing-01 $spacing-05 $spacing-05;
-
       .#{$carbon-prefix}--btn--ghost {
         color: $inverse-link;
 
@@ -234,13 +243,60 @@
       }
     }
 
+    // HEADER BUTTONS
+    &__handle {
+      position: relative;
+      flex-grow: 1;
+      padding: $spacing-02 0 0 $spacing-03;
+      border: 0;
+      background-color: transparent;
+      text-align: left;
+
+      &::before {
+        position: absolute;
+        top: $spacing-01;
+        left: $spacing-01;
+        width: calc($spacing-06 + $spacing-01);
+        height: calc($spacing-06 + $spacing-01);
+        content: '';
+      }
+
+      &:hover {
+        cursor: move;
+      }
+
+      &:focus {
+        border: none;
+        outline: none;
+
+        &::before {
+          border: 1px solid $inverse-01;
+          outline: 1px solid $blue-60;
+        }
+      }
+    }
+
+    &--close-btn {
+      width: $spacing-07;
+      height: $spacing-07;
+      margin-left: auto !important;
+
+      svg > path {
+        margin: 0;
+        fill: $inverse-01 !important;
+      }
+
+      &:hover {
+        background-color: $inverse-hover-ui !important;
+      }
+    }
+
     // FOOTER
     &__footer {
       display: flex;
       align-items: center;
       justify-content: flex-end;
     }
-    /* ------------------ */
 
     // THEME
     &__light {
@@ -262,6 +318,10 @@
         }
 
         .#{$carbon-prefix}--btn--ghost {
+          border-color: transparent !important;
+          border-radius: 0;
+          outline: 1px solid transparent;
+
           &:hover {
             background-color: $inverse-hover-ui;
           }
@@ -269,6 +329,33 @@
           &:active {
             background-color: $active-secondary;
           }
+
+          &:focus {
+            box-shadow: inset 0 0 0 1px $inverse-02,
+              inset 0 0 0 $spacing-01 $white-0;
+          }
+        }
+      }
+      .#{$draghandle-btn-class} {
+        &:focus {
+          &::before {
+            border: 1px solid $white-0;
+            outline: 1px solid transparent;
+          }
+        }
+      }
+      .#{$close-btn-class} {
+        border-color: transparent !important;
+        border-radius: 0;
+        outline: 1px solid transparent;
+
+        &:active {
+          background-color: $active-secondary;
+        }
+
+        &:focus {
+          box-shadow: inset 0 0 0 1px $inverse-02,
+            inset 0 0 0 $spacing-01 $white-0;
         }
       }
     }
@@ -301,6 +388,8 @@
         }
 
         .#{$carbon-prefix}--btn--ghost {
+          border-color: transparent;
+
           &:hover {
             background-color: $inverse-hover-ui;
           }
@@ -310,11 +399,30 @@
           }
 
           &:focus {
-            box-shadow: inset 0 0 0 $spacing-01 $interactive-01,
-              inset 0 0 0 rem(3px) $interactive-03;
+            box-shadow: inset 0 0 0 1px $blue-60,
+              inset 0 0 0 $spacing-01 $white-0;
+          }
+        }
+      }
+      .#{$draghandle-btn-class} {
+        &:focus {
+          &::before {
+            border: 1px solid $white-0;
+            outline: 1px solid $blue-60;
           }
         }
       }
+      .#{$close-btn-class} {
+        border-color: transparent;
+
+        &:focus {
+          box-shadow: inset 0 0 0 1px $blue-60, inset 0 0 0 $spacing-01 $white-0;
+        }
+
+        &:active {
+          background-color: $button-tertiary-active;
+        }
+      }
     }
     .#{$carousel-class}__item {
       flex: 0 0 100% !important;

package/scss/components/Coachmark/styles/_coachmark-tagline.scss

@@ -35,6 +35,7 @@
     // stylelint-disable-next-line carbon/motion-duration-use
     transition: opacity 240ms carbon--motion(exit, productive) 300ms;
     transition-delay: 240ms;
+
     @media (prefers-reduced-motion) {
       transition: none;
     }
@@ -86,6 +87,11 @@
       text-align: left;
       @include carbon--type-style('body-short-01');
 
+      &:focus {
+        box-shadow: inset 0 0 0 3px $purple-70, inset 0 0 0 $spacing-02 $white-0;
+        outline: 1px solid transparent;
+      }
+
       &:hover {
         cursor: pointer !important;
       }
@@ -98,8 +104,20 @@
     &--close-btn {
       width: $spacing-07;
       height: $spacing-07;
+      border-color: transparent !important;
+      border-radius: 0;
       margin-left: auto !important;
       color: $white-0;
+      outline: 1px solid transparent;
+
+      &:active {
+        background-color: $active-secondary;
+      }
+
+      &:focus {
+        box-shadow: inset 0 0 0 1px $inverse-02,
+          inset 0 0 0 $spacing-01 $white-0 !important;
+      }
 
       svg > path {
         margin: 0;

package/scss/components/CoachmarkBeacon/_coachmark-beacon.scss

@@ -32,6 +32,9 @@
 
     &-default {
       .#{$block-class}__target {
+        &::before {
+          display: none;
+        }
         // the blue dot
         &::after {
           position: absolute;
@@ -43,9 +46,24 @@
           background-color: $blue-50;
           content: '';
         }
+
+        &:focus {
+          outline: transparent;
+
+          &::before {
+            position: absolute;
+            top: 7px;
+            left: 7px;
+            display: block;
+            width: 18px;
+            height: 18px;
+            border-radius: 100%;
+            content: '';
+            outline: $spacing-01 $focus solid;
+          }
+        }
       }
     }
-
     .#{$block-class}__target {
       // the hit area
       position: absolute;

package/scss/components/CoachmarkOverlayElement/_coachmark-overlay-element.scss

@@ -17,6 +17,8 @@
   $carousel-item-class: #{$pkg-prefix}--carousel__item;
 
   .#{$block-class} {
+    padding: $spacing-01 $spacing-05 0;
+
     &__content {
       padding-bottom: $spacing-05;
     }

package/scss/components/CoachmarkOverlayElements/_coachmark-overlay-elements.scss

@@ -25,6 +25,7 @@
       display: flex;
       align-items: center;
       justify-content: flex-end;
+      padding: 0 $spacing-05 $spacing-05;
     }
 
     &--controls-progress {

package/scss/components/CoachmarkStack/_coachmark-stack.scss

@@ -28,6 +28,7 @@
     bottom: -100%;
     //opacity: 0;
     transform: translateY(100%);
+    visibility: hidden;
 
     &--is-mounted {
       bottom: 0;
@@ -41,6 +42,7 @@
     &--is-visible {
       opacity: 1;
       transform: translateY(0);
+      visibility: visible;
     }
 
     // Stack the level-one item behind the level-two item.
@@ -51,6 +53,7 @@
       transform: perspective(carbon--mini-units(18))
         translate3d(0, calc($spacing-09 * -1), calc($spacing-05 * -1));
       transform-origin: top center;
+      visibility: visible;
 
       &__light {
         background-color: $gray-90;

package/scss/components/Datagrid/styles/_datagrid.scss

@@ -80,7 +80,6 @@
     }
 
     &.#{$block-class}__variable-row-height {
-      &.#{$carbon-prefix}--data-table--compact,
       &.#{$carbon-prefix}--data-table--xs {
         .#{$block-class}__cell {
           padding-top: $spacing-01;
@@ -88,7 +87,6 @@
         }
       }
 
-      &.#{$carbon-prefix}--data-table--short,
       &.#{$carbon-prefix}--data-table--sm,
       &.#{$carbon-prefix}--data-table--md {
         .#{$block-class}__cell {
@@ -99,7 +97,6 @@
         }
       }
 
-      &.#{$carbon-prefix}--data-table--tall,
       &.#{$carbon-prefix}--data-table--lg,
       &.#{$carbon-prefix}--data-table--xl {
         .#{$block-class}__cell {
@@ -111,7 +108,6 @@
   }
 
   &.#{$block-class}__vertical-align-top {
-    &.#{$carbon-prefix}--data-table--tall,
     &.#{$carbon-prefix}--data-table--lg,
     &.#{$carbon-prefix}--data-table--xl {
       .#{$block-class}__cell {
@@ -129,7 +125,6 @@
     }
 
     &.#{$block-class}__variable-row-height {
-      &.#{$carbon-prefix}--data-table--tall,
       &.#{$carbon-prefix}--data-table--lg,
       &.#{$carbon-prefix}--data-table--xl {
         .#{$block-class}__cell {
@@ -325,6 +320,11 @@
   background-color: $hover-selected-ui;
 }
 
+.#{$block-class}__grid-container
+  table.#{$block-class}__table-simple.#{$carbon-prefix}--data-table.#{$block-class}__table-is-resizing {
+  overflow-y: hidden;
+}
+
 .#{$block-class}__resizableColumn {
   &.#{$block-class}__isResizing {
     .#{$block-class}__resizer {
@@ -346,6 +346,32 @@
   }
 }
 
+.#{$block-class}__header-actions-column:hover {
+  background-color: $layer-accent;
+}
+
+.#{$block-class}
+  .#{$block-class}__carbon-row
+  .#{$block-class}__actions-column-cell-non-sticky
+  .#{$carbon-prefix}--overflow-menu {
+  opacity: 0;
+}
+
+.#{$block-class}
+  .#{$block-class}__carbon-row:hover
+  .#{$block-class}__actions-column-cell-non-sticky
+  .#{$carbon-prefix}--overflow-menu,
+.#{$block-class}
+  .#{$block-class}__carbon-row
+  .#{$block-class}__actions-column-cell-non-sticky
+  .#{$carbon-prefix}--overflow-menu:focus,
+.#{$block-class}
+  .#{$block-class}__carbon-row
+  .#{$block-class}__actions-column-cell-non-sticky
+  .#{$carbon-prefix}--overflow-menu[aria-expanded='true'] {
+  opacity: 1;
+}
+
 .#{$block-class}__head-hidden-select-all {
   padding-right: $spacing-09;
 

package/scss/components/Datagrid/styles/_useExpandedRow.scss

@@ -63,3 +63,24 @@
 .#{$block-class} .#{$block-class}__expandable-row--hover td {
   background: $layer-hover;
 }
+
+.#{$block-class}
+  .#{$carbon-prefix}--data-table
+  tbody
+  tr:hover
+  td.#{$block-class}__expanded-row-cell-wrapper,
+.#{$block-class}
+  .#{$carbon-prefix}--data-table
+  td.#{$block-class}__expanded-row-cell-wrapper,
+.#{$block-class}
+  .#{$carbon-prefix}--data-table
+  .#{$block-class}__carbon-row-expanded
+  td.#{$block-class}__expandable-row-cell {
+  border: none;
+}
+
+.#{$block-class}
+  .#{$carbon-prefix}--data-table
+  td.#{$block-class}__expanded-row-cell-wrapper {
+  padding: 0;
+}

package/scss/components/Datagrid/styles/_useNestedRows.scss

@@ -36,7 +36,7 @@
 
 .#{$block-class}
   tr.#{$block-class}__carbon-nested-row
-  + :not(tr.#{$block-class}__carbon-nested-row)::before {
+  + :not(tr.#{$block-class}__carbon-nested-row)::after {
   position: absolute;
   /* stylelint-disable-next-line carbon/layout-token-use */
   top: -1px;

package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss

@@ -67,3 +67,12 @@
 .#{$block-class}__row-size__row-settings-trigger--open.#{$carbon-prefix}--btn--ghost {
   background-color: $ui-02;
 }
+
+.#{$block-class}
+  table.#{$carbon-prefix}--data-table--xl.#{$block-class}__vertical-align-center
+  td.#{$block-class}__expandable-row-cell,
+.#{$block-class}
+  table.#{$carbon-prefix}--data-table--xl.#{$block-class}__vertical-align-top
+  td.#{$block-class}__expandable-row-cell {
+  padding-top: $spacing-03;
+}

package/scss/components/_index-released-only.scss

@@ -17,6 +17,7 @@
 @import './CreateSidePanel/index';
 @import './CreateTearsheetNarrow/index';
 @import './CreateTearsheet/index';
+@import './Datagrid/index';
 @import './EmptyStates/index';
 @import './ExportModal/index';
 @import './ExpressiveCard/index';

package/es/components/Carousel/utils.js

@@ -1,98 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-/**
- * Copyright IBM Corp. 2023, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-export var useIntersection = function useIntersection(element, threshold) {
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isVisible = _useState2[0],
-    setState = _useState2[1];
-  useEffect(function () {
-    var el = element.current;
-    var observer = new IntersectionObserver(function (_ref) {
-      var _ref2 = _slicedToArray(_ref, 1),
-        entry = _ref2[0];
-      setState(entry.isIntersecting);
-    }, {
-      threshold: threshold
-    });
-    el && observer.observe(el);
-    return function () {
-      return observer.unobserve(el);
-    };
-  }, [element, threshold]);
-  return isVisible;
-};
-export var useIsOverflow = function useIsOverflow(ref) {
-  var _useState3 = useState(),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isScrollable = _useState4[0],
-    setIsScrollable = _useState4[1];
-  var _useState5 = useState(),
-    _useState6 = _slicedToArray(_useState5, 2),
-    mutationObserver = _useState6[0],
-    setMutationObserver = _useState6[1];
-  var _useState7 = useState(),
-    _useState8 = _slicedToArray(_useState7, 2),
-    resizeObserver = _useState8[0],
-    setResizeObserver = _useState8[1];
-  var checkOverflow = useCallback(function () {
-    if (!ref.current) {
-      return;
-    }
-    var hasOverflow = ref.current.scrollWidth > ref.current.clientWidth;
-    setIsScrollable(hasOverflow);
-  }, [ref]);
-  useEffect(function () {
-    if (!mutationObserver) {
-      return;
-    }
-    return function () {
-      if (mutationObserver) {
-        mutationObserver.disconnect();
-      }
-      if (resizeObserver) {
-        resizeObserver.disconnect();
-      }
-    };
-  });
-  useLayoutEffect(function () {
-    var current = ref.current;
-    if (current) {
-      if ('ResizeObserver' in window && !resizeObserver) {
-        setResizeObserver(new ResizeObserver(checkOverflow).observe(current));
-      }
-      if ('MutationObserver' in window && !mutationObserver) {
-        setMutationObserver(new MutationObserver(checkOverflow).observe(current, {
-          attributes: false,
-          childList: true,
-          subtree: false
-        }));
-      }
-      checkOverflow();
-    }
-  }, [ref, checkOverflow, mutationObserver, resizeObserver]);
-  return isScrollable;
-};
-export var useWindowEvent = function useWindowEvent(eventName, callback) {
-  var savedCallback = useRef(null);
-  useEffect(function () {
-    savedCallback.current = callback;
-  });
-  useEffect(function () {
-    function handler(event) {
-      if (savedCallback.current) {
-        savedCallback.current(event);
-      }
-    }
-    window.addEventListener(eventName, handler);
-    return function () {
-      window.removeEventListener(eventName, handler);
-    };
-  }, [eventName]);
-};

package/lib/components/Carousel/utils.js

@@ -1,108 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useWindowEvent = exports.useIsOverflow = exports.useIntersection = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
-/**
- * Copyright IBM Corp. 2023, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var useIntersection = function useIntersection(element, threshold) {
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isVisible = _useState2[0],
-    setState = _useState2[1];
-  (0, _react.useEffect)(function () {
-    var el = element.current;
-    var observer = new IntersectionObserver(function (_ref) {
-      var _ref2 = (0, _slicedToArray2.default)(_ref, 1),
-        entry = _ref2[0];
-      setState(entry.isIntersecting);
-    }, {
-      threshold: threshold
-    });
-    el && observer.observe(el);
-    return function () {
-      return observer.unobserve(el);
-    };
-  }, [element, threshold]);
-  return isVisible;
-};
-exports.useIntersection = useIntersection;
-var useIsOverflow = function useIsOverflow(ref) {
-  var _useState3 = (0, _react.useState)(),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isScrollable = _useState4[0],
-    setIsScrollable = _useState4[1];
-  var _useState5 = (0, _react.useState)(),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    mutationObserver = _useState6[0],
-    setMutationObserver = _useState6[1];
-  var _useState7 = (0, _react.useState)(),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    resizeObserver = _useState8[0],
-    setResizeObserver = _useState8[1];
-  var checkOverflow = (0, _react.useCallback)(function () {
-    if (!ref.current) {
-      return;
-    }
-    var hasOverflow = ref.current.scrollWidth > ref.current.clientWidth;
-    setIsScrollable(hasOverflow);
-  }, [ref]);
-  (0, _react.useEffect)(function () {
-    if (!mutationObserver) {
-      return;
-    }
-    return function () {
-      if (mutationObserver) {
-        mutationObserver.disconnect();
-      }
-      if (resizeObserver) {
-        resizeObserver.disconnect();
-      }
-    };
-  });
-  (0, _react.useLayoutEffect)(function () {
-    var current = ref.current;
-    if (current) {
-      if ('ResizeObserver' in window && !resizeObserver) {
-        setResizeObserver(new ResizeObserver(checkOverflow).observe(current));
-      }
-      if ('MutationObserver' in window && !mutationObserver) {
-        setMutationObserver(new MutationObserver(checkOverflow).observe(current, {
-          attributes: false,
-          childList: true,
-          subtree: false
-        }));
-      }
-      checkOverflow();
-    }
-  }, [ref, checkOverflow, mutationObserver, resizeObserver]);
-  return isScrollable;
-};
-exports.useIsOverflow = useIsOverflow;
-var useWindowEvent = function useWindowEvent(eventName, callback) {
-  var savedCallback = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
-    savedCallback.current = callback;
-  });
-  (0, _react.useEffect)(function () {
-    function handler(event) {
-      if (savedCallback.current) {
-        savedCallback.current(event);
-      }
-    }
-    window.addEventListener(eventName, handler);
-    return function () {
-      window.removeEventListener(eventName, handler);
-    };
-  }, [eventName]);
-};
-exports.useWindowEvent = useWindowEvent;