@storybook/components 6.4.0-beta.20 → 6.4.0-beta.24

package/dist/cjs/ScrollArea/GlobalScrollAreaStyles.js

@@ -1,477 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.array.slice.js");
-
-require("core-js/modules/es.object.freeze.js");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.getScrollAreaStyles = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _theming = require("@storybook/theming");
-
-var _templateObject;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var hsResizeObserverDummyAnimation = (0, _theming.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["0%{z-index:0}to{z-index:-1}"])));
-
-var getScrollAreaStyles = function getScrollAreaStyles(theme) {
-  return {
-    'html.os-html, html.os-html>.os-host': {
-      display: 'block',
-      overflow: 'hidden',
-      boxSizing: 'border-box',
-      height: '100%!important',
-      width: '100%!important',
-      minWidth: '100%!important',
-      minHeight: '100%!important',
-      margin: '0!important',
-      position: 'absolute!important'
-    },
-    'html.os-html>.os-host>.os-padding': {
-      position: 'absolute'
-    },
-    'body.os-dragging, body.os-dragging *': {
-      cursor: 'default'
-    },
-    '.os-host, .os-host-textarea': {
-      position: 'relative',
-      overflow: 'visible!important',
-      flexDirection: 'column',
-      flexWrap: 'nowrap',
-      justifyContent: 'flex-start',
-      alignContent: 'flex-start',
-      alignItems: 'flex-start'
-    },
-    '.os-host-flexbox': {
-      overflow: 'hidden!important',
-      display: 'flex'
-    },
-    '.os-host-flexbox>.os-size-auto-observer': {
-      height: 'inherit!important'
-    },
-    '.os-host-flexbox>.os-content-glue': {
-      flexGrow: 1,
-      flexShrink: 0
-    },
-    '.os-host-flexbox>.os-size-auto-observer, .os-host-flexbox>.os-content-glue': {
-      minHeight: 0,
-      minWidth: 0,
-      flexGrow: 0,
-      flexShrink: 1,
-      flexBasis: 'auto'
-    },
-    '#os-dummy-scrollbar-size': {
-      position: 'fixed',
-      opacity: 0,
-      visibility: 'hidden',
-      overflow: 'scroll',
-      height: 500,
-      width: 500
-    },
-    '#os-dummy-scrollbar-size>div': {
-      width: '200%',
-      height: '200%',
-      margin: 10
-    },
-    '#os-dummy-scrollbar-size, .os-viewport': {},
-    '.os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size, .os-viewport-native-scrollbars-invisible.os-viewport': {
-      scrollbarWidth: 'none!important'
-    },
-    '.os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar-corner, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar-corner': {
-      display: 'none!important',
-      width: '0!important',
-      height: '0!important',
-      visibility: 'hidden!important',
-      background: '0 0!important'
-    },
-    '.os-content-glue': {
-      boxSizing: 'inherit',
-      maxHeight: '100%',
-      maxWidth: '100%',
-      width: '100%',
-      pointerEvents: 'none'
-    },
-    '.os-padding': {
-      boxSizing: 'inherit',
-      direction: 'inherit',
-      position: 'absolute',
-      overflow: 'visible',
-      padding: 0,
-      margin: 0,
-      left: 0,
-      top: 0,
-      bottom: 0,
-      right: 0,
-      width: 'auto!important',
-      height: 'auto!important',
-      zIndex: 1
-    },
-    '.os-host-overflow>.os-padding': {
-      overflow: 'hidden'
-    },
-    '.os-viewport': {
-      direction: 'inherit!important',
-      boxSizing: 'inherit!important',
-      resize: 'none!important',
-      outline: '0!important',
-      position: 'absolute',
-      overflow: 'hidden',
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0,
-      padding: 0,
-      margin: 0
-    },
-    '.os-content-arrange': {
-      position: 'absolute',
-      zIndex: -1,
-      minHeight: 1,
-      minWidth: 1,
-      pointerEvents: 'none'
-    },
-    '.os-content': {
-      direction: 'inherit',
-      boxSizing: 'border-box!important',
-      position: 'relative',
-      display: 'block',
-      height: '100%',
-      width: '100%',
-      visibility: 'visible'
-    },
-    '.os-content:before, .os-content:after': {
-      content: "''",
-      display: 'table',
-      width: 0,
-      height: 0,
-      lineHeight: 0,
-      fontSize: 0
-    },
-    '.os-content>.os-textarea': {
-      boxSizing: 'border-box!important',
-      direction: 'inherit!important',
-      background: '0 0!important',
-      outline: '0 transparent!important',
-      overflow: 'hidden!important',
-      position: 'absolute!important',
-      display: 'block!important',
-      top: '0!important',
-      left: '0!important',
-      margin: '0!important',
-      borderRadius: '0!important',
-      float: 'none!important',
-      filter: 'none!important',
-      border: '0!important',
-      resize: 'none!important',
-      transform: 'none!important',
-      maxWidth: 'none!important',
-      maxHeight: 'none!important',
-      boxShadow: 'none!important',
-      perspective: 'none!important',
-      opacity: '1!important',
-      zIndex: '1!important',
-      clip: 'auto!important',
-      verticalAlign: 'baseline!important',
-      padding: 0
-    },
-    '.os-host-rtl>.os-padding>.os-viewport>.os-content>.os-textarea': {
-      right: '0!important'
-    },
-    '.os-content>.os-textarea-cover': {
-      zIndex: -1,
-      pointerEvents: 'none'
-    },
-    '.os-content>.os-textarea[wrap=off]': {
-      whiteSpace: 'pre!important',
-      margin: '0!important'
-    },
-    '.os-text-inherit': {
-      fontFamily: 'inherit',
-      fontSize: 'inherit',
-      fontWeight: 'inherit',
-      fontStyle: 'inherit',
-      fontVariant: 'inherit',
-      textTransform: 'inherit',
-      textDecoration: 'inherit',
-      textIndent: 'inherit',
-      textAlign: 'inherit',
-      textShadow: 'inherit',
-      textOverflow: 'inherit',
-      letterSpacing: 'inherit',
-      wordSpacing: 'inherit',
-      lineHeight: 'inherit',
-      unicodeBidi: 'inherit',
-      direction: 'inherit',
-      color: 'inherit',
-      cursor: 'text'
-    },
-    '.os-resize-observer, .os-resize-observer-host': {
-      boxSizing: 'inherit',
-      display: 'block',
-      opacity: 0,
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      height: '100%',
-      width: '100%',
-      overflow: 'hidden',
-      pointerEvents: 'none',
-      zIndex: -1
-    },
-    '.os-resize-observer-host': {
-      padding: 'inherit',
-      border: 'inherit',
-      borderColor: 'transparent',
-      borderStyle: 'solid',
-      boxSizing: 'border-box'
-    },
-    '.os-resize-observer-host:after': {
-      content: "''"
-    },
-    '.os-resize-observer-host>.os-resize-observer, .os-resize-observer-host:after': {
-      height: '200%',
-      width: '200%',
-      padding: 'inherit',
-      border: 'inherit',
-      margin: 0,
-      display: 'block',
-      boxSizing: 'content-box'
-    },
-    '.os-resize-observer.observed, object.os-resize-observer': {
-      boxSizing: 'border-box!important'
-    },
-    '.os-size-auto-observer': {
-      boxSizing: 'inherit!important',
-      height: '100%',
-      width: 'inherit',
-      maxWidth: 1,
-      position: 'relative',
-      float: 'left',
-      maxHeight: 1,
-      overflow: 'hidden',
-      zIndex: -1,
-      padding: 0,
-      margin: 0,
-      pointerEvents: 'none',
-      flexGrow: 'inherit',
-      flexShrink: 0,
-      flexBasis: 0
-    },
-    '.os-size-auto-observer>.os-resize-observer': {
-      width: '1000%',
-      height: '1000%',
-      minHeight: 1,
-      minWidth: 1
-    },
-    '.os-resize-observer-item': {
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-      overflow: 'hidden',
-      zIndex: -1,
-      opacity: 0,
-      direction: 'ltr!important',
-      flex: 'none!important'
-    },
-    '.os-resize-observer-item-final': {
-      position: 'absolute',
-      left: 0,
-      top: 0,
-      transition: 'none!important',
-      flex: 'none!important'
-    },
-    '.os-resize-observer': {
-      animationDuration: '.001s',
-      animationName: "".concat(hsResizeObserverDummyAnimation)
-    },
-    '.os-host-transition>.os-scrollbar, .os-host-transition>.os-scrollbar-corner': {
-      transition: 'opacity .3s,visibility .3s,top .3s,right .3s,bottom .3s,left .3s'
-    },
-    'html.os-html>.os-host>.os-scrollbar': {
-      position: 'absolute',
-      zIndex: 999999
-    },
-    '.os-scrollbar, .os-scrollbar-corner': {
-      position: 'absolute',
-      opacity: 1,
-      zIndex: 1
-    },
-    '.os-scrollbar-corner': {
-      bottom: 0,
-      right: 0,
-      height: 10,
-      width: 10,
-      backgroundColor: 'transparent'
-    },
-    '.os-scrollbar': {
-      pointerEvents: 'none',
-      padding: 2,
-      boxSizing: 'border-box',
-      background: 0
-    },
-    '.os-scrollbar-track': {
-      pointerEvents: 'auto',
-      position: 'relative',
-      height: '100%',
-      width: '100%',
-      padding: '0!important',
-      border: '0!important'
-    },
-    '.os-scrollbar-handle': {
-      pointerEvents: 'auto',
-      position: 'absolute',
-      width: '100%',
-      height: '100%'
-    },
-    '.os-scrollbar-handle-off, .os-scrollbar-track-off': {
-      pointerEvents: 'none'
-    },
-    '.os-scrollbar.os-scrollbar-unusable, .os-scrollbar.os-scrollbar-unusable *': {
-      pointerEvents: 'none!important'
-    },
-    '.os-scrollbar.os-scrollbar-unusable .os-scrollbar-handle': {
-      opacity: '0!important'
-    },
-    '.os-scrollbar-horizontal': {
-      bottom: 0,
-      left: 0,
-      right: 10,
-      height: 10
-    },
-    '.os-scrollbar-vertical': {
-      top: 0,
-      right: 0,
-      bottom: 10,
-      width: 10
-    },
-    '.os-host-rtl>.os-scrollbar-horizontal': {
-      right: 0
-    },
-    '.os-host-rtl>.os-scrollbar-vertical': {
-      right: 'auto',
-      left: 0
-    },
-    '.os-host-rtl>.os-scrollbar-corner': {
-      right: 'auto',
-      left: 0
-    },
-    '.os-scrollbar-auto-hidden, .os-padding+.os-scrollbar-corner, .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-corner, .os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal, .os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-corner, .os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical+.os-scrollbar-corner, .os-scrollbar-horizontal+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner': {
-      opacity: 0,
-      visibility: 'hidden',
-      pointerEvents: 'none'
-    },
-    '.os-scrollbar-corner-resize-both': {
-      cursor: 'nwse-resize'
-    },
-    '.os-host-rtl>.os-scrollbar-corner-resize-both': {
-      cursor: 'nesw-resize'
-    },
-    '.os-scrollbar-corner-resize-horizontal': {
-      cursor: 'ew-resize'
-    },
-    '.os-scrollbar-corner-resize-vertical': {
-      cursor: 'ns-resize'
-    },
-    '.os-dragging .os-scrollbar-corner.os-scrollbar-corner-resize': {
-      cursor: 'default'
-    },
-    '.os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-vertical': {
-      top: 0,
-      bottom: 0
-    },
-    '.os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal, .os-host-rtl.os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal': {
-      right: 0,
-      left: 0
-    },
-    '.os-scrollbar:hover, .os-scrollbar-corner.os-scrollbar-corner-resize': {
-      opacity: '1!important',
-      visibility: 'visible!important'
-    },
-    '.os-scrollbar-corner.os-scrollbar-corner-resize': {
-      backgroundImage: 'linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0)  50%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.4) 100%)',
-      backgroundRepeat: 'no-repeat',
-      backgroundPosition: '100% 100%',
-      pointerEvents: 'auto!important'
-    },
-    '.os-host-rtl>.os-scrollbar-corner.os-scrollbar-corner-resize': {
-      transform: 'scale(-1,1)'
-    },
-    '.os-host-overflow': {
-      overflow: 'hidden!important'
-    },
-    '.os-theme-dark.os-host-rtl>.os-scrollbar-horizontal': {
-      left: 10,
-      right: 0
-    },
-    '.os-scrollbar.os-scrollbar-unusable': {
-      background: 0
-    },
-    '.os-scrollbar>.os-scrollbar-track': {
-      background: 0
-    },
-    '.os-scrollbar-horizontal>.os-scrollbar-track>.os-scrollbar-handle': {
-      minWidth: 30
-    },
-    '.os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle': {
-      minHeight: 30
-    },
-    '.os-theme-dark.os-host-transition>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle': {
-      transition: 'background-color .3s'
-    },
-    '.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle, .os-scrollbar>.os-scrollbar-track': {
-      borderRadius: 10
-    },
-    '.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle': {
-      background: theme.color.mediumdark,
-      opacity: 0.5
-    },
-    '.os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle': {
-      opacity: 0.6
-    },
-    '.os-scrollbar-horizontal .os-scrollbar-handle:before, .os-scrollbar-vertical .os-scrollbar-handle:before': {
-      content: "''",
-      position: 'absolute',
-      left: 0,
-      right: 0,
-      top: 0,
-      bottom: 0,
-      display: 'block'
-    },
-    '.os-theme-dark.os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal .os-scrollbar-handle:before, .os-theme-dark.os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical .os-scrollbar-handle:before': {
-      display: 'none'
-    },
-    '.os-scrollbar-horizontal .os-scrollbar-handle:before': {
-      top: -6,
-      bottom: -2
-    },
-    '.os-scrollbar-vertical .os-scrollbar-handle:before': {
-      left: -6,
-      right: -2
-    },
-    '.os-host-rtl.os-scrollbar-vertical .os-scrollbar-handle:before': {
-      right: -6,
-      left: -2
-    }
-  };
-};
-
-exports.getScrollAreaStyles = getScrollAreaStyles;
-
-var GlobalScrollAreaStyles = function GlobalScrollAreaStyles() {
-  return /*#__PURE__*/_react.default.createElement(_theming.Global, {
-    styles: getScrollAreaStyles
-  });
-};
-
-GlobalScrollAreaStyles.displayName = "GlobalScrollAreaStyles";
-var _default = GlobalScrollAreaStyles;
-exports.default = _default;

package/dist/cjs/ScrollArea/OverlayScrollbars.js

@@ -1,131 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.symbol.js");
-
-require("core-js/modules/es.object.assign.js");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.OverlayScrollbarsComponent = void 0;
-
-require("core-js/modules/es.regexp.constructor.js");
-
-require("core-js/modules/es.regexp.exec.js");
-
-require("core-js/modules/es.regexp.to-string.js");
-
-require("core-js/modules/es.string.replace.js");
-
-require("core-js/modules/es.array.join.js");
-
-require("core-js/modules/es.array.filter.js");
-
-require("core-js/modules/es.string.split.js");
-
-require("core-js/modules/es.string.match.js");
-
-require("core-js/modules/es.array.concat.js");
-
-require("core-js/modules/es.object.keys.js");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _overlayscrollbars = _interopRequireDefault(require("overlayscrollbars"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-/**
- * Using overlayscrollbars-react component results use the esm modules
- * which doesn't go through babel leading to IE 11 uncompatibility
- * A PR is submitted that may fix this:
- * https://github.com/KingSora/OverlayScrollbars/pull/218
- * */
-var OverlayScrollbarsComponent = function OverlayScrollbarsComponent(_ref) {
-  var _ref$options = _ref.options,
-      options = _ref$options === void 0 ? {} : _ref$options,
-      extensions = _ref.extensions,
-      className = _ref.className,
-      children = _ref.children,
-      rest = _objectWithoutProperties(_ref, ["options", "extensions", "className", "children"]);
-
-  var osTargetRef = _react.default.useRef();
-
-  var osInstance = _react.default.useRef();
-
-  _react.default.useEffect(function () {
-    osInstance.current = (0, _overlayscrollbars.default)(osTargetRef.current, options, extensions);
-    mergeHostClassNames(osInstance.current, className);
-    return function () {
-      if (_overlayscrollbars.default.valid(osInstance.current)) {
-        osInstance.current.destroy();
-        osInstance.current = null;
-      }
-    };
-  }, []);
-
-  _react.default.useEffect(function () {
-    if (_overlayscrollbars.default.valid(osInstance.current)) {
-      osInstance.current.options(options);
-    }
-  }, [options]);
-
-  _react.default.useEffect(function () {
-    if (_overlayscrollbars.default.valid(osInstance.current)) {
-      mergeHostClassNames(osInstance.current, className);
-    }
-  }, [className]);
-
-  return /*#__PURE__*/_react.default.createElement("div", _extends({
-    className: "os-host"
-  }, rest, {
-    ref: osTargetRef
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "os-resize-observer-host"
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "os-padding"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "os-viewport"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "os-content"
-  }, children))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "os-scrollbar os-scrollbar-horizontal "
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "os-scrollbar-track"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "os-scrollbar-handle"
-  }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "os-scrollbar os-scrollbar-vertical"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "os-scrollbar-track"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "os-scrollbar-handle"
-  }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "os-scrollbar-corner"
-  }));
-};
-
-exports.OverlayScrollbarsComponent = OverlayScrollbarsComponent;
-OverlayScrollbarsComponent.displayName = "OverlayScrollbarsComponent";
-
-function mergeHostClassNames(osInstance, className) {
-  if (_overlayscrollbars.default.valid(osInstance)) {
-    var _osInstance$getElemen = osInstance.getElements(),
-        host = _osInstance$getElemen.host;
-
-    var regex = new RegExp("(^os-host([-_].+|)$)|".concat(osInstance.options().className.replace(/\s/g, '$|'), "$"), 'g');
-    var osClassNames = host.className.split(' ').filter(function (name) {
-      return name.match(regex);
-    }).join(' ');
-    host.className = "".concat(osClassNames, " ").concat(className || '');
-  }
-}
-
-var _default = OverlayScrollbarsComponent;
-exports.default = _default;