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

package/dist/plain-select/icons.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from 'react';
+export declare function UncheckedIcon(): JSX.Element;
+export declare function CheckedIcon(): JSX.Element;

package/dist/plain-select/icons.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function UncheckedIcon() {
+  return _jsx("svg", {
+    width: '24',
+    height: '24',
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: '1',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    className: 'uikit_PlainSelect_icon uikit_PlainSelect_uncheckedIcon',
+    children: _jsx("rect", {
+      width: '18',
+      height: '18',
+      x: '3',
+      y: '3',
+      rx: '2'
+    })
+  });
+}
+export function CheckedIcon() {
+  return _jsxs("svg", {
+    width: '24',
+    height: '24',
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: '2',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    className: 'uikit_PlainSelect_icon uikit_PlainSelect_checkedIcon',
+    children: [_jsx("path", {
+      d: 'M21 10.656V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h12.344'
+    }), _jsx("path", {
+      d: 'm9 11 3 3L22 4'
+    })]
+  });
+}

package/dist/plain-select/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useId, useCallback, useState, useMemo, useLayoutEffect, createRef } from 'react';
 import './styles.css';
-import Icon from './icon.js';
+import { UncheckedIcon, CheckedIcon } from './icons.js';
 /**
  * Select element implementing Listbox pattern. Presents a list of options and allows
  * a user to select one or more of them.
@@ -177,9 +177,7 @@ export function PlainSelect(props) {
           tabIndex: multiple && currFocusedIdx === idx ? 0 : -1,
           onClick: () => handleItemClick(item.id),
           onKeyDown: multiple ? handleMultiSelectKeyDown : undefined,
-          children: [_jsx(Icon, {
-            selected: isSelected
-          }), _jsxs("div", {
+          children: [isSelected ? _jsx(CheckedIcon, {}) : _jsx(UncheckedIcon, {}), _jsxs("div", {
             className: 'uikit_PlainSelect_itemContent',
             children: [_jsx("div", {
               children: item.title

package/dist/plain-select/styles.css

@@ -1,11 +1,11 @@
 .uikit_PlainSelect_label {
   margin: 0;
-  color: #757575;
+  color: #737373;
 }
 
 @media (prefers-color-scheme: dark) {
   .uikit_PlainSelect_label {
-    color: #979797;
+    color: #acacac;
   }
 }
 
@@ -37,8 +37,12 @@
   flex-shrink: 0;
 }
 
-.uikit_PlainSelect_icon--hidden {
-  visibility: hidden;
+.uikit_PlainSelect_uncheckedIcon {
+  color: #767676;
+}
+
+.uikit_PlainSelect_checkedIcon {
+  color: #337e33;
 }
 
 .uikit_PlainSelect_itemContent {
@@ -51,6 +55,6 @@
 
 .uikit_PlainSelect_description {
   margin-top: 0.5em;
-  color: #757575;
+  color: #737373;
   font-size: 87.5%;
 }

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.3.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
   }
 }

package/dist/plain-select/icon.d.ts

@@ -1,6 +0,0 @@
-import type { JSX } from 'react';
-type Props = {
-    selected: boolean;
-};
-export default function Icon(props: Props): JSX.Element;
-export {};

package/dist/plain-select/icon.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function Icon(props) {
-  const {
-    selected
-  } = props;
-  const className = 'uikit_PlainSelect_icon' + (selected ? '' : ' uikit_PlainSelect_icon--hidden');
-  return _jsx("svg", {
-    className: className,
-    width: '24',
-    height: '24',
-    viewBox: '0 0 24 24',
-    children: _jsx("path", {
-      d: 'M9 16.172l10.594-10.594 1.406 1.406-12 12-5.578-5.578 1.406-1.406z',
-      fill: '#24b23e'
-    })
-  });
-}