@ebay/ui-core-react 7.4.0-alpha.7 → 7.4.0-alpha.8

package/common/floating-label-utils/hooks/index.js

@@ -1 +1,106 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),p=require("classnames"),r="floating-label__label",v=["rgb(245, 245, 245)","rgb(247, 247, 247)"],w=t=>t&&!v.includes(getComputedStyle(t).backgroundColor),g=t=>{var n;return((n=t==null?void 0:t.value)==null?void 0:n.length)>0},x=t=>(t==null?void 0:t.tagName)==="SELECT",f=(t,n)=>{if(x(t)&&!g(t.querySelector("option"))){t.style["min-width"]="";const l=t.offsetWidth;t.querySelector("option").text=n,!n&&l>t.offsetWidth&&(t.style["min-width"]=`${l}px`)}},O=t=>x(t)?t.querySelector("option").text:t==null?void 0:t.placeholder;function j({ref:t,inputId:n,className:l,disabled:N,label:c,inputSize:m,inputValue:d,placeholder:b,invalid:q,opaqueLabel:R,type:$,onMount:B=()=>{}}){const L=o.useRef(null),a=()=>t||L,[F,u]=o.useState(!!d),[k,h]=o.useState(!1),[i,C]=o.useState(!1),S=o.useRef(""),P=()=>{var e;h(!0),u(g((e=a())==null?void 0:e.current)),C(!1),f(a().current,"")},A=()=>{var e;h(!0),u(!0),C(!0),f((e=a())==null?void 0:e.current,S.current)};o.useEffect(()=>{var e,s;c&&(S.current=O((e=a())==null?void 0:e.current),f((s=a())==null?void 0:s.current,""),B())},[]),o.useEffect(()=>{var e,s,y;c&&u(i||g((e=a())==null?void 0:e.current)||w((y=(s=a())==null?void 0:s.current)==null?void 0:y.parentNode))},[i,d]);const T=p(l,r,{[`${r}--disabled`]:N,[`${r}--animate`]:k,[`${r}--inline`]:!F&&$!=="date",[`${r}--focus`]:i,[`${r}--invalid`]:q}),E=p("floating-label",{"floating-label--large":m==="large","floating-label--opaque":R}),W=o.useCallback(({children:e})=>o.createElement(o.Fragment,null,e),[]),_=o.useCallback(({children:e})=>o.createElement("span",{className:E},e),[E]);return c?{label:o.createElement("label",{htmlFor:n,className:T},c),Container:_,onBlur:P,onFocus:A,ref:a(),placeholder:F?b:null}:{label:null,Container:W,onBlur:()=>{},onFocus:()=>{},ref:a(),placeholder:b}}exports.useFloatingLabel=j;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const classNames = require("classnames");
+const classPrefix = "floating-label__label";
+const textboxElementBackgroundRGB = [
+  "rgb(245, 245, 245)",
+  "rgb(247, 247, 247)"
+  // From skin version 12.6.0
+];
+const isAutofilled = (input) => input && !textboxElementBackgroundRGB.includes(getComputedStyle(input).backgroundColor);
+const hasValue = (input) => {
+  var _a;
+  return ((_a = input == null ? void 0 : input.value) == null ? void 0 : _a.length) > 0;
+};
+const isSelect = (element) => (element == null ? void 0 : element.tagName) === `SELECT`;
+const setPlaceholder = (element, value) => {
+  if (isSelect(element) && !hasValue(element.querySelector(`option`))) {
+    element.style["min-width"] = "";
+    const beforeWidth = element.offsetWidth;
+    element.querySelector(`option`).text = value;
+    if (!value && beforeWidth > element.offsetWidth) {
+      element.style["min-width"] = `${beforeWidth}px`;
+    }
+  }
+};
+const getPlaceholder = (element) => {
+  if (isSelect(element)) {
+    return element.querySelector(`option`).text;
+  }
+  return element == null ? void 0 : element.placeholder;
+};
+function useFloatingLabel({ ref, inputId, className, disabled, label, inputSize, inputValue, placeholder, invalid, opaqueLabel, type, onMount = () => {
+} }) {
+  const _internalInputRef = React.useRef(null);
+  const inputRef = () => ref || _internalInputRef;
+  const [isFloating, setFloating] = React.useState(Boolean(inputValue));
+  const [shouldAnimate, setAnimate] = React.useState(false);
+  const [isFocused, setFocused] = React.useState(false);
+  const selectFirstOptionText = React.useRef(``);
+  const onBlur = () => {
+    var _a;
+    setAnimate(true);
+    setFloating(hasValue((_a = inputRef()) == null ? void 0 : _a.current));
+    setFocused(false);
+    setPlaceholder(inputRef().current, ``);
+  };
+  const onFocus = () => {
+    var _a;
+    setAnimate(true);
+    setFloating(true);
+    setFocused(true);
+    setPlaceholder((_a = inputRef()) == null ? void 0 : _a.current, selectFirstOptionText.current);
+  };
+  React.useEffect(() => {
+    var _a, _b;
+    if (!label) {
+      return;
+    }
+    selectFirstOptionText.current = getPlaceholder((_a = inputRef()) == null ? void 0 : _a.current);
+    setPlaceholder((_b = inputRef()) == null ? void 0 : _b.current, ``);
+    onMount();
+  }, []);
+  React.useEffect(() => {
+    var _a, _b, _c;
+    if (!label) {
+      return;
+    }
+    setFloating(isFocused || hasValue((_a = inputRef()) == null ? void 0 : _a.current) || isAutofilled((_c = (_b = inputRef()) == null ? void 0 : _b.current) == null ? void 0 : _c.parentNode));
+  }, [isFocused, inputValue]);
+  const labelClassName = classNames(className, classPrefix, {
+    [`${classPrefix}--disabled`]: disabled,
+    [`${classPrefix}--animate`]: shouldAnimate,
+    [`${classPrefix}--inline`]: !isFloating && type !== "date",
+    [`${classPrefix}--focus`]: isFocused,
+    [`${classPrefix}--invalid`]: invalid
+  });
+  const floatingLabelClassName = classNames(`floating-label`, {
+    "floating-label--large": inputSize === `large`,
+    "floating-label--opaque": opaqueLabel
+  });
+  const FragmentContainer = React.useCallback(({ children }) => React.createElement(React.Fragment, null, children), []);
+  const FloatingLabelContainer = React.useCallback(({ children }) => React.createElement("span", { className: floatingLabelClassName }, children), [floatingLabelClassName]);
+  if (!label) {
+    return {
+      label: null,
+      Container: FragmentContainer,
+      onBlur: () => {
+      },
+      onFocus: () => {
+      },
+      ref: inputRef(),
+      placeholder
+    };
+  }
+  const labelElement = React.createElement("label", { htmlFor: inputId, className: labelClassName }, label);
+  return {
+    label: labelElement,
+    Container: FloatingLabelContainer,
+    onBlur,
+    onFocus,
+    ref: inputRef(),
+    placeholder: !isFloating ? null : placeholder
+  };
+}
+exports.useFloatingLabel = useFloatingLabel;

package/common/notice-utils/notice-cta/index.js

@@ -1 +1,5 @@
-"use strict";const a=require("react"),r=require("classnames"),o=({className:e,type:t,children:c,...s})=>a.createElement("p",{className:r(e,`${t}-notice__cta`),...s},c);module.exports=o;
+"use strict";
+const React = require("react");
+const classNames = require("classnames");
+const NoticeCTA = ({ className, type, children, ...rest }) => React.createElement("p", { className: classNames(className, `${type}-notice__cta`), ...rest }, children);
+module.exports = NoticeCTA;

package/common/random-id/index.js

@@ -1 +1,13 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=()=>Math.random().toString(16).slice(-4),n=()=>{const[o,d]=e.useState("");return e.useEffect(()=>{d(t())},[]),o};exports.randomId=t;exports.useRandomId=n;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const randomId = () => Math.random().toString(16).slice(-4);
+const useRandomId = () => {
+  const [id, setId] = React.useState("");
+  React.useEffect(() => {
+    setId(randomId());
+  }, []);
+  return id;
+};
+exports.randomId = randomId;
+exports.useRandomId = useRandomId;

package/common/tooltip-utils/constants/index.js

@@ -1 +1,97 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t="bottom",o={tooltip:"tooltip",tourtip:"region",infotip:""},a={left:{transform:"translateX(16px) translateY(-50%) scale3d(1,1,1)",left:"100%",right:"auto",top:"-6px",bottom:"auto"},"left-top":{transform:"translateX(16px) scale3d(1,1,1)",left:"100%",right:"auto",top:"-100%",bottom:"auto"},"left-bottom":{transform:"translateX(16px) scale3d(1,1,1)",left:"100%",right:"auto",top:"auto",bottom:"-10px"},right:{transform:"translateX(-16px) translateY(-50%) scale3d(1,1,1)",left:"auto",right:"100%",top:"-6px",bottom:"auto"},"right-top":{transform:"translateX(-16px) scale3d(1,1,1)",left:"auto",right:"100%",top:"-100%",bottom:"auto"},"right-bottom":{transform:"translateX(-16px) scale3d(1,1,1)",left:"auto",right:"100%",top:"auto",bottom:"-50%"},top:{transform:"translateX(-50%) scale3d(1,1,1)",left:"50%",right:"auto",top:"calc(100% + 2px)",bottom:"auto"},"top-left":{transform:"scale3d(1,1,1)",left:"-10px",right:"auto",top:"calc(100% + 2px)",bottom:"auto"},"top-right":{transform:"scale3d(1,1,1)",left:"auto",right:"-10px",top:"calc(100% + 2px)",bottom:"auto"},"bottom-right":{transform:"scale3d(1,1,1)",left:"auto",right:"-10px",top:"auto",bottom:"calc(100% + 12px)"},"bottom-left":{transform:"scale3d(1,1,1)",left:"-10px",right:"auto",top:"auto",bottom:"calc(100% + 12px)"},bottom:{transform:"translateX(-50%) scale3d(1,1,1)",left:"50%",right:"auto",top:"auto",bottom:"calc(100% + 12px)"}};exports.DEFAULT_POINTER_DIRECTION=t;exports.POINTER_STYLES=a;exports.TYPE_ROLES=o;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const DEFAULT_POINTER_DIRECTION = "bottom";
+const TYPE_ROLES = {
+  tooltip: "tooltip",
+  tourtip: "region",
+  infotip: ""
+};
+const POINTER_STYLES = {
+  left: {
+    transform: "translateX(16px) translateY(-50%) scale3d(1,1,1)",
+    left: "100%",
+    right: "auto",
+    top: "-6px",
+    bottom: "auto"
+  },
+  "left-top": {
+    transform: "translateX(16px) scale3d(1,1,1)",
+    left: "100%",
+    right: "auto",
+    top: "-100%",
+    bottom: "auto"
+  },
+  "left-bottom": {
+    transform: "translateX(16px) scale3d(1,1,1)",
+    left: "100%",
+    right: "auto",
+    top: "auto",
+    bottom: "-10px"
+  },
+  right: {
+    transform: "translateX(-16px) translateY(-50%) scale3d(1,1,1)",
+    left: "auto",
+    right: "100%",
+    top: "-6px",
+    bottom: "auto"
+  },
+  "right-top": {
+    transform: "translateX(-16px) scale3d(1,1,1)",
+    left: "auto",
+    right: "100%",
+    top: "-100%",
+    bottom: "auto"
+  },
+  "right-bottom": {
+    transform: "translateX(-16px) scale3d(1,1,1)",
+    left: "auto",
+    right: "100%",
+    top: "auto",
+    bottom: "-50%"
+  },
+  top: {
+    transform: "translateX(-50%) scale3d(1,1,1)",
+    left: "50%",
+    right: "auto",
+    top: "calc(100% + 2px)",
+    bottom: "auto"
+  },
+  "top-left": {
+    transform: "scale3d(1,1,1)",
+    left: "-10px",
+    right: "auto",
+    top: "calc(100% + 2px)",
+    bottom: "auto"
+  },
+  "top-right": {
+    transform: "scale3d(1,1,1)",
+    left: "auto",
+    right: "-10px",
+    top: "calc(100% + 2px)",
+    bottom: "auto"
+  },
+  "bottom-right": {
+    transform: "scale3d(1,1,1)",
+    left: "auto",
+    right: "-10px",
+    top: "auto",
+    bottom: "calc(100% + 12px)"
+  },
+  "bottom-left": {
+    transform: "scale3d(1,1,1)",
+    left: "-10px",
+    right: "auto",
+    top: "auto",
+    bottom: "calc(100% + 12px)"
+  },
+  bottom: {
+    transform: "translateX(-50%) scale3d(1,1,1)",
+    left: "50%",
+    right: "auto",
+    top: "auto",
+    bottom: "calc(100% + 12px)"
+  }
+};
+exports.DEFAULT_POINTER_DIRECTION = DEFAULT_POINTER_DIRECTION;
+exports.POINTER_STYLES = POINTER_STYLES;
+exports.TYPE_ROLES = TYPE_ROLES;

package/common/tooltip-utils/index.js

@@ -1 +1,11 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../use-tooltip-CL3_zAeg.js"),t=require("./constants/index.js");exports.Tooltip=o.Tooltip;exports.TooltipContent=o.TooltipContent;exports.TooltipFooter=o.TooltipFooter;exports.TooltipHost=o.TooltipHost;exports.useTooltip=o.useTooltip;exports.DEFAULT_POINTER_DIRECTION=t.DEFAULT_POINTER_DIRECTION;exports.POINTER_STYLES=t.POINTER_STYLES;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const useTooltip = require("../../use-tooltip-7JxcZHJn.js");
+const common_tooltipUtils_constants = require("./constants/index.js");
+exports.Tooltip = useTooltip.Tooltip;
+exports.TooltipContent = useTooltip.TooltipContent;
+exports.TooltipFooter = useTooltip.TooltipFooter;
+exports.TooltipHost = useTooltip.TooltipHost;
+exports.useTooltip = useTooltip.useTooltip;
+exports.DEFAULT_POINTER_DIRECTION = common_tooltipUtils_constants.DEFAULT_POINTER_DIRECTION;
+exports.POINTER_STYLES = common_tooltipUtils_constants.POINTER_STYLES;

package/debounce-v8bWAUnY.js

@@ -0,0 +1,9 @@
+"use strict";
+function debounce(fn, ms) {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => fn(...args), ms);
+  };
+}
+exports.debounce = debounce;

package/dialog-previous-button-EC_Y6KaT.js

@@ -0,0 +1,370 @@
+"use strict";
+const React = require("react");
+const reactRemoveScroll = require("react-remove-scroll");
+const classNames = require("classnames");
+const icon = require("./icon-B17Di3YL.js");
+const common_randomId = require("./common/random-id/index.js");
+const ebayDialogBase_components_animation = require("./ebay-dialog-base/components/animation/index.js");
+const ebayDialogBase_components_dialogHeader = require("./ebay-dialog-base/components/dialog-header/index.js");
+const ebayDialogBase_components_dialogFooter = require("./ebay-dialog-base/components/dialog-footer/index.js");
+const iconButton = require("./icon-button-BQWoMgX1.js");
+const EbayDialogCloseButton = ({ children }) => React.createElement(React.Fragment, null, children);
+const filterAncestor = (item) => item.nodeType === 1 && item.tagName.toLowerCase() !== "body" && item.tagName.toLowerCase() !== "html";
+const filterSibling = (item) => item.nodeType === 1 && item.tagName.toLowerCase() !== "script";
+const flattenArrays = (a, b) => a.concat(b);
+function getPreviousSiblings(el, siblings = []) {
+  const previousSibling = el.previousSibling;
+  if (!previousSibling) {
+    return siblings;
+  }
+  siblings.push(previousSibling);
+  return getPreviousSiblings(previousSibling, siblings);
+}
+function getNextSiblings(el, siblings = []) {
+  const nextSibling = el.nextSibling;
+  if (!nextSibling) {
+    return siblings;
+  }
+  siblings.push(nextSibling);
+  return getNextSiblings(nextSibling, siblings);
+}
+function getSiblings(el) {
+  const allSiblings = getPreviousSiblings(el).concat(getNextSiblings(el));
+  return allSiblings.filter(filterSibling);
+}
+function getAllAncestors(el, ancestors = []) {
+  const nextAncestor = el.parentNode;
+  if (!nextAncestor) {
+    return ancestors;
+  }
+  ancestors.push(nextAncestor);
+  return getAllAncestors(nextAncestor, ancestors);
+}
+function getAncestors(el) {
+  return getAllAncestors(el).filter(filterAncestor);
+}
+function getSiblingsOfAncestors(el) {
+  return getAncestors(el).map((item) => getSiblings(item)).reduce(flattenArrays, []);
+}
+let mainEl;
+let trappedEl$1;
+let dirtyObjects;
+const filterSvg = (item) => item.tagName.toLowerCase() !== "svg";
+function showElementPrep(el, useHiddenProperty) {
+  let preparedElement;
+  if (useHiddenProperty === false) {
+    preparedElement = prepareElement(el, "aria-hidden", "false");
+  } else {
+    preparedElement = prepareElement(el, "hidden", false);
+  }
+  return preparedElement;
+}
+function hideElementPrep(el, useHiddenProperty) {
+  let preparedElement;
+  if (useHiddenProperty === false) {
+    preparedElement = prepareElement(el, "aria-hidden", "true");
+  } else {
+    preparedElement = prepareElement(el, "hidden", true);
+  }
+  return preparedElement;
+}
+function prepareElement(el, attributeName, dirtyValue) {
+  const isProperty = typeof dirtyValue === "boolean";
+  return {
+    el,
+    attributeName,
+    cleanValue: isProperty ? el[attributeName] : el.getAttribute(attributeName),
+    dirtyValue,
+    isProperty
+  };
+}
+function dirtyElement(preparedObj) {
+  if (preparedObj.isProperty === true) {
+    preparedObj.el[preparedObj.attributeName] = preparedObj.dirtyValue;
+  } else {
+    preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.dirtyValue);
+  }
+}
+function cleanElement(preparedObj) {
+  if (preparedObj.cleanValue) {
+    if (preparedObj.isProperty === true) {
+      preparedObj.el[preparedObj.attributeName] = preparedObj.cleanValue;
+    } else {
+      preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.cleanValue);
+    }
+  } else {
+    preparedObj.el.removeAttribute(preparedObj.attributeName);
+  }
+}
+function untrap$1() {
+  if (trappedEl$1) {
+    dirtyObjects.forEach((item) => cleanElement(item));
+    dirtyObjects = [];
+    if (mainEl) {
+      mainEl.setAttribute("role", "main");
+    }
+    trappedEl$1.dispatchEvent(new CustomEvent("screenreaderUntrap", { bubbles: true }));
+    trappedEl$1 = null;
+  }
+}
+const defaultOptions = {
+  useHiddenProperty: false
+};
+function trap$1(el, selectedOptions) {
+  untrap$1();
+  const options = Object.assign({}, defaultOptions, selectedOptions);
+  trappedEl$1 = el;
+  mainEl = document.querySelector('main, [role="main"]');
+  if (mainEl) {
+    mainEl.setAttribute("role", "presentation");
+  }
+  const ancestors = getAncestors(trappedEl$1);
+  let siblings = getSiblings(trappedEl$1);
+  let siblingsOfAncestors = getSiblingsOfAncestors(trappedEl$1);
+  if (options.useHiddenProperty === true) {
+    siblings = siblings.filter(filterSvg);
+    siblingsOfAncestors = siblingsOfAncestors.filter(filterSvg);
+  }
+  dirtyObjects = [showElementPrep(trappedEl$1, options.useHiddenProperty)].concat(ancestors.map((item) => showElementPrep(item, options.useHiddenProperty))).concat(siblings.map((item) => hideElementPrep(item, options.useHiddenProperty))).concat(siblingsOfAncestors.map((item) => hideElementPrep(item, options.useHiddenProperty)));
+  dirtyObjects.forEach((item) => dirtyElement(item));
+  trappedEl$1.dispatchEvent(new CustomEvent("screenreaderTrap", { bubbles: true }));
+}
+const focusableElList = [
+  "a[href]",
+  "area[href]",
+  "button:not([disabled])",
+  "embed",
+  "iframe",
+  "input:not([disabled])",
+  "object",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "*[tabindex]",
+  "*[contenteditable]"
+];
+const focusableElSelector = focusableElList.join();
+function src_default(el, keyboardOnly = false, callback) {
+  return getFocusables(el, keyboardOnly);
+}
+function getFocusables(el, keyboardOnly = false) {
+  let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));
+  focusableEls = focusableEls.filter(function(focusableEl) {
+    return window.getComputedStyle(focusableEl).display !== "none";
+  });
+  if (keyboardOnly === true) {
+    focusableEls = focusableEls.filter(function(focusableEl) {
+      return focusableEl.getAttribute("tabindex") !== "-1";
+    });
+  }
+  return focusableEls;
+}
+let trappedEl;
+let topTrap;
+let outerTrapBefore;
+let innerTrapBefore;
+let innerTrapAfter;
+let outerTrapAfter;
+let botTrap;
+let firstFocusableElement;
+let lastFocusableElement;
+function createTrapBoundary() {
+  const trapBoundary = document.createElement("div");
+  trapBoundary.setAttribute("aria-hidden", "true");
+  trapBoundary.setAttribute("tabindex", "0");
+  trapBoundary.className = "keyboard-trap-boundary";
+  return trapBoundary;
+}
+function setFocusToFirstFocusableElement() {
+  firstFocusableElement.focus();
+}
+function setFocusToLastFocusableElement() {
+  lastFocusableElement.focus();
+}
+function createTraps() {
+  topTrap = createTrapBoundary();
+  outerTrapBefore = topTrap.cloneNode();
+  innerTrapBefore = topTrap.cloneNode();
+  innerTrapAfter = topTrap.cloneNode();
+  outerTrapAfter = topTrap.cloneNode();
+  botTrap = topTrap.cloneNode();
+  topTrap.addEventListener("focus", setFocusToFirstFocusableElement);
+  outerTrapBefore.addEventListener("focus", setFocusToFirstFocusableElement);
+  innerTrapBefore.addEventListener("focus", setFocusToLastFocusableElement);
+  innerTrapAfter.addEventListener("focus", setFocusToFirstFocusableElement);
+  outerTrapAfter.addEventListener("focus", setFocusToLastFocusableElement);
+  botTrap.addEventListener("focus", setFocusToLastFocusableElement);
+}
+function untrap() {
+  if (trappedEl) {
+    topTrap = safeDetach(topTrap);
+    outerTrapBefore = safeDetach(outerTrapBefore);
+    innerTrapBefore = safeDetach(innerTrapBefore);
+    innerTrapAfter = safeDetach(innerTrapAfter);
+    outerTrapAfter = safeDetach(outerTrapAfter);
+    botTrap = safeDetach(botTrap);
+    trappedEl.classList.remove("keyboard-trap--active");
+    trappedEl.dispatchEvent(new CustomEvent("keyboardUntrap", { bubbles: true }));
+    trappedEl = null;
+  }
+  return trappedEl;
+}
+function safeDetach(el) {
+  const parent = el.parentNode;
+  return parent ? parent.removeChild(el) : el;
+}
+function trap(el) {
+  if (!topTrap) {
+    createTraps();
+  } else {
+    untrap();
+  }
+  trappedEl = el;
+  const body = typeof document === "undefined" ? null : document.body;
+  const focusableElements = src_default(trappedEl, true);
+  firstFocusableElement = focusableElements[0];
+  lastFocusableElement = focusableElements[focusableElements.length - 1];
+  body.insertBefore(topTrap, body.childNodes[0]);
+  trappedEl.parentNode.insertBefore(outerTrapBefore, trappedEl);
+  trappedEl.insertBefore(innerTrapBefore, trappedEl.childNodes[0]);
+  trappedEl.appendChild(innerTrapAfter);
+  trappedEl.parentNode.insertBefore(outerTrapAfter, trappedEl.nextElementSibling);
+  body.appendChild(botTrap);
+  trappedEl.dispatchEvent(new CustomEvent("keyboardTrap", { bubbles: true }));
+  trappedEl.classList.add("keyboard-trap--active");
+  return trappedEl;
+}
+const DialogBase = ({ baseEl: Container = "div", classPrefix = "drawer-dialog", windowClass, windowType, mainId, top, header, buttonPosition = "right", children, ariaLabelledby, a11yCloseText, onCloseBtnClick = () => {
+}, footer, actions, onScroll, open = false, onOpen = () => {
+}, onBackgroundClick = () => {
+}, ignoreEscape, closeButton, previousButton, isModal, role = "dialog", focus, transitionElement, animated, closeButtonClass, ...props }) => {
+  var _a;
+  const dialogRef = React.useRef(null);
+  const drawerBaseEl = React.useRef(null);
+  const closeButtonRef = React.useRef(null);
+  const [rId, setRandomId] = React.useState("");
+  React.useEffect(() => {
+    setRandomId(common_randomId.randomId());
+  }, []);
+  React.useEffect(() => {
+    let timeout;
+    const handleBackgroundClick = (e) => {
+      if (drawerBaseEl.current && !drawerBaseEl.current.contains(e.target)) {
+        onBackgroundClick(e);
+      }
+    };
+    if (open && buttonPosition !== "hidden") {
+      timeout = window.setTimeout(() => {
+        document.addEventListener("click", handleBackgroundClick, false);
+      });
+    }
+    return () => {
+      clearTimeout(timeout);
+      document.removeEventListener("click", handleBackgroundClick, false);
+    };
+  }, [onBackgroundClick, open]);
+  React.useEffect(() => {
+    if (open && isModal) {
+      trap$1(drawerBaseEl.current);
+      trap(drawerBaseEl.current);
+    } else {
+      untrap$1();
+      untrap();
+    }
+    return () => {
+      untrap$1();
+      untrap();
+    };
+  }, [open, isModal]);
+  ebayDialogBase_components_animation.useDialogAnimation({
+    open,
+    classPrefix,
+    transitionElement,
+    dialogRef,
+    dialogWindowRef: drawerBaseEl,
+    enabled: animated,
+    onTransitionEnd: () => handleFocus(open)
+  });
+  const onKeyDown = (event) => {
+    if (!ignoreEscape && event.key === "Escape") {
+      event.stopPropagation();
+      onCloseBtnClick(event);
+    }
+  };
+  React.useEffect(() => {
+    if (!animated) {
+      handleFocus(open);
+    }
+    if (open) {
+      onOpen();
+    }
+  }, [open]);
+  function handleFocus(isOpen) {
+    var _a2, _b;
+    if (isOpen) {
+      if (focus) {
+        (_a2 = focus.current) == null ? void 0 : _a2.focus();
+      } else if (isModal) {
+        (_b = closeButtonRef.current) == null ? void 0 : _b.focus();
+      }
+      document.addEventListener("keydown", onKeyDown, false);
+      return () => document.removeEventListener("keydown", onKeyDown, false);
+    }
+  }
+  const closeButtonContent = buttonPosition !== "hidden" && React.createElement("button", { ref: closeButtonRef, className: classNames(`icon-btn`, closeButtonClass, `${classPrefix}__close`, {
+    "icon-btn--transparent": classPrefix === `toast-dialog`
+  }), type: "button", "aria-label": a11yCloseText, onClick: onCloseBtnClick }, closeButton || React.createElement(icon.EbayIcon, { name: "close16" }));
+  const windowClassName = windowType ? `${classPrefix}__${windowType}-window` : `${classPrefix}__window`;
+  const dialogTitleId = ((_a = header == null ? void 0 : header.props) == null ? void 0 : _a.id) || `dialog-title-${rId}`;
+  const dialogLabelledBy = ariaLabelledby || dialogTitleId;
+  const dialogHeader = header ? React.cloneElement(header, { ...header.props, id: dialogTitleId }) : null;
+  return React.createElement(
+    Container,
+    { ...props, "aria-labelledby": dialogLabelledBy, "aria-modal": "true", role, hidden: !open, className: classNames(classPrefix, props.className), "aria-live": !isModal ? "polite" : void 0, ref: dialogRef, onKeyDown },
+    React.createElement(
+      "div",
+      { className: classNames(windowClassName, windowClass), ref: drawerBaseEl },
+      top,
+      dialogHeader && React.createElement(
+        "div",
+        { className: `${classPrefix}__header` },
+        previousButton,
+        buttonPosition === "right" && dialogHeader,
+        buttonPosition !== "bottom" && closeButtonContent,
+        (buttonPosition === "left" || buttonPosition === "hidden") && dialogHeader
+      ),
+      React.createElement("div", { id: mainId, className: `${classPrefix}__main`, onScroll }, children),
+      actions ? React.createElement("div", { className: `${classPrefix}__actions` }, actions) : null,
+      footer || buttonPosition === "bottom" ? React.createElement(
+        "div",
+        { className: `${classPrefix}__footer` },
+        footer,
+        buttonPosition === "bottom" && closeButtonContent
+      ) : null
+    )
+  );
+};
+const DialogBaseWithState = ({ isModal, open, children, animated = true, ...rest }) => {
+  const shouldRenderModal = isModal !== false;
+  const childrenArray = React.Children.toArray(children);
+  const header = childrenArray.find((child) => child.type === ebayDialogBase_components_dialogHeader);
+  const footer = childrenArray.find((child) => child.type === ebayDialogBase_components_dialogFooter);
+  const actions = childrenArray.find((child) => child.type === EbayDialogActions);
+  const closeButton = childrenArray.find((child) => child.type === EbayDialogCloseButton);
+  const previousButton = childrenArray.find((child) => child.type === EbayDialogPreviousButton);
+  const content = childrenArray.filter((child) => ![
+    ebayDialogBase_components_dialogHeader,
+    ebayDialogBase_components_dialogFooter,
+    EbayDialogCloseButton,
+    EbayDialogActions,
+    EbayDialogPreviousButton
+  ].some((c) => c === child.type));
+  const dialogBase = React.createElement(DialogBase, { ...rest, open, isModal: shouldRenderModal, header, footer, actions, closeButton, previousButton, animated }, content);
+  const renderOverLay = () => shouldRenderModal ? React.createElement(reactRemoveScroll.RemoveScroll, { enabled: open }, dialogBase) : dialogBase;
+  return animated || open ? renderOverLay() : null;
+};
+const EbayDialogActions = ({ children }) => React.createElement(React.Fragment, null, children);
+const EbayDialogPreviousButton = ({ className, icon: icon2, ...rest }) => React.createElement(iconButton.EbayIconButton, { ...rest, icon: icon2 || "chevronLeft16", className: classNames(className, "lightbox-dialog__prev") });
+exports.DialogBaseWithState = DialogBaseWithState;
+exports.EbayDialogActions = EbayDialogActions;
+exports.EbayDialogCloseButton = EbayDialogCloseButton;
+exports.EbayDialogPreviousButton = EbayDialogPreviousButton;