genesys-spark-components 4.168.1 → 4.169.0

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-time-zone-picker/tests/gux-form-field-time-zone-picker.common.js

@@ -0,0 +1,52 @@
+const labelPositionRenderConfigs = ['above', 'beside', 'screenreader'].map(labelPosition => ({
+    description: `should render component as expected when label-position is ${labelPosition}`,
+    html: `
+      <gux-form-field-time-zone-picker label-position="${labelPosition}">
+        <gux-time-zone-picker-beta value="Etc/GMT+1" workspace-default="Etc/GMT" local-default="America/Detroit"></gux-time-zone-picker-beta>
+        <label slot="label">Label</label>
+      </gux-form-field-time-zone-picker>
+    `
+}));
+const inputAttributeRenderConfigs = ['disabled', 'required'].map(inputAttribute => ({
+    description: `should render component as expected when input attribute is "${inputAttribute}"`,
+    html: `
+      <gux-form-field-time-zone-picker>
+        <gux-time-zone-picker-beta value="Etc/GMT+1" workspace-default="Etc/GMT" local-default="America/Detroit" ${inputAttribute}></gux-time-zone-picker-beta>
+        <label slot="label">Label</label>
+      </gux-form-field-time-zone-picker>
+    `
+}));
+const indicatorMarkRenderConfigs = ['optional', 'required'].map(indicatorMark => ({
+    description: `should render component as expected when indicator-mark is "${indicatorMark}"`,
+    html: `
+    <gux-form-field-time-zone-picker indicator-mark="${indicatorMark}">
+      <gux-time-zone-picker-beta value="Etc/GMT+1" workspace-default="Etc/GMT" local-default="America/Detroit"></gux-time-zone-picker-beta>
+      <label slot="label">Label</label>
+    </gux-form-field-time-zone-picker>
+  `
+}));
+const optionalSlotRenderConfigs = [
+    { name: 'help', html: `<span slot="help">This is a help message</span>` },
+    { name: 'error', html: `<span slot="error">This is an error message</span>` },
+    {
+        name: 'label-info',
+        html: `<gux-label-info-beta slot="label-info">
+      <span slot="content">This is some tooltip text</span>
+    </gux-label-info-beta>`
+    }
+].map(({ name, html }) => ({
+    description: `should render component as expected when an optional "${name}" slot is provided`,
+    html: `
+    <gux-form-field-time-zone-picker>
+      <gux-time-zone-picker-beta value="Etc/GMT+1" workspace-default="Etc/GMT" local-default="America/Detroit"></gux-time-zone-picker-beta>
+      <label slot="label">Label</label>
+      ${html}
+    </gux-form-field-time-zone-picker>
+  `
+}));
+export const renderConfigs = [
+    ...labelPositionRenderConfigs,
+    ...inputAttributeRenderConfigs,
+    ...indicatorMarkRenderConfigs,
+    ...optionalSlotRenderConfigs
+];

package/dist/collection/components/stable/gux-table/tests/gux-table.common.js

@@ -0,0 +1,162 @@
+const tableContent = `
+    <table slot="data">
+      <thead>
+        <tr>
+          <th>First name</th>
+          <th>Last name</th>
+          <th data-cell-numeric>Age</th>
+          <th data-cell-action>Action</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>John</td>
+          <td>Doe</td>
+          <td data-cell-numeric>25</td>
+          <td data-cell-action>Delete</td>
+        </tr>
+        <tr>
+          <td>Jane</td>
+          <td>Doe</td>
+          <td data-cell-numeric>23</td>
+          <td data-cell-action>Delete</td>
+        </tr>
+        <tr>
+          <td>Jane</td>
+          <td>Doe</td>
+          <td data-cell-numeric>21</td>
+          <td data-cell-action>Delete</td>
+        </tr>
+        <tr>
+          <td>Jane</td>
+          <td>Doe</td>
+          <td data-cell-numeric>23</td>
+          <td data-cell-action>Delete</td>
+        </tr>
+      </tbody>
+    </table>
+  `;
+export const emptyTableRenderConfig = {
+    description: 'empty table',
+    html: `
+        <gux-table>
+          <table slot="data">
+            <thead>
+              <tr>
+                <th>First name</th>
+                <th>Last name</th>
+                <th data-cell-numeric>Age</th>
+                <th data-cell-action>Action</th>
+              </tr>
+            </thead>
+          </table>
+        </gux-table>
+        `
+};
+export const selectableTableRenderConfig = {
+    description: 'should render a gux-table-select menu',
+    html: `
+          <gux-table>
+            <table slot="data">
+              <thead>
+                <tr data-row-id="head">
+                  <th>
+                  <gux-table-select-menu>
+                  <gux-all-row-select></gux-all-row-select>
+                  <gux-list slot="select-menu-options">
+                    <gux-list-item onclick="notify(event)">
+                      All on page
+                    </gux-list-item>
+                    <gux-list-item onclick="notify(event)"> None </gux-list-item>
+                    <gux-list-item onclick="notify(event)">
+                      Bring selected to top
+                    </gux-list-item>
+                  </gux-list>
+                </gux-table-select-menu>
+
+                  </th>
+                  <th data-column-name="first-name">First name</th>
+                  <th data-column-name="last-name">Last name</th>
+                  <th data-column-name="age" data-cell-numeric>Age</th>
+                  <th data-column-name="action" data-cell-action>Action</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr data-row-id="person-id-1">
+                  <td><gux-row-select disabled></gux-row-select></td>
+                  <td>John</td>
+                  <td>Doe</td>
+                  <td data-cell-numeric>25</td>
+                  <td data-cell-action>Delete</td>
+                </tr>
+                <tr data-row-id="person-id-2">
+                  <td><gux-row-select></gux-row-select></td>
+                  <td>Jane</td>
+                  <td>Doe</td>
+                  <td data-cell-numeric>23</td>
+                  <td data-cell-action>Delete</td>
+                </tr>
+                <tr data-row-id="person-id-3">
+                  <td><gux-row-select disabled></gux-row-select></td>
+                  <td>Jane</td>
+                  <td>Doe</td>
+                  <td data-cell-numeric>21</td>
+                  <td data-cell-action>Delete</td>
+                </tr>
+                <tr data-row-id="person-id-4">
+                  <td><gux-row-select></gux-row-select></td>
+                  <td>Jane</td>
+                  <td>Doe</td>
+                  <td data-cell-numeric>23</td>
+                  <td data-cell-action>Delete</td>
+                </tr>
+              </tbody>
+            </table>
+          </gux-table>
+        `
+};
+export const renderConfigs = [
+    emptyTableRenderConfig,
+    selectableTableRenderConfig,
+    {
+        description: 'should render data table',
+        html: `<gux-table>${tableContent}</gux-table>`
+    },
+    {
+        description: 'should render compact data table',
+        html: `<gux-table compact>${tableContent}</gux-table>`
+    },
+    {
+        description: 'should render object table',
+        html: `<gux-table object-table>${tableContent}</gux-table>`
+    },
+    {
+        description: 'should render table with vertical scroll',
+        html: `<gux-table style="height: 150px">${tableContent}</gux-table>`
+    },
+    {
+        description: 'should render table with horizontal scroll',
+        html: `<gux-table style="width: 300px">${tableContent}</gux-table>`
+    },
+    {
+        description: 'should render table with rows selection',
+        html: `<gux-table object-table selectable-rows>${tableContent}</gux-table>`
+    },
+    {
+        description: 'should render empty table with rows selection',
+        html: `
+          <gux-table object-table selectable-rows>
+            <table slot="data">
+              <thead>
+                <tr>
+                  <th>First name</th>
+                  <th>Last name</th>
+                  <th data-cell-numeric>Age</th>
+                  <th data-cell-action>Action</th>
+                </tr>
+              </thead>
+            </table>
+          </gux-table>
+        `
+    }
+];

package/dist/collection/components/stable/gux-tabs/gux-tab-list/gux-tab-list.css

@@ -1,7 +1,4 @@
-gux-tabs[orientation=vertical] {
-  block-size: 100%;
-}
-gux-tabs[orientation=vertical] > gux-tab-list .gux-tab-container {
+.gux-vertical .gux-tab-container {
   display: flex;
   flex-direction: column;
   inline-size: var(--gse-ui-tabs-set-vertical-width);
@@ -9,61 +6,64 @@ gux-tabs[orientation=vertical] > gux-tab-list .gux-tab-container {
   margin-inline-end: var(--gse-ui-tabs-set-vertical-marginRight);
   border-inline-end: var(--gse-ui-tabs-item-divider-horizontal-height) solid var(--gse-ui-tabs-item-divider-dividerColor);
 }
-gux-tabs[orientation=vertical] > gux-tab-list .gux-tab-container .gux-scroll-button-container {
+.gux-vertical .gux-tab-container .gux-scroll-button-container {
   inline-size: 100%;
 }
-gux-tabs[orientation=vertical] > gux-tab-list .gux-tab-container .gux-scroll-button-container button {
+.gux-vertical .gux-tab-container .gux-scroll-button-container button {
   inline-size: 100%;
 }
-gux-tabs[orientation=vertical] > gux-tab-list .gux-tab-container .gux-scrollable-section {
+.gux-vertical .gux-tab-container .gux-scrollable-section {
   flex-direction: column;
   block-size: 100%;
   overflow-y: auto;
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* Internet Explorer 10+ */
+  scrollbar-width: none;
+  /* Firefox */
+  -ms-overflow-style: none;
+  /* Internet Explorer 10+ */
   scroll-behavior: smooth;
 }
-gux-tabs[orientation=vertical] > gux-tab-list .gux-tab-container .gux-scrollable-section::-webkit-scrollbar {
+.gux-vertical .gux-tab-container .gux-scrollable-section::-webkit-scrollbar {
   /* WebKit */
   inline-size: 0;
   block-size: 0;
 }
-gux-tabs:not([orientation=vertical]) > gux-tab-list .gux-tab-container {
+
+.gux-horizontal .gux-tab-container {
   block-size: var(--gse-ui-tabs-set-horizontal-height);
   margin-block-end: var(--gse-ui-tabs-set-horizontal-marginBottom);
   border-block-end: var(--gse-ui-tabs-item-divider-horizontal-height) solid var(--gse-ui-tabs-item-divider-dividerColor);
 }
-gux-tabs:not([orientation=vertical]) > gux-tab-list .gux-scrollable-section {
+.gux-horizontal .gux-scrollable-section {
   overflow-x: auto;
 }
-gux-tabs .gux-tab-container {
+.gux-horizontal .gux-tab-container {
   box-sizing: content-box;
   display: flex;
   inline-size: 100%;
   overflow: hidden;
   background-color: transparent;
 }
-gux-tabs .gux-scrollable-section {
+.gux-horizontal .gux-scrollable-section {
   display: flex;
   flex: 1 1 auto;
   scroll-behavior: smooth;
   scrollbar-width: none;
 }
-gux-tabs .gux-scrollable-section::-webkit-scrollbar {
+.gux-horizontal .gux-scrollable-section::-webkit-scrollbar {
   block-size: 0;
 }
-gux-tabs .gux-scroll-button-container {
+.gux-horizontal .gux-scroll-button-container {
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: var(--gse-ui-advancedTabs-set-backgroundColor);
   border-radius: var(--gse-ui-button-borderRadius);
 }
-gux-tabs .gux-scroll-button-container gux-button-slot {
+.gux-horizontal .gux-scroll-button-container gux-button-slot {
   inline-size: 100%;
   block-size: 100%;
 }
-gux-tabs .gux-scroll-button-container button {
+.gux-horizontal .gux-scroll-button-container button {
   display: flex;
   align-items: center;
   justify-content: center;

package/dist/collection/components/stable/gux-tabs/gux-tabs.css

@@ -1,3 +1,11 @@
+:host(.gux-tabs-vertical) {
+  block-size: 100%;
+}
+
+:host(.gux-tabs-horizontal) .gux-tabs {
+  flex-direction: column;
+}
+
 :host {
   display: flex;
   flex-direction: column;
@@ -6,9 +14,6 @@
   display: flex;
   block-size: 100%;
 }
-:host .gux-tabs:not(.gux-vertical) {
-  flex-direction: column;
-}
 :host .gux-panel-container {
   display: flex;
   flex: 1 1 auto;

package/dist/collection/components/stable/gux-tabs/gux-tabs.js

@@ -20,6 +20,9 @@ export class GuxTabs {
         this.activateTab(newValue, this.tabList, this.tabPanels);
         this.guxactivetabchange.emit(newValue);
     }
+    watchOrientation(value) {
+        this.setOrientation(this.tabList, value);
+    }
     onInternalActivateTabPanel(event) {
         event.stopPropagation();
         const tabId = event.detail;
@@ -34,6 +37,17 @@ export class GuxTabs {
         this.tabList = tabListSlot.assignedElements()[0];
         this.tabPanels = defaultSlot.assignedElements();
         this.activateTab(this.activeTab, this.tabList, this.tabPanels);
+        this.setOrientation(this.tabList, this.orientation);
+    }
+    setOrientation(tabList, orientation) {
+        if (orientation === 'vertical') {
+            tabList.classList.add('gux-vertical');
+            tabList.classList.remove('gux-horizontal');
+        }
+        else {
+            tabList.classList.add('gux-horizontal');
+            tabList.classList.remove('gux-vertical');
+        }
     }
     activateTab(tabId, tabList, panels) {
         if (tabId) {
@@ -49,7 +63,7 @@ export class GuxTabs {
         trackComponent(this.root);
     }
     render() {
-        return (h(Host, { key: 'cf01a5e35b3ee15cd7013225ed3e46bfad5d1204' }, h("div", { key: '321ff6e7e4fee49334e63603e6520e052899dda9', class: `gux-tabs gux-${this.alignment} gux-${this.orientation}` }, h("slot", { key: 'cfb05ce00112a61da7d094df01ad52071c5c4b22', name: "tab-list" }), h("div", { key: 'f47aebd51c9cfb19f8a90ecb6b8f1094d73b2405', class: `gux-${this.alignment} gux-${this.orientation} gux-panel-container` }, h("slot", { key: '192a06197912cff69c96a5a00f1bb4acded8ebbd', onSlotchange: this.onSlotchange.bind(this) })))));
+        return (h(Host, { key: 'a7f420ba6baeb0698061c5ed4418ee45edf13069', class: `gux-tabs-${this.orientation}` }, h("div", { key: 'e1db20092fdebaea0016a8b8f40b3514f7917102', class: `gux-tabs gux-${this.alignment} gux-${this.orientation}` }, h("slot", { key: '3445cbc5154ec69f3792529c3701e0fba4d3ee35', name: "tab-list" }), h("div", { key: 'afcf5409c46836cac39ff90d5f72a9cb0fdc552f', class: `gux-${this.alignment} gux-${this.orientation} gux-panel-container` }, h("slot", { key: 'ecb28c5c175d3a7f8fc60e3ff4487a0df2db78cd', onSlotchange: this.onSlotchange.bind(this) })))));
     }
     static get is() { return "gux-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -192,6 +206,9 @@ export class GuxTabs {
         return [{
                 "propName": "activeTab",
                 "methodName": "watchActiveTab"
+            }, {
+                "propName": "orientation",
+                "methodName": "watchOrientation"
             }];
     }
     static get listeners() {

package/dist/esm/{floating-ui.dom-CqNXdaSr.js → floating-ui.dom-C8aV-TzO.js}

@@ -928,7 +928,7 @@ function isOverflowElement(element) {
     overflowX,
     overflowY,
     display
-  } = getComputedStyle(element);
+  } = getComputedStyle$1(element);
   return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
 }
 const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
@@ -950,7 +950,7 @@ const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspect
 const containValues = ['paint', 'layout', 'strict', 'content'];
 function isContainingBlock(elementOrCss) {
   const webkit = isWebKit();
-  const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
+  const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
   // https://drafts.csswg.org/css-transforms-2/#individual-transforms
@@ -976,7 +976,7 @@ const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#documen
 function isLastTraversableNode(node) {
   return lastTraversableNodeNames.has(getNodeName(node));
 }
-function getComputedStyle(element) {
+function getComputedStyle$1(element) {
   return getWindow(element).getComputedStyle(element);
 }
 function getNodeScroll(element) {
@@ -1038,7 +1038,7 @@ function getFrameElement(win) {
 }
 
 function getCssDimensions(element) {
-  const css = getComputedStyle(element);
+  const css = getComputedStyle$1(element);
   // In testing environments, the `width` and `height` properties are empty
   // strings for SVG elements, returning NaN. Fallback to `0` in this case.
   let width = parseFloat(css.width) || 0;
@@ -1143,7 +1143,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     while (currentIFrame && offsetParent && offsetWin !== currentWin) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
-      const css = getComputedStyle(currentIFrame);
+      const css = getComputedStyle$1(currentIFrame);
       const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
       const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
       x *= iframeScale.x;
@@ -1174,14 +1174,9 @@ function getWindowScrollBarX(element, rect) {
   return rect.left + leftScroll;
 }
 
-function getHTMLOffset(documentElement, scroll, ignoreScrollbarX) {
-  if (ignoreScrollbarX === void 0) {
-    ignoreScrollbarX = false;
-  }
+function getHTMLOffset(documentElement, scroll) {
   const htmlRect = documentElement.getBoundingClientRect();
-  const x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 :
-  // RTL <body> scrollbar.
-  getWindowScrollBarX(documentElement, htmlRect));
+  const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
   const y = htmlRect.top + scroll.scrollTop;
   return {
     x,
@@ -1220,7 +1215,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
       offsets.y = offsetRect.y + offsetParent.clientTop;
     }
   }
-  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, true) : createCoords(0);
+  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
   return {
     width: rect.width * scale.x,
     height: rect.height * scale.y,
@@ -1243,7 +1238,7 @@ function getDocumentRect(element) {
   const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
   let x = -scroll.scrollLeft + getWindowScrollBarX(element);
   const y = -scroll.scrollTop;
-  if (getComputedStyle(body).direction === 'rtl') {
+  if (getComputedStyle$1(body).direction === 'rtl') {
     x += max(html.clientWidth, body.clientWidth) - width;
   }
   return {
@@ -1254,6 +1249,10 @@ function getDocumentRect(element) {
   };
 }
 
+// Safety check: ensure the scrollbar space is reasonable in case this
+// calculation is affected by unusual styles.
+// Most scrollbars leave 15-18px of space.
+const SCROLLBAR_MAX = 25;
 function getViewportRect(element, strategy) {
   const win = getWindow(element);
   const html = getDocumentElement(element);
@@ -1271,6 +1270,24 @@ function getViewportRect(element, strategy) {
       y = visualViewport.offsetTop;
     }
   }
+  const windowScrollbarX = getWindowScrollBarX(html);
+  // <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
+  // visual width of the <html> but this is not considered in the size
+  // of `html.clientWidth`.
+  if (windowScrollbarX <= 0) {
+    const doc = html.ownerDocument;
+    const body = doc.body;
+    const bodyStyles = getComputedStyle(body);
+    const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
+    const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
+    if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
+      width -= clippingStableScrollbarWidth;
+    }
+  } else if (windowScrollbarX <= SCROLLBAR_MAX) {
+    // If the <body> scrollbar is on the left, the width needs to be extended
+    // by the scrollbar amount so there isn't extra space on the right.
+    width += windowScrollbarX;
+  }
   return {
     width,
     height,
@@ -1321,7 +1338,7 @@ function hasFixedPositionAncestor(element, stopNode) {
   if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
     return false;
   }
-  return getComputedStyle(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
+  return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
 }
 
 // A "clipping ancestor" is an `overflow` element with the characteristic of
@@ -1334,12 +1351,12 @@ function getClippingElementAncestors(element, cache) {
   }
   let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
   let currentContainingBlockComputedStyle = null;
-  const elementIsFixed = getComputedStyle(element).position === 'fixed';
+  const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
   let currentNode = elementIsFixed ? getParentNode(element) : element;
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
   while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
-    const computedStyle = getComputedStyle(currentNode);
+    const computedStyle = getComputedStyle$1(currentNode);
     const currentNodeIsContaining = isContainingBlock(currentNode);
     if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
       currentContainingBlockComputedStyle = null;
@@ -1440,11 +1457,11 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
 }
 
 function isStaticPositioned(element) {
-  return getComputedStyle(element).position === 'static';
+  return getComputedStyle$1(element).position === 'static';
 }
 
 function getTrueOffsetParent(element, polyfill) {
-  if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') {
+  if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
     return null;
   }
   if (polyfill) {
@@ -1505,7 +1522,7 @@ const getElementRects = async function (data) {
 };
 
 function isRTL(element) {
-  return getComputedStyle(element).direction === 'rtl';
+  return getComputedStyle$1(element).direction === 'rtl';
 }
 
 const platform = {