@peassoft/mnr-web-ui-kit 2.4.0 → 2.5.0

package/dist/tab-panel/index.d.ts

@@ -0,0 +1,22 @@
+import { type JSX } from 'react';
+export type TabPanelProps = {
+    /**
+     * HTML `id` attribute to be used for linking with the corresponding tab item.
+     *
+     * Should be generated with the use of React's `useId()` hook and be used both in the tab item
+     * and in the corresponding tab panel component.
+     */
+    htmlId: string;
+    /**
+     * HTML 'id` of the corresponding tab item.
+     */
+    htmlTabId: string;
+    /** Styles API. */
+    classNames?: {
+        /** Root element. */
+        root?: string;
+    };
+    /** Contents of the tab. */
+    children: React.ReactNode;
+};
+export declare const TabPanel: import("react").MemoExoticComponent<(props: TabPanelProps) => JSX.Element>;

package/dist/tab-panel/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+export const TabPanel = memo(function TabPanel(props) {
+  const {
+    htmlId,
+    htmlTabId,
+    classNames,
+    children
+  } = props;
+  const rootElementCn = useMemo(() => {
+    return classNames?.root || undefined;
+  }, [classNames]);
+  return _jsx("div", {
+    id: htmlId,
+    role: 'tabpanel',
+    tabIndex: 0,
+    "aria-labelledby": htmlTabId,
+    className: rootElementCn,
+    children: children
+  });
+});

package/dist/tabs/index.d.ts

@@ -0,0 +1,55 @@
+import { type JSX } from 'react';
+import './styles.css';
+export type TabsProps = {
+    /** Tab descriptors. */
+    tabs: TabItem[];
+    /** ID of the currently selected tab. */
+    selectedTabId: string;
+    /**
+     * A11y label for the tabs container.
+     * It does not appear in the UI, but required by WCAG.
+     */
+    tablistLabel: string;
+    /**
+     * Variant of tabs alignment.
+     *
+     * - "spread" - tabs are evenly spread over the available width;
+     * - "startAlighed" - tabs are aligned to the start of the container.
+     *
+     * Optional. Defaults to "spread".
+     */
+    variant?: 'spread' | 'startAlighed';
+    /** Styles API. */
+    classNames?: {
+        /** Root element. */
+        root?: string;
+    };
+    /** Event handler for the event when user activates another tab. */
+    onChange: (id: string) => unknown;
+};
+/** Tab item descriptor. */
+export type TabItem = {
+    /**
+     * Unique key/ID which is used by application logic to decide what tab panel to render.
+     *
+     * This ID is not used as an HTML `id` attribute (see `htmlId` prop).
+     */
+    id: string;
+    /** Visible label. */
+    label: string;
+    /**
+     * HTML `id` attribute to be used for linking with the corresponding tab panel.
+     *
+     * Should be generated with the use of React's `useId()` hook and be used both in the tab item
+     * and in the corresponding tab panel component.
+     */
+    htmlId: string;
+    /**
+     * HTML `id` attribute of the tab panel associated with this tab.
+     *
+     * This id is used in the `aria-controls` attribute. Should be generated with
+     * the use of React's `useId()` hook.
+     */
+    tabPanelId: string;
+};
+export declare function Tabs(props: TabsProps): JSX.Element;

package/dist/tabs/index.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useCallback, createRef } from 'react';
+import './styles.css';
+export function Tabs(props) {
+  const {
+    tabs,
+    selectedTabId,
+    tablistLabel,
+    variant = 'spread',
+    classNames,
+    onChange
+  } = props;
+  const btnRefs = useMemo(() => tabs.map(() => createRef()), [tabs]);
+  const rootContainerClassName = useMemo(() => {
+    let cn = 'uikit_Tabs_tabList';
+    if (classNames?.root) {
+      cn += ` ${classNames.root}`;
+    }
+    switch (variant) {
+      case 'spread':
+        break;
+      case 'startAlighed':
+        cn += ' uikit_Tabs_tabList--startAligned';
+        break;
+      default:
+        {
+          const _exhaustiveCheck = variant;
+          return _exhaustiveCheck;
+        }
+    }
+    return cn;
+  }, [classNames, variant]);
+  const handleKeyDownOnTab = useCallback(e => {
+    const btn = e.target;
+    const id = btn.attributes.getNamedItem('data-id')?.value;
+    if (!id) return;
+    const currIdx = tabs.findIndex(tab => tab.id === id);
+    let nextIdx = null;
+    switch (e.key) {
+      case 'ArrowRight':
+        nextIdx = currIdx + 1;
+        if (nextIdx > tabs.length - 1) nextIdx = 0;
+        break;
+      case 'ArrowLeft':
+        nextIdx = currIdx - 1;
+        if (nextIdx < 0) nextIdx = tabs.length - 1;
+    }
+    if (nextIdx == null) return;
+    const nextId = tabs[nextIdx]?.id;
+    if (!nextId) return;
+    btnRefs[nextIdx]?.current?.focus();
+    onChange(nextId);
+  }, [tabs, btnRefs, onChange]);
+  return _jsx("div", {
+    className: rootContainerClassName,
+    role: 'tablist',
+    "aria-label": tablistLabel,
+    children: tabs.map((tab, idx) => _jsx("button", {
+      ref: btnRefs[idx],
+      type: 'button',
+      id: tab.htmlId,
+      "data-id": tab.id,
+      className: 'uikit_Tabs_btn' + (selectedTabId === tab.id ? ' uikit_Tabs_btn--active' : ''),
+      role: 'tab',
+      "aria-controls": tab.tabPanelId,
+      "aria-selected": selectedTabId === tab.id,
+      tabIndex: selectedTabId === tab.id ? 0 : -1,
+      onClick: () => {
+        if (selectedTabId !== tab.id) {
+          onChange(tab.id);
+        }
+      },
+      onKeyDown: handleKeyDownOnTab,
+      children: _jsx("span", {
+        children: tab.label
+      })
+    }, tab.id))
+  });
+}

package/dist/tabs/styles.css

@@ -0,0 +1,48 @@
+.uikit_Tabs_tabList {
+  --color-label: #242629;
+  --color-active-bar: #3f72af;
+
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-around;
+
+  & *,
+  & :before,
+  & :after {
+    box-sizing: inherit;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .uikit_Tabs_tabList {
+    --color-label: #f9f9f9;
+    --color-active-bar: #dbe2ef;
+  }
+}
+
+.uikit_Tabs_tabList--startAligned {
+  justify-content: flex-start;
+  gap: 1em;
+}
+
+.uikit_Tabs_btn {
+  display: block;
+  appearance: none;
+  color: var(--color-label);
+  font-family: inherit;
+  font-size: 1em;
+  background-color: transparent;
+  margin: 0;
+  padding: 0;
+  padding-block-end: 0.1em;
+  cursor: pointer;
+  border: 0;
+  border-block-end: 3px solid transparent;
+  transition: border-block-end-color 0.4s ease-in-out;
+  user-select: none;
+  outline-offset: 3px;
+}
+
+.uikit_Tabs_btn--active {
+  border-block-end-color: var(--color-active-bar);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peassoft/mnr-web-ui-kit",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "Peassoft web UI kit for MNR web applications",
   "type": "module",
   "exports": {
@@ -21,9 +21,9 @@
     "extends @memnrev/browserslist-config"
   ],
   "devDependencies": {
-    "@babel/cli": "^7.22.15",
-    "@babel/core": "^7.22.17",
-    "@babel/preset-env": "^7.22.15",
+    "@babel/cli": "^8.0.4",
+    "@babel/core": "^8.0.1",
+    "@babel/preset-env": "^8.0.2",
     "@memnrev/browserslist-config": "^0.2.0",
     "@memnrev/eslint-v9-config": "^0.4.0",
     "@storybook/addon-a11y": "^10.1.4",
@@ -52,5 +52,9 @@
   "peerDependencies": {
     "react": ">= 19 < 20",
     "react-dom": ">= 19 < 20"
+  },
+  "allowScripts": {
+    "fsevents": true,
+    "esbuild": true
   }
 }