pragmate-ui/tabs/tabs.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 '@beyond-js/kernel/routing';

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

__pkg.dependencies.update([['@beyond-js/kernel/styles', dependency_1],['react', dependency_2],['@beyond-js/kernel/routing', dependency_3]]);

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


const ims = new Map();

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

ims.set('./context', {hash: 451487243, 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: 1537491585, creator: function (require, exports) {
"use strict";

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

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

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TabsContainer = TabsContainer;
var _routing = require("@beyond-js/kernel/routing");
var _react = require("react");
var _context = require("./context");
/* bundle  */function TabsContainer({
  active = 0,
  onChange,
  className,
  current,
  children,
  tabs = [],
  panes,
  trackUrl
}) {
  // Extract tab names from children
  if (trackUrl) {
    const tab = _routing.routing.uri.qs.get('tab');
    current = current ?? tab;
  }
  const activeIndex = tabs.includes(current) ? tabs.indexOf(current) : active;
  const [activeTab, setActiveTab] = _react.default.useState(activeIndex);
  const [currentTabName, setCurrentTabName] = _react.default.useState(current);
  // Update active tab if `current` prop changes
  const value = {
    panes,
    activeTab,
    setActiveTab,
    onChange,
    trackUrl,
    current: currentTabName,
    currentTabName,
    setCurrentTabName,
    names: tabs
  };
  const cls = `pui-tabs-container${className ? ` ${className}` : ''}`;
  return _react.default.createElement(_context.TabsContext.Provider, {
    value: value
  }, _react.default.createElement("section", {
    className: cls
  }, children));
}
}});

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

ims.set('./panes', {hash: 1726352262, 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,
  items
}) {
  const {
    activeTab
  } = (0, _context.useTabsContext)();
  if (items) {
    const Control = items[activeTab];
    return _react.default.createElement("section", {
      className: `tab-content ${className ? ` ${className}` : ''}`
    }, _react.default.createElement(Control, null));
  }
  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: 588532965, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Tab = Tab;
var _react = require("react");
var _context = require("./context");
var _routing = require("@beyond-js/kernel/routing");
/*bundle */function Tab(props) {
  const {
    children,
    index,
    disabled,
    className,
    name
  } = props;
  const {
    activeTab,
    setActiveTab,
    onChange,
    trackUrl
  } = (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 (trackUrl) {
      // Convert `routing.uri.qs.entries` to an object
      const queryParams = Object.fromEntries(_routing.routing.uri.qs.entries());
      // Update the `tab` parameter
      queryParams.tab = name;
      // Build the new query string
      const queryString = new URLSearchParams(queryParams).toString();
      // Update the URL without reloading the page
      _routing.routing.replaceState({}, '', `${_routing.routing.uri.pathname}?${queryString}`);
    }
    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: 1755048068, 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,
    names
  } = (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,
      name: names[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: 1668718188, 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"}];

export let TabsContainer, Panes, Tab, Tabs;

// Module exports
__pkg.exports.process = function({require, prop, value}) {
    (require || prop === 'TabsContainer') && (TabsContainer = require ? require('./index').TabsContainer : value);
    (require || prop === 'Panes') && (Panes = require ? require('./panes').Panes : value);
    (require || prop === 'Tab') && (Tab = require ? require('./tab').Tab : value);
    (require || prop === 'Tabs') && (Tabs = require ? require('./tabs').Tabs : 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=tabs.browser.mjs.map