@wix/design-system 1.143.0 → 1.144.0

package/dist/cjs/SidebarDividerNext/SidebarDividerNext.st.css.js

@@ -5,7 +5,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_143_0_SidebarDividerNext";
+var _namespace_ = "wds_1_144_0_SidebarDividerNext";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_143_0_SidebarDividerNext__root","fullWidth":"wds_1_143_0_SidebarDividerNext__fullWidth","divider":"wds_1_143_0_SidebarDividerNext__divider"};
+module.exports.classes = {"root":"wds_1_144_0_SidebarDividerNext__root","fullWidth":"wds_1_144_0_SidebarDividerNext__fullWidth","divider":"wds_1_144_0_SidebarDividerNext__divider"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/SidebarHeader/SidebarHeader.st.css.js

@@ -7,7 +7,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_143_0_SidebarHeader";
+var _namespace_ = "wds_1_144_0_SidebarHeader";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -15,7 +15,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_143_0_SidebarHeader__root","text-tiny-bold":"wds_1_143_0_StylableTypography__text-tiny-bold","title":"wds_1_143_0_SidebarHeader__title","subtitle":"wds_1_143_0_SidebarHeader__subtitle"};
+module.exports.classes = {"root":"wds_1_144_0_SidebarHeader__root","text-tiny-bold":"wds_1_144_0_StylableTypography__text-tiny-bold","title":"wds_1_144_0_SidebarHeader__title","subtitle":"wds_1_144_0_SidebarHeader__subtitle"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/SidebarHeaderNext/SidebarHeaderNext.st.css.js

@@ -5,7 +5,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_143_0_SidebarHeaderNext";
+var _namespace_ = "wds_1_144_0_SidebarHeaderNext";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_143_0_SidebarHeaderNext__root","title":"wds_1_143_0_SidebarHeaderNext__title"};
+module.exports.classes = {"root":"wds_1_144_0_SidebarHeaderNext__root","title":"wds_1_144_0_SidebarHeaderNext__title"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/SidebarItemNext/SidebarItemNext.st.css.js

@@ -7,7 +7,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_143_0_SidebarItemNext";
+var _namespace_ = "wds_1_144_0_SidebarItemNext";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -15,7 +15,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_143_0_SidebarItemNext__root","text-small-normal":"wds_1_143_0_StylableTypography__text-small-normal","text":"wds_1_143_0_SidebarItemNext__text","prefix":"wds_1_143_0_SidebarItemNext__prefix","divider":"wds_1_143_0_SidebarItemNext__divider","suffix":"wds_1_143_0_SidebarItemNext__suffix","listItem":"wds_1_143_0_SidebarItemNext__listItem","textWrapper":"wds_1_143_0_SidebarItemNext__textWrapper","suffixContainer":"wds_1_143_0_SidebarItemNext__suffixContainer","tooltipWrapper":"wds_1_143_0_SidebarItemNext__tooltipWrapper","tooltip":"wds_1_143_0_SidebarItemNext__tooltip"};
+module.exports.classes = {"root":"wds_1_144_0_SidebarItemNext__root","text-small-normal":"wds_1_144_0_StylableTypography__text-small-normal","text":"wds_1_144_0_SidebarItemNext__text","prefix":"wds_1_144_0_SidebarItemNext__prefix","divider":"wds_1_144_0_SidebarItemNext__divider","suffix":"wds_1_144_0_SidebarItemNext__suffix","listItem":"wds_1_144_0_SidebarItemNext__listItem","textWrapper":"wds_1_144_0_SidebarItemNext__textWrapper","suffixContainer":"wds_1_144_0_SidebarItemNext__suffixContainer","tooltipWrapper":"wds_1_144_0_SidebarItemNext__tooltipWrapper","tooltip":"wds_1_144_0_SidebarItemNext__tooltip"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/SidebarNext/SidebarNext.st.css.js

@@ -5,7 +5,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_143_0_SidebarNext";
+var _namespace_ = "wds_1_144_0_SidebarNext";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_143_0_SidebarNext__root","section":"wds_1_143_0_SidebarNext__section","content":"wds_1_143_0_SidebarNext__content","scrollArea":"wds_1_143_0_SidebarNext__scrollArea","listItems":"wds_1_143_0_SidebarNext__listItems"};
+module.exports.classes = {"root":"wds_1_144_0_SidebarNext__root","section":"wds_1_144_0_SidebarNext__section","content":"wds_1_144_0_SidebarNext__content","scrollArea":"wds_1_144_0_SidebarNext__scrollArea","listItems":"wds_1_144_0_SidebarNext__listItems"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/SidebarNext/components/SidebarSkeleton.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_143_0_SidebarSkeleton";
+var _namespace_ = "wds_1_144_0_SidebarSkeleton";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -12,8 +12,8 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_143_0_SidebarSkeleton__root","lightSkeleton":"wds_1_143_0_SidebarSkeleton__lightSkeleton","skeletonItem":"wds_1_143_0_SidebarSkeleton__skeletonItem","separator":"wds_1_143_0_SidebarSkeleton__separator","container":"wds_1_143_0_SidebarSkeleton__container"};
-module.exports.keyframes = {"moveRight":"wds_1_143_0_SidebarSkeleton__moveRight"}; 
+module.exports.classes = {"root":"wds_1_144_0_SidebarSkeleton__root","lightSkeleton":"wds_1_144_0_SidebarSkeleton__lightSkeleton","skeletonItem":"wds_1_144_0_SidebarSkeleton__skeletonItem","separator":"wds_1_144_0_SidebarSkeleton__separator","container":"wds_1_144_0_SidebarSkeleton__container"};
+module.exports.keyframes = {"moveRight":"wds_1_144_0_SidebarSkeleton__moveRight"}; 
 module.exports.layers = {};
 module.exports.containers = {};
 module.exports.stVars = {}; 

package/dist/cjs/SidebarNext/components/ToggleButton.st.css.js

@@ -7,7 +7,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_143_0_sidebarnext-toggle-button";
+var _namespace_ = "wds_1_144_0_sidebarnext-toggle-button";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -15,7 +15,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_143_0_sidebarnext-toggle-button__root","iconButton":"wds_1_143_0_sidebarnext-toggle-button__iconButton"};
+module.exports.classes = {"root":"wds_1_144_0_sidebarnext-toggle-button__root","iconButton":"wds_1_144_0_sidebarnext-toggle-button__iconButton"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/SidebarSectionItem/SidebarSectionItem.st.css.js

@@ -8,7 +8,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_143_0_SidebarSectionItem";
+var _namespace_ = "wds_1_144_0_SidebarSectionItem";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -16,7 +16,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_143_0_SidebarSectionItem__root","text":"wds_1_143_0_SidebarSectionItem__text","chevron":"wds_1_143_0_SidebarSectionItem__chevron","prefix":"wds_1_143_0_SidebarSectionItem__prefix","textWrapper":"wds_1_143_0_SidebarSectionItem__textWrapper","suffix":"wds_1_143_0_SidebarSectionItem__suffix"};
+module.exports.classes = {"root":"wds_1_144_0_SidebarSectionItem__root","text":"wds_1_144_0_SidebarSectionItem__text","chevron":"wds_1_144_0_SidebarSectionItem__chevron","prefix":"wds_1_144_0_SidebarSectionItem__prefix","textWrapper":"wds_1_144_0_SidebarSectionItem__textWrapper","suffix":"wds_1_144_0_SidebarSectionItem__suffix"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/SidebarSectionTitle/SidebarSectionTitle.st.css.js

@@ -7,7 +7,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_143_0_SidebarSectionTitle";
+var _namespace_ = "wds_1_144_0_SidebarSectionTitle";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -15,7 +15,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_143_0_SidebarSectionTitle__root"};
+module.exports.classes = {"root":"wds_1_144_0_SidebarSectionTitle__root"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/SidebarSubMenuNext/SidebarSubMenuNext.st.css.js

@@ -6,7 +6,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_143_0_SidebarSubMenuNext";
+var _namespace_ = "wds_1_144_0_SidebarSubMenuNext";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -14,8 +14,8 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_143_0_SidebarSubMenuNext__root","subMenu":"wds_1_143_0_SidebarSubMenuNext__subMenu","subMenuItems":"wds_1_143_0_SidebarSubMenuNext__subMenuItems","chevronRight":"wds_1_143_0_SidebarSubMenuNext__chevronRight","navigationPopoverRoot":"wds_1_143_0_SidebarSubMenuNext__navigationPopoverRoot","navigationPopover":"wds_1_143_0_SidebarSubMenuNext__navigationPopover"};
-module.exports.keyframes = {"rotateChevronUp":"wds_1_143_0_SidebarSubMenuNext__rotateChevronUp","rotateChevronBack":"wds_1_143_0_SidebarSubMenuNext__rotateChevronBack","openItems":"wds_1_143_0_SidebarSubMenuNext__openItems","closeItems":"wds_1_143_0_SidebarSubMenuNext__closeItems"}; 
+module.exports.classes = {"root":"wds_1_144_0_SidebarSubMenuNext__root","subMenu":"wds_1_144_0_SidebarSubMenuNext__subMenu","subMenuItems":"wds_1_144_0_SidebarSubMenuNext__subMenuItems","chevronRight":"wds_1_144_0_SidebarSubMenuNext__chevronRight","navigationPopoverRoot":"wds_1_144_0_SidebarSubMenuNext__navigationPopoverRoot","navigationPopover":"wds_1_144_0_SidebarSubMenuNext__navigationPopover"};
+module.exports.keyframes = {"rotateChevronUp":"wds_1_144_0_SidebarSubMenuNext__rotateChevronUp","rotateChevronBack":"wds_1_144_0_SidebarSubMenuNext__rotateChevronBack","openItems":"wds_1_144_0_SidebarSubMenuNext__openItems","closeItems":"wds_1_144_0_SidebarSubMenuNext__closeItems"}; 
 module.exports.layers = {};
 module.exports.containers = {};
 module.exports.stVars = {}; 

package/dist/cjs/SidebarSubMenuNext/components/ContextMenuPopover.js

@@ -7,7 +7,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _Popover = _interopRequireDefault(require("../../Popover"));
 var _SidebarNextContext = require("../../SidebarNext/SidebarNextContext");
 var _SidebarSubMenuNextSt = require("../SidebarSubMenuNext.st.css.js");
-var _constants = require("../../common/ZIndex/constants");
+var _ZIndex = require("../../common/ZIndex");
 var _jsxFileName = "/home/builduser/work/b60d7defec63c7cc/packages/wix-design-system/dist/cjs/SidebarSubMenuNext/components/ContextMenuPopover.tsx";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -45,7 +45,7 @@ var ContextMenuPopover = exports.ContextMenuPopover = /*#__PURE__*/(0, _react.fo
     fixed: true,
     appendTo: "window",
     placement: "right",
-    zIndex: _constants.ZIndex.contextMenuPopover,
+    zIndex: _ZIndex.ZIndex.contextMenuPopover,
     flip: false,
     theme: skin === 'neutral' ? 'light' : skin,
     moveBy: popoverOffset,

package/dist/cjs/SidebarSubMenuNext/components/ContextMenuPopover.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_Popover","_interopRequireDefault","_SidebarNextContext","_SidebarSubMenuNextSt","_constants","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ContextMenuPopover","exports","forwardRef","_ref","ref","element","content","disabled","dataHook","onShow","onHide","skin","scrollAreaRef","useContext","SidebarNextContext","popoverContentRef","useRef","shouldShow","setShouldShow","useState","visible","showPopover","useCallback","hidePopover","useImperativeHandle","hide","popoverOffset","usePopoverOffset","createElement","className","classes","navigationPopoverRoot","shown","showArrow","fixed","appendTo","placement","zIndex","ZIndex","contextMenuPopover","flip","theme","moveBy","animate","hideDelay","showDelay","onMouseEnter","onMouseLeave","__self","__source","fileName","lineNumber","columnNumber","Element","Content","navigationPopover","popoverVisible","setMoveBy","y","useEffect","scrollArea","current","handleScroll","addEventListener","window","removeEventListener","timeout","setTimeout","calculateOffsetY","clearTimeout","popoverContentElement","rect","getBoundingClientRect","margin","popoverPaddings","screenHeight","innerHeight","top","height"],"sources":["../../../../src/SidebarSubMenuNext/components/ContextMenuPopover.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\n\nimport Popover from '../../Popover';\nimport { SidebarNextContext } from '../../SidebarNext/SidebarNextContext';\nimport { classes } from '../SidebarSubMenuNext.st.css';\nimport { ZIndex } from '../../common/ZIndex/constants';\n\nexport type QuickNavPopoverProps = {\n  element: React.ReactNode;\n  content: React.ReactNode;\n  disabled?: boolean;\n  dataHook?: string;\n  onShow?: () => void;\n  onHide?: () => void;\n};\n\nexport type QuickNavPopoverHandle = {\n  hide: () => void;\n};\n\nexport const ContextMenuPopover = forwardRef<\n  QuickNavPopoverHandle,\n  QuickNavPopoverProps\n>(({ element, content, disabled, dataHook, onShow, onHide }, ref) => {\n  const { skin, scrollAreaRef } = useContext(SidebarNextContext);\n  const popoverContentRef = useRef(null);\n  const [shouldShow, setShouldShow] = useState(false);\n  const visible = !disabled && shouldShow;\n\n  const showPopover = useCallback(() => {\n    setShouldShow(true);\n  }, []);\n\n  const hidePopover = useCallback(() => {\n    setShouldShow(false);\n  }, []);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      hide: hidePopover,\n    }),\n    [hidePopover],\n  );\n\n  const popoverOffset = usePopoverOffset(\n    visible,\n    scrollAreaRef,\n    popoverContentRef,\n  );\n\n  return (\n    <Popover\n      dataHook={dataHook}\n      className={classes.navigationPopoverRoot}\n      shown={visible}\n      showArrow\n      fixed\n      appendTo=\"window\"\n      placement=\"right\"\n      zIndex={ZIndex.contextMenuPopover}\n      flip={false}\n      theme={skin === 'neutral' ? 'light' : skin}\n      moveBy={popoverOffset}\n      animate={visible}\n      hideDelay={50}\n      showDelay={200}\n      onMouseEnter={showPopover}\n      onMouseLeave={hidePopover}\n      onShow={onShow}\n      onHide={onHide}\n    >\n      <Popover.Element>{element}</Popover.Element>\n      <Popover.Content>\n        <ul\n          ref={popoverContentRef}\n          className={classes.navigationPopover}\n          aria-hidden // quick nav is not accessible by design\n        >\n          {content}\n        </ul>\n      </Popover.Content>\n    </Popover>\n  );\n});\n\nconst usePopoverOffset = (\n  popoverVisible: boolean,\n  scrollAreaRef: React.RefObject<HTMLElement>,\n  popoverContentRef: React.RefObject<HTMLElement>,\n) => {\n  // FIXME: doesn't work in the original implementation (and here too)\n  const [moveBy, setMoveBy] = useState({ y: 0 });\n\n  useEffect(() => {\n    const scrollArea = scrollAreaRef?.current;\n\n    if (!scrollArea) {\n      return;\n    }\n\n    const handleScroll = () => {\n      if (!popoverVisible) {\n        setMoveBy({ y: 0 });\n      }\n    };\n\n    scrollArea && scrollArea.addEventListener('scroll', handleScroll);\n    window.addEventListener('scroll', handleScroll);\n\n    return () => {\n      scrollArea && scrollArea.removeEventListener('scroll', handleScroll);\n      window.removeEventListener('scroll', handleScroll);\n    };\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [scrollAreaRef]);\n\n  useEffect(() => {\n    if (!popoverVisible) {\n      return;\n    }\n\n    const timeout = setTimeout(() => {\n      const y = moveBy.y || calculateOffsetY(popoverContentRef.current);\n      setMoveBy({ y });\n    }, 200);\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [popoverVisible, moveBy.y, popoverContentRef]);\n\n  return moveBy;\n};\n\nconst calculateOffsetY = (popoverContentElement?: HTMLElement | null) => {\n  // FIXME: mostly copy-pasta of original implementation\n  const rect = popoverContentElement?.getBoundingClientRect();\n\n  if (!rect) {\n    return 0;\n  }\n\n  const margin = 12;\n  const popoverPaddings = 2 * 12;\n  const screenHeight = window.innerHeight;\n  const { top } = rect;\n  const height = rect.height + popoverPaddings;\n\n  if (top <= margin) {\n    return -(top - popoverPaddings - margin);\n  }\n\n  if (top + height > screenHeight) {\n    return screenHeight - top - height - margin;\n  }\n\n  return 0;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_Popover","_interopRequireDefault","_SidebarNextContext","_SidebarSubMenuNextSt","_ZIndex","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ContextMenuPopover","exports","forwardRef","_ref","ref","element","content","disabled","dataHook","onShow","onHide","skin","scrollAreaRef","useContext","SidebarNextContext","popoverContentRef","useRef","shouldShow","setShouldShow","useState","visible","showPopover","useCallback","hidePopover","useImperativeHandle","hide","popoverOffset","usePopoverOffset","createElement","className","classes","navigationPopoverRoot","shown","showArrow","fixed","appendTo","placement","zIndex","ZIndex","contextMenuPopover","flip","theme","moveBy","animate","hideDelay","showDelay","onMouseEnter","onMouseLeave","__self","__source","fileName","lineNumber","columnNumber","Element","Content","navigationPopover","popoverVisible","setMoveBy","y","useEffect","scrollArea","current","handleScroll","addEventListener","window","removeEventListener","timeout","setTimeout","calculateOffsetY","clearTimeout","popoverContentElement","rect","getBoundingClientRect","margin","popoverPaddings","screenHeight","innerHeight","top","height"],"sources":["../../../../src/SidebarSubMenuNext/components/ContextMenuPopover.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\n\nimport Popover from '../../Popover';\nimport { SidebarNextContext } from '../../SidebarNext/SidebarNextContext';\nimport { classes } from '../SidebarSubMenuNext.st.css';\nimport { ZIndex } from '../../common/ZIndex';\n\nexport type QuickNavPopoverProps = {\n  element: React.ReactNode;\n  content: React.ReactNode;\n  disabled?: boolean;\n  dataHook?: string;\n  onShow?: () => void;\n  onHide?: () => void;\n};\n\nexport type QuickNavPopoverHandle = {\n  hide: () => void;\n};\n\nexport const ContextMenuPopover = forwardRef<\n  QuickNavPopoverHandle,\n  QuickNavPopoverProps\n>(({ element, content, disabled, dataHook, onShow, onHide }, ref) => {\n  const { skin, scrollAreaRef } = useContext(SidebarNextContext);\n  const popoverContentRef = useRef(null);\n  const [shouldShow, setShouldShow] = useState(false);\n  const visible = !disabled && shouldShow;\n\n  const showPopover = useCallback(() => {\n    setShouldShow(true);\n  }, []);\n\n  const hidePopover = useCallback(() => {\n    setShouldShow(false);\n  }, []);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      hide: hidePopover,\n    }),\n    [hidePopover],\n  );\n\n  const popoverOffset = usePopoverOffset(\n    visible,\n    scrollAreaRef,\n    popoverContentRef,\n  );\n\n  return (\n    <Popover\n      dataHook={dataHook}\n      className={classes.navigationPopoverRoot}\n      shown={visible}\n      showArrow\n      fixed\n      appendTo=\"window\"\n      placement=\"right\"\n      zIndex={ZIndex.contextMenuPopover}\n      flip={false}\n      theme={skin === 'neutral' ? 'light' : skin}\n      moveBy={popoverOffset}\n      animate={visible}\n      hideDelay={50}\n      showDelay={200}\n      onMouseEnter={showPopover}\n      onMouseLeave={hidePopover}\n      onShow={onShow}\n      onHide={onHide}\n    >\n      <Popover.Element>{element}</Popover.Element>\n      <Popover.Content>\n        <ul\n          ref={popoverContentRef}\n          className={classes.navigationPopover}\n          aria-hidden // quick nav is not accessible by design\n        >\n          {content}\n        </ul>\n      </Popover.Content>\n    </Popover>\n  );\n});\n\nconst usePopoverOffset = (\n  popoverVisible: boolean,\n  scrollAreaRef: React.RefObject<HTMLElement>,\n  popoverContentRef: React.RefObject<HTMLElement>,\n) => {\n  // FIXME: doesn't work in the original implementation (and here too)\n  const [moveBy, setMoveBy] = useState({ y: 0 });\n\n  useEffect(() => {\n    const scrollArea = scrollAreaRef?.current;\n\n    if (!scrollArea) {\n      return;\n    }\n\n    const handleScroll = () => {\n      if (!popoverVisible) {\n        setMoveBy({ y: 0 });\n      }\n    };\n\n    scrollArea && scrollArea.addEventListener('scroll', handleScroll);\n    window.addEventListener('scroll', handleScroll);\n\n    return () => {\n      scrollArea && scrollArea.removeEventListener('scroll', handleScroll);\n      window.removeEventListener('scroll', handleScroll);\n    };\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [scrollAreaRef]);\n\n  useEffect(() => {\n    if (!popoverVisible) {\n      return;\n    }\n\n    const timeout = setTimeout(() => {\n      const y = moveBy.y || calculateOffsetY(popoverContentRef.current);\n      setMoveBy({ y });\n    }, 200);\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [popoverVisible, moveBy.y, popoverContentRef]);\n\n  return moveBy;\n};\n\nconst calculateOffsetY = (popoverContentElement?: HTMLElement | null) => {\n  // FIXME: mostly copy-pasta of original implementation\n  const rect = popoverContentElement?.getBoundingClientRect();\n\n  if (!rect) {\n    return 0;\n  }\n\n  const margin = 12;\n  const popoverPaddings = 2 * 12;\n  const screenHeight = window.innerHeight;\n  const { top } = rect;\n  const height = rect.height + popoverPaddings;\n\n  if (top <= margin) {\n    return -(top - popoverPaddings - margin);\n  }\n\n  if (top + height > screenHeight) {\n    return screenHeight - top - height - margin;\n  }\n\n  return 0;\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/SidebarTitleItemNext/SidebarTitleItemNext.st.css.js

@@ -5,7 +5,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_143_0_SidebarTitleItemNext";
+var _namespace_ = "wds_1_144_0_SidebarTitleItemNext";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_143_0_SidebarTitleItemNext__root"};
+module.exports.classes = {"root":"wds_1_144_0_SidebarTitleItemNext__root"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/Skeleton/Skeleton.st.css.js

@@ -5,7 +5,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_143_0_Skeleton";
+var _namespace_ = "wds_1_144_0_Skeleton";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_143_0_Skeleton__root","line":"wds_1_143_0_Skeleton__line","chunk":"wds_1_143_0_Skeleton__chunk"};
-module.exports.keyframes = {"moveRight":"wds_1_143_0_Skeleton__moveRight"}; 
+module.exports.classes = {"root":"wds_1_144_0_Skeleton__root","line":"wds_1_144_0_Skeleton__line","chunk":"wds_1_144_0_Skeleton__chunk"};
+module.exports.keyframes = {"moveRight":"wds_1_144_0_Skeleton__moveRight"}; 
 module.exports.layers = {};
 module.exports.containers = {};
 module.exports.stVars = {}; 

package/dist/cjs/SkeletonCircle/SkeletonCircle.js

@@ -7,9 +7,9 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _SkeletonCircleSt = require("./SkeletonCircle.st.css.js");
 var _constants = require("./constants");
-var _constants2 = require("../SkeletonGroup/constants");
+var _SkeletonGroup = require("../SkeletonGroup/SkeletonGroup.constants");
 var _Box = _interopRequireDefault(require("../Box"));
-var _SkeletonGroup = require("../SkeletonGroup");
+var _SkeletonGroup2 = require("../SkeletonGroup");
 var _jsxFileName = "/home/builduser/work/b60d7defec63c7cc/packages/wix-design-system/dist/cjs/SkeletonCircle/SkeletonCircle.js";
 /** SkeletonCircle */
 class SkeletonCircle extends _react.default.PureComponent {
@@ -24,7 +24,7 @@ class SkeletonCircle extends _react.default.PureComponent {
       marginTop,
       marginBottom
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement(_SkeletonGroup.SkeletonGroupContext.Consumer, {
+    return /*#__PURE__*/_react.default.createElement(_SkeletonGroup2.SkeletonGroupContext.Consumer, {
       __self: this,
       __source: {
         fileName: _jsxFileName,
@@ -32,7 +32,7 @@ class SkeletonCircle extends _react.default.PureComponent {
         columnNumber: 7
       }
     }, context => {
-      var skin = context && context.skin || _constants2.DEFAULT_SKIN;
+      var skin = context && context.skin || _SkeletonGroup.DEFAULT_SKIN;
       return /*#__PURE__*/_react.default.createElement("div", {
         "data-hook": dataHook,
         className: className,
@@ -52,7 +52,7 @@ class SkeletonCircle extends _react.default.PureComponent {
         marginRight: marginRight,
         marginTop: marginTop,
         marginBottom: marginBottom,
-        backgroundColor: _constants2.SKIN_COLOR[skin],
+        backgroundColor: _SkeletonGroup.SKIN_COLOR[skin],
         className: (0, _SkeletonCircleSt.st)(_SkeletonCircleSt.classes.root, {
           skin
         }),

package/dist/cjs/SkeletonCircle/SkeletonCircle.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_propTypes","_SkeletonCircleSt","_constants","_constants2","_Box","_SkeletonGroup","_jsxFileName","SkeletonCircle","React","PureComponent","render","dataHook","className","diameter","margin","marginLeft","marginRight","marginTop","marginBottom","props","default","createElement","SkeletonGroupContext","Consumer","__self","__source","fileName","lineNumber","columnNumber","context","skin","DEFAULT_SKIN","width","height","backgroundColor","SKIN_COLOR","st","classes","root","displayName","propTypes","PropTypes","string","oneOfType","number","defaultProps","DEFAULT_DIAMETER","_default","exports"],"sources":["../../../src/SkeletonCircle/SkeletonCircle.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { st, classes } from './SkeletonCircle.st.css';\nimport { DEFAULT_DIAMETER } from './constants';\nimport { DEFAULT_SKIN, SKIN_COLOR } from '../SkeletonGroup/constants';\nimport Box from '../Box';\nimport { SkeletonGroupContext } from '../SkeletonGroup';\n\n/** SkeletonCircle */\nclass SkeletonCircle extends React.PureComponent {\n  render() {\n    const {\n      dataHook,\n      className,\n      diameter,\n      margin,\n      marginLeft,\n      marginRight,\n      marginTop,\n      marginBottom,\n    } = this.props;\n\n    return (\n      <SkeletonGroupContext.Consumer>\n        {context => {\n          const skin = (context && context.skin) || DEFAULT_SKIN;\n          return (\n            <div\n              data-hook={dataHook}\n              className={className}\n              data-diameter={diameter}\n              data-skin={skin}\n            >\n              <Box\n                width={diameter}\n                height={diameter}\n                margin={margin}\n                marginLeft={marginLeft}\n                marginRight={marginRight}\n                marginTop={marginTop}\n                marginBottom={marginBottom}\n                backgroundColor={SKIN_COLOR[skin]}\n                className={st(classes.root, { skin })}\n              />\n            </div>\n          );\n        }}\n      </SkeletonGroupContext.Consumer>\n    );\n  }\n}\n\nSkeletonCircle.displayName = 'SkeletonCircle';\n\nSkeletonCircle.propTypes = {\n  /** Applied as data-hook HTML attribute that can be used in the tests */\n  dataHook: PropTypes.string,\n\n  /** Specifies a CSS class name to be appended to the component’s root element.\n   * @internal\n   */\n\n  className: PropTypes.string,\n\n  /** Sets the diameter of the box (pixels) */\n  diameter: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n  /** Sets margin on all sides.\n   * Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)\n   * a spacing token (SP1, SP2, etc.) or a string of space-separated values (\"3px 3px\") */\n  margin: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n  /** Sets margin on the top.\n   * Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)\n   * a spacing token (SP1, SP2, etc.) or a string of space-separated values (\"3px 3px\") */\n  marginTop: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n  /** Sets margin on the right.\n   * Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)\n   * a spacing token (SP1, SP2, etc.) or a string of space-separated values (\"3px 3px\") */\n  marginRight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n  /** Sets margin on the bottom.\n   * Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)\n   * a spacing token (SP1, SP2, etc.) or a string of space-separated values (\"3px 3px\") */\n  marginBottom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n  /** Sets margin on the left.\n   * Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)\n   * a spacing token (SP1, SP2, etc.) or a string of space-separated values (\"3px 3px\") */\n  marginLeft: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n};\n\nSkeletonCircle.defaultProps = { diameter: DEFAULT_DIAMETER };\n\nexport default SkeletonCircle;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_propTypes","_SkeletonCircleSt","_constants","_SkeletonGroup","_Box","_SkeletonGroup2","_jsxFileName","SkeletonCircle","React","PureComponent","render","dataHook","className","diameter","margin","marginLeft","marginRight","marginTop","marginBottom","props","default","createElement","SkeletonGroupContext","Consumer","__self","__source","fileName","lineNumber","columnNumber","context","skin","DEFAULT_SKIN","width","height","backgroundColor","SKIN_COLOR","st","classes","root","displayName","propTypes","PropTypes","string","oneOfType","number","defaultProps","DEFAULT_DIAMETER","_default","exports"],"sources":["../../../src/SkeletonCircle/SkeletonCircle.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { st, classes } from './SkeletonCircle.st.css';\nimport { DEFAULT_DIAMETER } from './constants';\nimport { DEFAULT_SKIN, SKIN_COLOR } from '../SkeletonGroup/SkeletonGroup.constants';\nimport Box from '../Box';\nimport { SkeletonGroupContext } from '../SkeletonGroup';\n\n/** SkeletonCircle */\nclass SkeletonCircle extends React.PureComponent {\n  render() {\n    const {\n      dataHook,\n      className,\n      diameter,\n      margin,\n      marginLeft,\n      marginRight,\n      marginTop,\n      marginBottom,\n    } = this.props;\n\n    return (\n      <SkeletonGroupContext.Consumer>\n        {context => {\n          const skin = (context && context.skin) || DEFAULT_SKIN;\n          return (\n            <div\n              data-hook={dataHook}\n              className={className}\n              data-diameter={diameter}\n              data-skin={skin}\n            >\n              <Box\n                width={diameter}\n                height={diameter}\n                margin={margin}\n                marginLeft={marginLeft}\n                marginRight={marginRight}\n                marginTop={marginTop}\n                marginBottom={marginBottom}\n                backgroundColor={SKIN_COLOR[skin]}\n                className={st(classes.root, { skin })}\n              />\n            </div>\n          );\n        }}\n      </SkeletonGroupContext.Consumer>\n    );\n  }\n}\n\nSkeletonCircle.displayName = 'SkeletonCircle';\n\nSkeletonCircle.propTypes = {\n  /** Applied as data-hook HTML attribute that can be used in the tests */\n  dataHook: PropTypes.string,\n\n  /** Specifies a CSS class name to be appended to the component’s root element.\n   * @internal\n   */\n\n  className: PropTypes.string,\n\n  /** Sets the diameter of the box (pixels) */\n  diameter: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n  /** Sets margin on all sides.\n   * Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)\n   * a spacing token (SP1, SP2, etc.) or a string of space-separated values (\"3px 3px\") */\n  margin: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n  /** Sets margin on the top.\n   * Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)\n   * a spacing token (SP1, SP2, etc.) or a string of space-separated values (\"3px 3px\") */\n  marginTop: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n  /** Sets margin on the right.\n   * Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)\n   * a spacing token (SP1, SP2, etc.) or a string of space-separated values (\"3px 3px\") */\n  marginRight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n  /** Sets margin on the bottom.\n   * Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)\n   * a spacing token (SP1, SP2, etc.) or a string of space-separated values (\"3px 3px\") */\n  marginBottom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n  /** Sets margin on the left.\n   * Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)\n   * a spacing token (SP1, SP2, etc.) or a string of space-separated values (\"3px 3px\") */\n  marginLeft: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n};\n\nSkeletonCircle.defaultProps = { diameter: DEFAULT_DIAMETER };\n\nexport default SkeletonCircle;\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/SkeletonCircle/SkeletonCircle.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_143_0_SkeletonCircle";
+var _namespace_ = "wds_1_144_0_SkeletonCircle";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_143_0_SkeletonCircle__root"};
+module.exports.classes = {"root":"wds_1_144_0_SkeletonCircle__root"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/SkeletonGroup/{constants.js → SkeletonGroup.constants.js}

@@ -7,4 +7,4 @@ var SKIN_COLOR = exports.SKIN_COLOR = {
   light: 'D40-20',
   dark: 'D80-20'
 };
-//# sourceMappingURL=constants.js.map
+//# sourceMappingURL=SkeletonGroup.constants.js.map

package/dist/cjs/SkeletonGroup/SkeletonGroup.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DEFAULT_SKIN","exports","SKIN_COLOR","light","dark"],"sources":["../../../src/SkeletonGroup/SkeletonGroup.constants.ts"],"sourcesContent":["export const DEFAULT_SKIN = 'light';\n\nexport const SKIN_COLOR = {\n  light: 'D40-20',\n  dark: 'D80-20',\n} as const;\n"],"mappings":";;;;AAAO,IAAMA,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,OAAO;AAE5B,IAAME,UAAU,GAAAD,OAAA,CAAAC,UAAA,GAAG;EACxBC,KAAK,EAAE,QAAQ;EACfC,IAAI,EAAE;AACR,CAAU","ignoreList":[]}

package/dist/cjs/SkeletonGroup/SkeletonGroup.js

@@ -7,67 +7,55 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _SkeletonGroupSt = require("./SkeletonGroup.st.css.js");
 var _SkeletonGroupAPI = require("./SkeletonGroupAPI");
-var _jsxFileName = "/home/builduser/work/b60d7defec63c7cc/packages/wix-design-system/dist/cjs/SkeletonGroup/SkeletonGroup.js";
+var _jsxFileName = "/home/builduser/work/b60d7defec63c7cc/packages/wix-design-system/dist/cjs/SkeletonGroup/SkeletonGroup.tsx";
 /** SkeletonGroup */
-class SkeletonGroup extends _react.default.PureComponent {
-  render() {
-    var {
-      dataHook,
-      className,
-      skin,
-      children,
-      backgroundColor
-    } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      "data-hook": dataHook,
-      className: (0, _SkeletonGroupSt.st)(_SkeletonGroupSt.classes.root, className),
-      style: {
-        [_SkeletonGroupSt.vars['color']]: backgroundColor
-      },
-      "data-status": "loading",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 11,
-        columnNumber: 7
-      }
-    }, /*#__PURE__*/_react.default.createElement(_SkeletonGroupAPI.SkeletonGroupContext.Provider, {
-      value: {
-        skin
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 19,
-        columnNumber: 9
-      }
-    }, children), /*#__PURE__*/_react.default.createElement("div", {
-      className: _SkeletonGroupSt.classes.animator,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 22,
-        columnNumber: 9
-      }
-    }));
-  }
+function SkeletonGroup(_ref) {
+  var {
+    dataHook,
+    className,
+    skin = 'light',
+    children,
+    backgroundColor
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-hook": dataHook,
+    className: (0, _SkeletonGroupSt.st)(_SkeletonGroupSt.classes.root, className),
+    style: {
+      [_SkeletonGroupSt.vars['color']]: backgroundColor
+    },
+    "data-status": "loading",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 16,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(_SkeletonGroupAPI.SkeletonGroupContext.Provider, {
+    value: {
+      skin
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 24,
+      columnNumber: 7
+    }
+  }, children), /*#__PURE__*/_react.default.createElement("div", {
+    className: _SkeletonGroupSt.classes.animator,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 27,
+      columnNumber: 7
+    }
+  }));
 }
 SkeletonGroup.displayName = 'SkeletonGroup';
 SkeletonGroup.propTypes = {
-  /** Applied as data-hook HTML attribute that can be used in the tests */
   dataHook: _propTypes.default.string,
-  /** Specifies a CSS class name to be appended to the component’s root element.
-   * @internal
-   */
-
   className: _propTypes.default.string,
-  /** Effects the color of the Skeleton */
   skin: _propTypes.default.oneOf(['dark', 'light']),
-  /** The background on which the skeleton is rendered */
   backgroundColor: _propTypes.default.string
 };
-SkeletonGroup.defaultProps = {
-  skin: 'light'
-};
 var _default = exports.default = SkeletonGroup;
 //# sourceMappingURL=SkeletonGroup.js.map

package/dist/cjs/SkeletonGroup/SkeletonGroup.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_propTypes","_SkeletonGroupSt","_SkeletonGroupAPI","_jsxFileName","SkeletonGroup","React","PureComponent","render","dataHook","className","skin","children","backgroundColor","props","default","createElement","st","classes","root","style","vars","__self","__source","fileName","lineNumber","columnNumber","SkeletonGroupContext","Provider","value","animator","displayName","propTypes","PropTypes","string","oneOf","defaultProps","_default","exports"],"sources":["../../../src/SkeletonGroup/SkeletonGroup.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { st, classes, vars } from './SkeletonGroup.st.css';\nimport { SkeletonGroupContext } from './SkeletonGroupAPI';\n\n/** SkeletonGroup */\nclass SkeletonGroup extends React.PureComponent {\n  render() {\n    const { dataHook, className, skin, children, backgroundColor } = this.props;\n    return (\n      <div\n        data-hook={dataHook}\n        className={st(classes.root, className)}\n        style={{\n          [vars['color']]: backgroundColor,\n        }}\n        data-status=\"loading\"\n      >\n        <SkeletonGroupContext.Provider value={{ skin }}>\n          {children}\n        </SkeletonGroupContext.Provider>\n        <div className={classes.animator} />\n      </div>\n    );\n  }\n}\n\nSkeletonGroup.displayName = 'SkeletonGroup';\n\nSkeletonGroup.propTypes = {\n  /** Applied as data-hook HTML attribute that can be used in the tests */\n  dataHook: PropTypes.string,\n\n  /** Specifies a CSS class name to be appended to the component’s root element.\n   * @internal\n   */\n\n  className: PropTypes.string,\n\n  /** Effects the color of the Skeleton */\n  skin: PropTypes.oneOf(['dark', 'light']),\n\n  /** The background on which the skeleton is rendered */\n  backgroundColor: PropTypes.string,\n};\n\nSkeletonGroup.defaultProps = { skin: 'light' };\n\nexport default SkeletonGroup;\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,gBAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AAA0D,IAAAI,YAAA;AAE1D;AACA,MAAMC,aAAa,SAASC,cAAK,CAACC,aAAa,CAAC;EAC9CC,MAAMA,CAAA,EAAG;IACP,IAAM;MAAEC,QAAQ;MAAEC,SAAS;MAAEC,IAAI;MAAEC,QAAQ;MAAEC;IAAgB,CAAC,GAAG,IAAI,CAACC,KAAK;IAC3E,oBACEhB,MAAA,CAAAiB,OAAA,CAAAC,aAAA;MACE,aAAWP,QAAS;MACpBC,SAAS,EAAE,IAAAO,mBAAE,EAACC,wBAAO,CAACC,IAAI,EAAET,SAAS,CAAE;MACvCU,KAAK,EAAE;QACL,CAACC,qBAAI,CAAC,OAAO,CAAC,GAAGR;MACnB,CAAE;MACF,eAAY,SAAS;MAAAS,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAApB,YAAA;QAAAqB,UAAA;QAAAC,YAAA;MAAA;IAAA,gBAErB5B,MAAA,CAAAiB,OAAA,CAAAC,aAAA,CAACb,iBAAA,CAAAwB,oBAAoB,CAACC,QAAQ;MAACC,KAAK,EAAE;QAAElB;MAAK,CAAE;MAAAW,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAApB,YAAA;QAAAqB,UAAA;QAAAC,YAAA;MAAA;IAAA,GAC5Cd,QAC4B,CAAC,eAChCd,MAAA,CAAAiB,OAAA,CAAAC,aAAA;MAAKN,SAAS,EAAEQ,wBAAO,CAACY,QAAS;MAAAR,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAApB,YAAA;QAAAqB,UAAA;QAAAC,YAAA;MAAA;IAAA,CAAE,CAChC,CAAC;EAEV;AACF;AAEArB,aAAa,CAAC0B,WAAW,GAAG,eAAe;AAE3C1B,aAAa,CAAC2B,SAAS,GAAG;EACxB;EACAvB,QAAQ,EAAEwB,kBAAS,CAACC,MAAM;EAE1B;AACF;AACA;;EAEExB,SAAS,EAAEuB,kBAAS,CAACC,MAAM;EAE3B;EACAvB,IAAI,EAAEsB,kBAAS,CAACE,KAAK,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;EAExC;EACAtB,eAAe,EAAEoB,kBAAS,CAACC;AAC7B,CAAC;AAED7B,aAAa,CAAC+B,YAAY,GAAG;EAAEzB,IAAI,EAAE;AAAQ,CAAC;AAAC,IAAA0B,QAAA,GAAAC,OAAA,CAAAvB,OAAA,GAEhCV,aAAa","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_propTypes","_SkeletonGroupSt","_SkeletonGroupAPI","_jsxFileName","SkeletonGroup","_ref","dataHook","className","skin","children","backgroundColor","default","createElement","st","classes","root","style","vars","__self","__source","fileName","lineNumber","columnNumber","SkeletonGroupContext","Provider","value","animator","displayName","propTypes","PropTypes","string","oneOf","_default","exports"],"sources":["../../../src/SkeletonGroup/SkeletonGroup.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { SkeletonGroupProps } from './SkeletonGroup.types';\nimport { st, classes, vars } from './SkeletonGroup.st.css';\nimport { SkeletonGroupContext } from './SkeletonGroupAPI';\n\n/** SkeletonGroup */\nfunction SkeletonGroup({\n  dataHook,\n  className,\n  skin = 'light',\n  children,\n  backgroundColor,\n}: SkeletonGroupProps) {\n  return (\n    <div\n      data-hook={dataHook}\n      className={st(classes.root, className)}\n      style={{\n        [vars['color']]: backgroundColor,\n      }}\n      data-status=\"loading\"\n    >\n      <SkeletonGroupContext.Provider value={{ skin }}>\n        {children}\n      </SkeletonGroupContext.Provider>\n      <div className={classes.animator} />\n    </div>\n  );\n}\n\nSkeletonGroup.displayName = 'SkeletonGroup';\n\nSkeletonGroup.propTypes = {\n  dataHook: PropTypes.string,\n  className: PropTypes.string,\n  skin: PropTypes.oneOf(['dark', 'light']),\n  backgroundColor: PropTypes.string,\n};\n\nexport default SkeletonGroup;\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AAEA,IAAAE,gBAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AAA0D,IAAAI,YAAA;AAE1D;AACA,SAASC,aAAaA,CAAAC,IAAA,EAMC;EAAA,IANA;IACrBC,QAAQ;IACRC,SAAS;IACTC,IAAI,GAAG,OAAO;IACdC,QAAQ;IACRC;EACkB,CAAC,GAAAL,IAAA;EACnB,oBACER,MAAA,CAAAc,OAAA,CAAAC,aAAA;IACE,aAAWN,QAAS;IACpBC,SAAS,EAAE,IAAAM,mBAAE,EAACC,wBAAO,CAACC,IAAI,EAAER,SAAS,CAAE;IACvCS,KAAK,EAAE;MACL,CAACC,qBAAI,CAAC,OAAO,CAAC,GAAGP;IACnB,CAAE;IACF,eAAY,SAAS;IAAAQ,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAjB,YAAA;MAAAkB,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAErBzB,MAAA,CAAAc,OAAA,CAAAC,aAAA,CAACV,iBAAA,CAAAqB,oBAAoB,CAACC,QAAQ;IAACC,KAAK,EAAE;MAAEjB;IAAK,CAAE;IAAAU,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAjB,YAAA;MAAAkB,UAAA;MAAAC,YAAA;IAAA;EAAA,GAC5Cb,QAC4B,CAAC,eAChCZ,MAAA,CAAAc,OAAA,CAAAC,aAAA;IAAKL,SAAS,EAAEO,wBAAO,CAACY,QAAS;IAAAR,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAjB,YAAA;MAAAkB,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CAChC,CAAC;AAEV;AAEAlB,aAAa,CAACuB,WAAW,GAAG,eAAe;AAE3CvB,aAAa,CAACwB,SAAS,GAAG;EACxBtB,QAAQ,EAAEuB,kBAAS,CAACC,MAAM;EAC1BvB,SAAS,EAAEsB,kBAAS,CAACC,MAAM;EAC3BtB,IAAI,EAAEqB,kBAAS,CAACE,KAAK,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;EACxCrB,eAAe,EAAEmB,kBAAS,CAACC;AAC7B,CAAC;AAAC,IAAAE,QAAA,GAAAC,OAAA,CAAAtB,OAAA,GAEaP,aAAa","ignoreList":[]}

package/dist/cjs/SkeletonGroup/SkeletonGroup.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_143_0_SkeletonGroup";
+var _namespace_ = "wds_1_144_0_SkeletonGroup";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -12,12 +12,12 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_143_0_SkeletonGroup__root","animator":"wds_1_143_0_SkeletonGroup__animator"};
-module.exports.keyframes = {"wave":"wds_1_143_0_SkeletonGroup__wave"}; 
+module.exports.classes = {"root":"wds_1_144_0_SkeletonGroup__root","animator":"wds_1_144_0_SkeletonGroup__animator"};
+module.exports.keyframes = {"wave":"wds_1_144_0_SkeletonGroup__wave"}; 
 module.exports.layers = {};
 module.exports.containers = {};
 module.exports.stVars = {}; 
-module.exports.vars = {"color":"--wds_1_143_0_SkeletonGroup-color"}; 
+module.exports.vars = {"color":"--wds_1_144_0_SkeletonGroup-color"}; 
 
 
 

package/dist/cjs/SkeletonGroup/SkeletonGroup.types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+exports.__esModule = true;
+//# sourceMappingURL=SkeletonGroup.types.js.map

package/dist/cjs/SkeletonGroup/SkeletonGroup.types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../src/SkeletonGroup/SkeletonGroup.types.ts"],"sourcesContent":["import { ReactNode } from 'react';\n\nexport type SkeletonGroupSkin = 'dark' | 'light';\nexport interface SkeletonGroupProps {\n  /** Applied as data-hook HTML attribute that can be used in the tests */\n  dataHook?: string;\n  children?: ReactNode;\n  /**\n   * Specifies a CSS class name to be appended to the component’s root element.\n   * @internal\n   */\n  className?: string;\n  /** Effects the color of the Skeleton */\n  skin?: SkeletonGroupSkin;\n  /** The background on which the skeleton is rendered */\n  backgroundColor?: string;\n}\n"],"mappings":"","ignoreList":[]}

package/dist/cjs/SkeletonGroup/SkeletonGroup.uni.driver.js

@@ -7,8 +7,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _unidriver = require("../utils/test-utils/unidriver");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var skeletonGroupDriverFactory = (base, body) => {
-  return _objectSpread({}, (0, _unidriver.baseUniDriverFactory)(base, body));
+var skeletonGroupDriverFactory = base => {
+  return _objectSpread({}, (0, _unidriver.baseUniDriverFactory)(base));
 };
 exports.skeletonGroupDriverFactory = skeletonGroupDriverFactory;
 //# sourceMappingURL=SkeletonGroup.uni.driver.js.map