pragmate-ui/tabs/tabs.amd.js

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.

define(["exports", "module", "@beyond-js/kernel/bundle", "@beyond-js/kernel/styles", "react", "framer-motion"], function (_exports, _amd_module, dependency_0, dependency_1, dependency_2, dependency_3) {
  "use strict";

  Object.defineProperty(_exports, "__esModule", {
    value: true
  });
  _exports.hmr = _exports.__beyond_pkg = _exports.TabsContainer = _exports.Tabs = _exports.Tab = _exports.Panes = void 0;
  const {
    Bundle: __Bundle
  } = dependency_0;
  const __pkg = new __Bundle({
    "module": {
      "vspecifier": "pragmate-ui@1.0.0-beta.7/tabs"
    },
    "type": "code"
  }, _amd_module.uri).package();
  ;
  __pkg.dependencies.update([['@beyond-js/kernel/styles', dependency_1], ['react', dependency_2], ['framer-motion', dependency_3]]);
  brequire('@beyond-js/kernel/styles').styles.register('pragmate-ui@1.0.0-beta.7/tabs');
  const ims = new Map();

  /*************************
  INTERNAL MODULE: ./context
  *************************/

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

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.useTabsContext = exports.TabsContext = void 0;
      var _react = require("react");
      const TabsContext = exports.TabsContext = _react.default.createContext({});
      const useTabsContext = () => _react.default.useContext(TabsContext);
      exports.useTabsContext = useTabsContext;
    }
  });

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

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

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

  /***********************
  INTERNAL MODULE: ./index
  ***********************/

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

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.TabsContainer = TabsContainer;
      var _react = require("react");
      var _context = require("./context");
      var _framerMotion = require("framer-motion");
      /* bundle  */
      function TabsContainer({
        active,
        onChange,
        className,
        children,
        panes
      }) {
        const activeIndex = active || 0;
        const [activeTab, setActiveTab] = _react.default.useState(activeIndex);
        const value = {
          panes,
          activeTab,
          setActiveTab,
          onChange
        };
        const cls = `pui-tabs-container${className ? ` ${className}` : ''}`;
        return _react.default.createElement(_context.TabsContext.Provider, {
          value: value
        }, _react.default.createElement(_framerMotion.AnimatePresence, null, _react.default.createElement("section", {
          className: cls
        }, children)));
      }
    }
  });

  /***********************
  INTERNAL MODULE: ./panes
  ***********************/

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

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.Panes = Panes;
      var _react = require("react");
      var _context = require("./context");
      /*bundle*/
      function Panes({
        children,
        className
      }) {
        const {
          activeTab
        } = (0, _context.useTabsContext)();
        const childrenArray = _react.default.Children.toArray(children);
        const Control = childrenArray[activeTab];
        const cls = `tab-content ${className ? ` ${className}` : ''}`;
        return _react.default.createElement("section", {
          className: cls
        }, Control);
      }
    }
  });

  /*********************
  INTERNAL MODULE: ./tab
  *********************/

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

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.Tab = Tab;
      var _react = require("react");
      var _context = require("./context");
      /*bundle */
      function Tab(props) {
        const {
          children,
          index,
          disabled,
          className,
          name
        } = props;
        const {
          activeTab,
          setActiveTab,
          onChange
        } = (0, _context.useTabsContext)();
        let cls = `tab ${index === activeTab ? 'active' : ''} ${disabled ? ' is-disabled' : ''}`;
        if (className) cls += ' ' + className;
        const onClick = event => {
          //todo: this event must be removed
          if (onChange) onChange(event, index);
          setActiveTab(index);
        };
        const attrs = {};
        if (!disabled) attrs.onClick = onClick;
        return _react.default.createElement("div", {
          className: cls,
          ...attrs,
          "data-name": name,
          "data-index": index
        }, children);
      }
    }
  });

  /**********************
  INTERNAL MODULE: ./tabs
  **********************/

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

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.Tabs = void 0;
      var _react = require("react");
      var _context = require("./context");
      var _useScroll = require("./use-scroll");
      var _tab = require("./tab");
      /*bundle*/
      const Tabs = ({
        children,
        className
      }) => {
        const {
          activeTab
        } = (0, _context.useTabsContext)();
        const ref = _react.default.useRef(null);
        const cls = `pui-tabs-menu tabs${className ? ` ${className}` : ''}`;
        const clone = (item, index) => {
          if (!_react.default.isValidElement(item) || item.type !== _tab.Tab) return item;
          const props = {
            ...item.props,
            index,
            key: index
          };
          const tabChild = item;
          return _react.default.cloneElement(tabChild, props);
        };
        const output = _react.default.Children.map(children, clone);
        (0, _useScroll.useScroll)(ref, activeTab);
        return _react.default.createElement("header", {
          className: cls,
          ref: ref
        }, output);
      };
      exports.Tabs = Tabs;
    }
  });

  /****************************
  INTERNAL MODULE: ./use-scroll
  ****************************/

  ims.set('./use-scroll', {
    hash: 1907559043,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.useScroll = useScroll;
      var _react = require("react");
      function useScroll(tabRef, activeTab) {
        _react.default.useEffect(() => {
          const scrollToTab = index => {
            const tabElement = tabRef.current?.querySelectorAll('.tab')[index];
            if (tabElement) {
              const container = tabRef.current;
              const containerRect = container.getBoundingClientRect();
              const tabRect = tabElement.getBoundingClientRect();
              const scrollLeft = container.scrollLeft;
              if (tabRect.left < containerRect.left) {
                container.scrollTo({
                  left: scrollLeft + tabRect.left - containerRect.left,
                  behavior: 'smooth'
                });
              } else if (tabRect.right > containerRect.right) {
                container.scrollTo({
                  left: scrollLeft + tabRect.right - containerRect.right,
                  behavior: 'smooth'
                });
              }
            }
          };
          scrollToTab(activeTab);
        }, [activeTab]);
      }
    }
  });
  __pkg.exports.descriptor = [{
    "im": "./index",
    "from": "TabsContainer",
    "name": "TabsContainer"
  }, {
    "im": "./panes",
    "from": "Panes",
    "name": "Panes"
  }, {
    "im": "./tab",
    "from": "Tab",
    "name": "Tab"
  }, {
    "im": "./tabs",
    "from": "Tabs",
    "name": "Tabs"
  }];
  let TabsContainer = _exports.TabsContainer = void 0,
    Panes = _exports.Panes = void 0,
    Tab = _exports.Tab = void 0,
    Tabs = _exports.Tabs = void 0;

  // Module exports
  __pkg.exports.process = function ({
    require,
    prop,
    value
  }) {
    (require || prop === 'TabsContainer') && (_exports.TabsContainer = TabsContainer = require ? require('./index').TabsContainer : value);
    (require || prop === 'Panes') && (_exports.Panes = Panes = require ? require('./panes').Panes : value);
    (require || prop === 'Tab') && (_exports.Tab = Tab = require ? require('./tab').Tab : value);
    (require || prop === 'Tabs') && (_exports.Tabs = Tabs = require ? require('./tabs').Tabs : value);
  };
  const __beyond_pkg = _exports.__beyond_pkg = __pkg;
  const hmr = _exports.hmr = new function () {
    this.on = (event, listener) => void 0;
    this.off = (event, listener) => void 0;
  }();
  __pkg.initialise(ims);
});
//# sourceMappingURL=tabs.amd.js.map