@peassoft/mnr-web-ui-kit 0.1.0 → 0.1.2

package/dist/button-radio-group/styles.css

@@ -1,6 +1,6 @@
 .uikit_ButtonRadioGroup_label {
   margin: 0 0 0.5em;
-  color: #848484;
+  color: #757575;
 }
 
 .uikit_ButtonRadioGroup_cont {

package/dist/input-field/index.d.ts

@@ -7,6 +7,8 @@ type Props = {
     label: string;
     /** autocomplete attribute */
     autocompleteAttribute?: string;
+    /** disabled attribule */
+    disabled?: boolean;
     /** Width in any CSS length value */
     width?: string;
     /** Error message */
@@ -15,7 +17,13 @@ type Props = {
     value: string;
     /** Ref */
     ref?: React.RefObject<HTMLInputElement | null>;
-    /** onChange callback */
+    /**
+     * onChange callback
+     *
+     * For disabled state (when passing `disabled` attribute), pass a noop function
+     * (like, `() => {}`) to prevent React's warnings about controlled components
+     * (with `value` prop) having no `onChange` handler.
+     */
     onChange: (newValue: string) => unknown;
     /** Optional handler of Tab key press */
     onTab?: () => unknown;

package/dist/input-field/index.js

@@ -7,6 +7,7 @@ export function InputField(props) {
     type = 'text',
     label,
     autocompleteAttribute,
+    disabled = false,
     width = '100%',
     errorMessage,
     value,
@@ -59,6 +60,7 @@ export function InputField(props) {
         className: 'uikit_InputField_input',
         type: type,
         autoComplete: autocompleteAttribute,
+        disabled: disabled,
         value: value,
         onChange: handleChange,
         onKeyDown: handleKeyDown,

package/dist/input-field/styles.css

@@ -11,7 +11,7 @@
 .uikit_InputField_label {
   display: block;
   margin-bottom: 0.25em;
-  color: #848484;
+  color: #757575;
   width: 100%;
 }
 
@@ -28,6 +28,11 @@
   font-family: inherit;
 }
 
+.uikit_InputField_input:disabled {
+  color: #848484;
+  background-color: #efefef;
+}
+
 .uikit_InputField_capslockMsg {
   display: flex;
   gap: .5em;

package/dist/plain-select/styles.css

@@ -1,6 +1,6 @@
 .uikit_PlainSelect_label {
   margin: 0;
-  color: #848484;
+  color: #757575;
 }
 
 .uikit_PlainSelect_cont {
@@ -36,6 +36,6 @@
 
 .uikit_PlainSelect_description {
   margin-top: 0.5em;
-  color: #848484;
+  color: #757575;
   font-size: 87.5%;
 }

package/dist/select/index.d.ts

@@ -0,0 +1,35 @@
+import { type JSX } from 'react';
+import './styles.css';
+export type SelectItem = {
+    id: string;
+    value: string;
+};
+type Props = {
+    /** Label */
+    label: string;
+    /** Width in any CSS length value */
+    width?: string;
+    /** Error message */
+    errorMessage?: string;
+    /** Collection of items */
+    items: SelectItem[];
+    /** Controlled selected item ID */
+    selectedItemId: string | null;
+    /** Ref */
+    ref?: React.RefObject<HTMLSelectElement | null>;
+    /** onChange callback */
+    onChange: (id: string) => unknown;
+    /** Optional handler of Tab key press */
+    onTab?: () => unknown;
+    /** Optional handler of Shift + Tab key press */
+    onShiftTab?: () => unknown;
+    /** Optional handler of the input onBlur event */
+    onBlur?: () => unknown;
+};
+/**
+ * Select component.
+ *
+ * Can only be used in controlled mode.
+ */
+export declare function Select(props: Props): JSX.Element;
+export {};

package/dist/select/index.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import './styles.css';
+import processKeyDown from './process-key-down.js';
+/**
+ * Select component.
+ *
+ * Can only be used in controlled mode.
+ */
+export function Select(props) {
+  const {
+    label,
+    width = '100%',
+    errorMessage,
+    items,
+    selectedItemId,
+    ref,
+    onChange,
+    onTab,
+    onShiftTab,
+    onBlur
+  } = props;
+  const handleChange = useCallback(e => {
+    onChange(e.target.value);
+  }, [onChange]);
+  const handleKeyDown = useCallback(e => processKeyDown(e, onTab, onShiftTab, onBlur), [onTab, onShiftTab, onBlur]);
+  return _jsxs("div", {
+    className: 'uikit_Select_cont',
+    style: {
+      width
+    },
+    children: [_jsxs("label", {
+      className: 'uikit_Select_innerCont',
+      children: [_jsx("span", {
+        className: 'uikit_Select_label',
+        children: label
+      }), _jsxs("div", {
+        className: 'uikit_Select_selectCont',
+        children: [_jsxs("select", {
+          ref: ref,
+          className: 'uikit_Select_input',
+          value: selectedItemId ?? undefined,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown,
+          onBlur: onBlur || undefined,
+          children: [selectedItemId == null && _jsx("option", {}), items.map(item => _jsx("option", {
+            value: item.id,
+            children: item.value
+          }, item.id))]
+        }), _jsx("div", {
+          className: 'uikit_Select_arrowCont',
+          children: _jsx("svg", {
+            width: '24',
+            height: '24',
+            viewBox: '0 0 24 24',
+            children: _jsx("path", {
+              d: 'M7.406 8.578l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'
+            })
+          })
+        })]
+      })]
+    }), !!errorMessage && _jsx("div", {
+      className: 'uikit_Select_errorMsg',
+      children: errorMessage
+    })]
+  });
+}

package/dist/select/process-key-down.d.ts

@@ -0,0 +1,2 @@
+export declare const TAB_KEYCODE = 9;
+export default function processKeyDown(e: Pick<React.KeyboardEvent, 'which' | 'shiftKey' | 'preventDefault'>, onTab: (() => unknown) | undefined, onShiftTab: (() => unknown) | undefined, onBlur: (() => unknown) | undefined): void;

package/dist/select/process-key-down.js

@@ -0,0 +1,14 @@
+export const TAB_KEYCODE = 9;
+export default function processKeyDown(e, onTab, onShiftTab, onBlur) {
+  if (e.which === TAB_KEYCODE && onTab && !e.shiftKey) {
+    e.preventDefault();
+    onTab();
+    if (onBlur) onBlur();
+    return;
+  }
+  if (e.which === TAB_KEYCODE && onShiftTab && e.shiftKey) {
+    e.preventDefault();
+    onShiftTab();
+    if (onBlur) onBlur();
+  }
+}

package/dist/select/styles.css

@@ -0,0 +1,49 @@
+.uikit_Select_cont:not(:first-child) {
+  margin-top: 1.5em;
+}
+
+.uikit_Select_innerCont {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.uikit_Select_label {
+  display: block;
+  margin-bottom: 0.25em;
+  color: #757575;
+  width: 100%;
+}
+
+.uikit_Select_selectCont {
+  position: relative;
+}
+
+.uikit_Select_input {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid #bcbcbc;
+  border-radius: 5px;
+  font-size: 1.2em;
+  padding: 0.5em 2.5em 0.5em 1em;
+  color: #242629;
+  background-color: #fff;
+  font-family: inherit;
+  appearance: none;
+}
+
+.uikit_Select_arrowCont {
+  position: absolute;
+  top: 0;
+  right: 0.5em;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+}
+
+.uikit_Select_errorMsg {
+  color: #a7241b;
+  font-size: 0.85rem;
+  margin-top: 0.2em;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peassoft/mnr-web-ui-kit",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Peassoft web UI kit for MNR web applications",
   "type": "module",
   "exports": {
@@ -47,6 +47,7 @@
     "@babel/preset-env": "^7.22.15",
     "@memnrev/browserslist-config": "^0.1.0",
     "@memnrev/eslint-v9-config": "^0.1.1",
+    "@storybook/addon-a11y": "^8.5.4",
     "@storybook/addon-essentials": "^8.0.5",
     "@storybook/addon-interactions": "^8.0.5",
     "@storybook/addon-links": "^8.0.5",