@worknice/whiteboard 0.38.0 → 0.39.0

package/dist/fields/NumberField.d.ts

@@ -9,5 +9,5 @@ type Props = ComponentProps<typeof NumberInput> & {
     labelFont?: LabelFontOption;
     required?: boolean;
 };
-declare const NumberField: ({ autoFocus, description, disabled, errors, id, label, labelFont, onChange, placeholder, required, value, prefix, suffix, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const NumberField: ({ autoFocus, decimalPlaces, description, disabled, errors, format, id, label, labelFont, maxLength, onChange, placeholder, required, value, prefix, suffix, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default NumberField;

package/dist/fields/NumberField.js

@@ -1,7 +1,7 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
 import * as __WEBPACK_EXTERNAL_MODULE__forms_RegularField_js_c54537ba__ from "../forms/RegularField.js";
 import * as __WEBPACK_EXTERNAL_MODULE__inputs_NumberInput_js_eaace22f__ from "../inputs/NumberInput.js";
-const NumberField = ({ autoFocus = false, description, disabled = false, errors, id, label, labelFont = "label", onChange, placeholder, required = false, value, prefix, suffix })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__forms_RegularField_js_c54537ba__["default"], {
+const NumberField = ({ autoFocus = false, decimalPlaces, description, disabled = false, errors, format, id, label, labelFont = "label", maxLength, onChange, placeholder, required = false, value, prefix, suffix })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__forms_RegularField_js_c54537ba__["default"], {
         description: description,
         errors: errors,
         inputId: id,
@@ -10,10 +10,13 @@ const NumberField = ({ autoFocus = false, description, disabled = false, errors,
         required: required,
         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__inputs_NumberInput_js_eaace22f__["default"], {
             autoFocus: autoFocus,
+            decimalPlaces: decimalPlaces,
             disabled: disabled,
+            format: format,
             id: id,
             value: value,
             onChange: onChange,
+            maxLength: maxLength,
             placeholder: placeholder,
             prefix: prefix,
             suffix: suffix

package/dist/inputs/NumberInput.d.ts

@@ -1,8 +1,10 @@
 import { type Dispatch } from "react";
 type Props = {
     autoFocus?: boolean;
+    decimalPlaces?: number;
     disabled?: boolean;
     id?: string;
+    format?: "integer" | "decimal";
     maxLength?: number;
     onChange: Dispatch<number | null>;
     placeholder?: string;
@@ -10,5 +12,5 @@ type Props = {
     prefix?: string;
     suffix?: string;
 };
-declare const NumberInput: ({ autoFocus, disabled, id, maxLength, onChange, placeholder, value, prefix, suffix, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const NumberInput: ({ autoFocus, decimalPlaces, disabled, id, format, maxLength, onChange, placeholder, value, prefix, suffix, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default NumberInput;

package/dist/inputs/NumberInput.js

@@ -4,14 +4,38 @@ import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
 import * as __WEBPACK_EXTERNAL_MODULE__NumberInput_module_js_5606faf2__ from "./NumberInput.module.js";
 const DEFAULT_MAX_LENGTH = 10;
 const MAXIMUM_MAX_LENGTH = 15;
-const NumberInput = ({ autoFocus = false, disabled, id, maxLength = DEFAULT_MAX_LENGTH, onChange, placeholder, value, prefix, suffix })=>{
+const INTEGER_REGEX = /^\d*$/;
+const NumberInput = ({ autoFocus = false, decimalPlaces, disabled, id, format = "integer", maxLength = DEFAULT_MAX_LENGTH, onChange, placeholder, value, prefix, suffix })=>{
     const ref = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
     const actualMaxLength = Math.min(maxLength, MAXIMUM_MAX_LENGTH);
+    const [displayValue, setDisplayValue] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(null === value ? "" : value.toString());
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
         if (autoFocus && ref.current) ref.current.focus();
     }, [
         autoFocus
     ]);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        setDisplayValue(null === value ? "" : value.toString());
+    }, [
+        value
+    ]);
+    const handleChange = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((event)=>{
+        const rawValue = event.target.value;
+        if ("decimal" === format) {
+            const partialPattern = void 0 !== decimalPlaces ? new RegExp(`^(\\d+(\\.\\d{0,${decimalPlaces}})?)?$`) : /^(\d+(\.\d*)?)?$/;
+            if (!partialPattern.test(rawValue)) return;
+        }
+        if ("integer" === format && !INTEGER_REGEX.test(rawValue)) return;
+        setDisplayValue(rawValue);
+        if (!rawValue) return onChange(null);
+        if ("decimal" === format) {
+            if (isValidDecimal(rawValue, decimalPlaces)) onChange(parseFloat(rawValue));
+        } else if (isValidInteger(rawValue)) onChange(parseInt(rawValue));
+    }, [
+        format,
+        decimalPlaces,
+        onChange
+    ]);
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
         className: __WEBPACK_EXTERNAL_MODULE__NumberInput_module_js_5606faf2__["default"].container,
         children: [
@@ -29,13 +53,11 @@ const NumberInput = ({ autoFocus = false, disabled, id, maxLength = DEFAULT_MAX_
                 disabled: disabled,
                 id: id,
                 maxLength: actualMaxLength,
-                onChange: (event)=>{
-                    onChange(event.target.value ? isValidInteger(event.target.value) ? parseInt(event.target.value) : null : null);
-                },
+                onChange: handleChange,
                 placeholder: placeholder,
                 type: "text",
-                value: null === value ? "" : value.toString(),
-                inputMode: "numeric"
+                value: displayValue,
+                inputMode: "decimal" === format ? "decimal" : "numeric"
             }),
             suffix ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
                 className: __WEBPACK_EXTERNAL_MODULE__NumberInput_module_js_5606faf2__["default"].suffix,
@@ -45,9 +67,14 @@ const NumberInput = ({ autoFocus = false, disabled, id, maxLength = DEFAULT_MAX_
     });
 };
 const isValidInteger = (str)=>{
-    if (!/^\d+$/.test(str)) return false;
+    if (!INTEGER_REGEX.test(str)) return false;
     const num = Number(str);
     return Number.isSafeInteger(num) && num >= 0;
 };
+const isValidDecimal = (str, decimalPlaces)=>{
+    const pattern = void 0 !== decimalPlaces ? new RegExp(`^\\d+(\\.\\d{0,${decimalPlaces}})?$`) : /^\d+(\.\d+)?$/;
+    if (!pattern.test(str)) return false;
+    return Number.isFinite(Number(str));
+};
 const NumberInput_rslib_entry_ = NumberInput;
 export { NumberInput_rslib_entry_ as default };

package/dist/presentation/LightweightTable.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import { type MenuButtonOption } from "../controls/MenuButton";
+type Props<Item> = {
+    items: Item[];
+    getItemId: (item: Item) => string;
+    itemToHref?: (item: Item) => string;
+    renderLeading?: (item: Item) => ReactNode;
+    Content: (props: {
+        item: Item;
+    }) => ReactNode;
+    renderTrailing?: (item: Item) => ReactNode;
+    rowActions?: (item: Item) => Array<MenuButtonOption | null>;
+    emptyState?: ReactNode;
+};
+declare const LightweightTable: <Item>({ items, getItemId, itemToHref, renderLeading, Content, renderTrailing, rowActions, emptyState, }: Props<Item>) => import("react/jsx-runtime").JSX.Element;
+export default LightweightTable;

package/dist/presentation/LightweightTable.js

@@ -0,0 +1,68 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__controls_MenuButton_js_b23cdd05__ from "../controls/MenuButton.js";
+import * as __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_47529181__ from "../utils/useNextContext.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__ from "./Icon.js";
+import * as __WEBPACK_EXTERNAL_MODULE__LightweightTable_module_js_15596fa6__ from "./LightweightTable.module.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Placeholder_js_b43af71f__ from "./Placeholder.js";
+const LightweightTable = ({ items, getItemId, itemToHref, renderLeading, Content, renderTrailing, rowActions, emptyState = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Placeholder_js_b43af71f__["default"], {
+    children: "No results"
+}) })=>{
+    const { Link } = (0, __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_47529181__["default"])();
+    if (0 === items.length) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        className: __WEBPACK_EXTERNAL_MODULE__LightweightTable_module_js_15596fa6__["default"].emptyState,
+        children: emptyState
+    });
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("ul", {
+        className: __WEBPACK_EXTERNAL_MODULE__LightweightTable_module_js_15596fa6__["default"].list,
+        children: items.map((item)=>{
+            const href = itemToHref?.(item);
+            const rowBody = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
+                children: [
+                    renderLeading ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                        className: __WEBPACK_EXTERNAL_MODULE__LightweightTable_module_js_15596fa6__["default"].leading,
+                        children: renderLeading(item)
+                    }) : null,
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                        className: __WEBPACK_EXTERNAL_MODULE__LightweightTable_module_js_15596fa6__["default"].main,
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Content, {
+                            item: item
+                        })
+                    }),
+                    renderTrailing ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                        className: __WEBPACK_EXTERNAL_MODULE__LightweightTable_module_js_15596fa6__["default"].trailing,
+                        children: renderTrailing ? renderTrailing(item) : null
+                    }) : null
+                ]
+            });
+            return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("li", {
+                className: __WEBPACK_EXTERNAL_MODULE__LightweightTable_module_js_15596fa6__["default"].item,
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                    className: __WEBPACK_EXTERNAL_MODULE__LightweightTable_module_js_15596fa6__["default"].rowContainer,
+                    children: [
+                        href ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Link, {
+                            className: `${__WEBPACK_EXTERNAL_MODULE__LightweightTable_module_js_15596fa6__["default"].row} ${__WEBPACK_EXTERNAL_MODULE__LightweightTable_module_js_15596fa6__["default"].link}`,
+                            href: href,
+                            children: rowBody
+                        }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                            className: __WEBPACK_EXTERNAL_MODULE__LightweightTable_module_js_15596fa6__["default"].row,
+                            children: rowBody
+                        }),
+                        rowActions ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                            className: __WEBPACK_EXTERNAL_MODULE__LightweightTable_module_js_15596fa6__["default"].rowAction,
+                            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_MenuButton_js_b23cdd05__["default"], {
+                                type: "ghost",
+                                size: "small",
+                                options: rowActions(item).filter((action)=>null !== action),
+                                icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
+                                    symbol: "Overflow"
+                                })
+                            })
+                        }) : null
+                    ]
+                })
+            }, getItemId(item));
+        })
+    });
+};
+const LightweightTable_rslib_entry_ = LightweightTable;
+export { LightweightTable_rslib_entry_ as default };

package/dist/presentation/LightweightTable.module.js

@@ -0,0 +1,14 @@
+import "./LightweightTable_module.css";
+const LightweightTable_module_rslib_entry_ = {
+    list: "list-E1CQI2",
+    item: "item-VbcWW0",
+    rowContainer: "rowContainer-sYzch8",
+    row: "row-pj1qr6",
+    link: "link-YrrPa1",
+    leading: "leading-lvOFvz",
+    main: "main-yvxuJs",
+    trailing: "trailing-EgnYr0",
+    rowAction: "rowAction-g1XoYD",
+    emptyState: "emptyState-UDJkMS"
+};
+export { LightweightTable_module_rslib_entry_ as default };

package/dist/presentation/LightweightTable_module.css

@@ -0,0 +1,103 @@
+.list-E1CQI2 {
+  background: var(--color-white);
+  border-radius: var(--size-n3);
+  border: solid var(--size-n5) var(--color-grey-t08);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  overflow: hidden;
+}
+
+.item-VbcWW0 {
+  border-top: solid var(--size-n5) var(--color-grey-t08);
+}
+
+.item-VbcWW0:first-child {
+  border-top: none;
+}
+
+.rowContainer-sYzch8 {
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: stretch;
+  width: 100%;
+  display: grid;
+}
+
+.row-pj1qr6 {
+  background-color: var(--color-white);
+  color: inherit;
+  align-items: center;
+  column-gap: var(--size-n1);
+  min-height: 72px;
+  padding: var(--size-00);
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  width: 100%;
+  text-decoration: none;
+  display: grid;
+}
+
+.link-YrrPa1 {
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  .link-YrrPa1:hover {
+    background-color: var(--color-grey-t10);
+  }
+}
+
+.row-pj1qr6:focus-visible {
+  outline: var(--size-n4) solid var(--color-purple-000);
+  outline-offset: calc(var(--size-n4) * -1);
+}
+
+.leading-lvOFvz {
+  align-items: center;
+  display: grid;
+}
+
+.main-yvxuJs {
+  min-width: 0;
+}
+
+.trailing-EgnYr0 {
+  align-items: center;
+  gap: var(--size-n2);
+  justify-content: flex-end;
+  min-width: max-content;
+  display: inline-flex;
+}
+
+.rowAction-g1XoYD {
+  padding-right: var(--size-00);
+  align-items: center;
+  display: grid;
+}
+
+.emptyState-UDJkMS {
+  padding: var(--size-00);
+}
+
+@media (max-width: 768px) {
+  .row-pj1qr6 {
+    align-items: start;
+    row-gap: var(--size-n2);
+    grid-template-columns: minmax(0, 1fr);
+    min-height: auto;
+  }
+
+  .leading-lvOFvz {
+    margin-bottom: var(--size-n3);
+  }
+
+  .trailing-EgnYr0 {
+    margin-top: var(--size-n3);
+    justify-content: flex-end;
+    width: 100%;
+  }
+
+  .rowAction-g1XoYD {
+    padding: var(--size-n2) var(--size-00) var(--size-00) 0;
+  }
+}
+

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@worknice/whiteboard",
   "description": "",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "license": "MIT",
   "private": false,
   "files": [
@@ -39,7 +39,7 @@
     "react-markdown": "^10.1.0",
     "utf8": "^3.0.0",
     "zod": "^4.1.13",
-    "@worknice/utils": "^0.21.0"
+    "@worknice/utils": "^0.22.0"
   },
   "devDependencies": {
     "@anolilab/semantic-release-pnpm": "^3.2.2",