pragmate-ui/perfect-scrollbar/perfect-scrollbar.browser.mjs

An advanced, on-demand React UI library optimized for BeyondJS. Pragmate UI provides modular, responsive, and accessible components with a focus on efficient bundle sizes and a streamlined development process.

import * as dependency_0 from '@beyond-js/kernel/bundle';
import * as dependency_1 from '@beyond-js/kernel/styles';
import * as dependency_2 from 'react';
import * as dependency_3 from 'perfect-scrollbar';
import * as dependency_4 from 'pragmate-ui/base';

const {Bundle: __Bundle} = dependency_0;
const __pkg = new __Bundle({"module":{"vspecifier":"pragmate-ui@1.0.1/perfect-scrollbar"},"type":"code","name":"perfect-scrollbar"}, import.meta.url).package();;

__pkg.dependencies.update([['@beyond-js/kernel/styles', dependency_1],['react', dependency_2],['perfect-scrollbar', dependency_3],['pragmate-ui/base', dependency_4]]);

brequire('@beyond-js/kernel/styles').styles.register('pragmate-ui@1.0.1/perfect-scrollbar')


const ims = new Map();

/***************************
INTERNAL MODULE: ./container
***************************/

ims.set('./container', {hash: 1081224750, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ScrollContainer = ScrollContainer;
var _react = require("react");
var _perfectScrollbar = require("perfect-scrollbar");
/*bundle*/ /**
            * It's a React component that uses the PerfectScrollbar library to create a scrollbar that can be
            * customized with CSS.
            * @param {props} props - TProps
            * @returns A function that returns a JSX.Element
            */
function ScrollContainer(props) {
  const ref = (0, _react.useRef)(null);
  (0, _react.useEffect)(() => {
    const control = ref.current;
    const scrollbar = new _perfectScrollbar.default(control, {
      wheelSpeed: 2,
      wheelPropagation: true,
      minScrollbarLength: 20
    });
    const handleOnScrollY = event => {
      props.onScrollY(event, control, scrollbar);
    };
    const handleOnScrollX = event => {
      props.onScrollY(event, control, scrollbar);
    };
    const {
      onScrollY,
      onScrollX
    } = props;
    if (onScrollY) control.addEventListener("ps-scroll-y", handleOnScrollY);
    if (onScrollX) control.addEventListener("ps-scroll-y", handleOnScrollX);
    return () => {
      scrollbar.destroy();
      if (onScrollY) ref.current.removeEventListener("ps-scroll-y", onScrollY);
      if (onScrollX) ref.current.removeEventListener("ps-scroll-y", handleOnScrollX);
    };
  }, []);
  let cls = props.className ? `beyond-perfect-scrollbar ${props.className}` : "beyond-perfect-scrollbar";
  return _react.default.createElement("div", {
    ref: ref,
    className: cls
  }, props.children);
}
}});

/*****************************
INTERNAL MODULE: ./definitions
*****************************/

ims.set('./definitions', {hash: 1532264377, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
;
}});

__pkg.exports.descriptor = [{"im":"./container","from":"ScrollContainer","name":"ScrollContainer"}];

export let ScrollContainer;

// Module exports
__pkg.exports.process = function({require, prop, value}) {
    (require || prop === 'ScrollContainer') && (ScrollContainer = require ? require('./container').ScrollContainer : value);

};
export const __beyond_pkg = __pkg;

export const hmr = new (function () {
    this.on = (event, listener) => void 0;
    this.off = (event, listener) => void 0;
});


__pkg.initialise(ims);
//# sourceMappingURL=perfect-scrollbar.browser.mjs.map