@powerhousedao/design-system 1.39.12-dev.0 → 1.39.12-dev.1

package/dist/src/scalars/components/fragments/id-autocomplete/id-autocomplete-list-option.js

@@ -39,7 +39,7 @@ const IdAutocompleteListOption = ({ variant = "withValue", icon, title = "Title
                 typeof extraProps.agentType === "string" && (_jsx("div", { className: cn("flex max-w-full items-center justify-end"), children: _jsx("span", { className: cn("truncate text-xs leading-5", asPlaceholder
                         ? "text-gray-400 dark:text-gray-700"
                         : "text-gray-500 dark:text-gray-600"), children: extraProps.agentType }) }))] }));
-    return (_jsxs("div", { className: cn("max-w-full rounded-md bg-transparent px-3 pb-2", variant === "withValue" ? "pt-2" : "pt-3", className), children: [variant === "withValue" && renderWithValue(), variant === "withValueAndTitle" &&
+    return (_jsxs("div", { className: cn("w-full max-w-full rounded-md bg-transparent px-3 pb-2", variant === "withValue" ? "pt-2" : "pt-3", className), children: [variant === "withValue" && renderWithValue(), variant === "withValueAndTitle" &&
                 renderWithValueTitleAndDescription(false), variant === "withValueTitleAndDescription" &&
                 renderWithValueTitleAndDescription()] }));
 };

package/dist/src/scalars/components/time-picker-field/time-picker-field-validations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time-picker-field-validations.d.ts","sourceRoot":"","sources":["../../../../../src/scalars/components/time-picker-field/time-picker-field-validations.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC;AAQ/C,eAAO,MAAM,kBAAkB,GAC5B,gBAAgB,cAAc,MAC9B,OAAO,OAAO,kNA2Cd,CAAC"}
+{"version":3,"file":"time-picker-field-validations.d.ts","sourceRoot":"","sources":["../../../../../src/scalars/components/time-picker-field/time-picker-field-validations.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC;AAU/C,eAAO,MAAM,kBAAkB,GAC5B,gBAAgB,cAAc,MAC9B,OAAO,OAAO,kNAgDd,CAAC"}

package/dist/src/scalars/components/time-picker-field/time-picker-field-validations.js

@@ -1,4 +1,4 @@
-import { convert24hTo12h, getTime, isFormatTimeAllowed, TIME_PATTERNS, } from "../../../ui/components/data-entry/time-picker/utils.js";
+import { convert24hTo12h, getHoursAndMinutesFromValue, getTime, isFormatTimeAllowed, isValidTimeFromValue, TIME_PATTERNS, } from "../../../ui/components/data-entry/time-picker/utils.js";
 export const validateTimePicker = ({ timeFormat }) => (value) => {
     if (value === "") {
         return true;
@@ -6,6 +6,10 @@ export const validateTimePicker = ({ timeFormat }) => (value) => {
     if (value === undefined) {
         return true;
     }
+    const getHoursAndMinutes = getHoursAndMinutesFromValue(value);
+    if (!isValidTimeFromValue(getHoursAndMinutes)) {
+        return "Invalid time. Please enter time a valid format";
+    }
     // Validate the format of the value
     const time = getTime(value.trim());
     if (!timeFormat) {

package/dist/src/ui/components/data-entry/time-picker/use-time-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-time-picker.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/data-entry/time-picker/use-time-picker.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,UAAU,EAAE,MAAM,WAAW,CAAC;AAiBjE,eAAO,MAAM,0BAA0B,GAAI,MAAM,MAAM,WAKtD,CAAC;AACF,UAAU,oBAAoB;IAC5B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,YAAY,CAAC,EAAE,cAAc,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa,GAAI,uHAU3B,oBAAoB;;;;;;;;;;2BA+BS,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;oBAI1C,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC;;;;;;CAmK1D,CAAC"}
+{"version":3,"file":"use-time-picker.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/data-entry/time-picker/use-time-picker.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,UAAU,EAAE,MAAM,WAAW,CAAC;AAiBjE,eAAO,MAAM,0BAA0B,GAAI,MAAM,MAAM,WAKtD,CAAC;AACF,UAAU,oBAAoB;IAC5B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,YAAY,CAAC,EAAE,cAAc,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa,GAAI,uHAU3B,oBAAoB;;;;;;;;;;2BA+BS,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;oBAI1C,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC;;;;;;CAgJ1D,CAAC"}

package/dist/src/ui/components/data-entry/time-picker/use-time-picker.js

@@ -31,30 +31,10 @@ export const useTimePicker = ({ value, defaultValue, onChange, onBlur, timeForma
         const input = e.target.value;
         // Get the period from the input if exists to avoid use the default period
         const inputPeriod = input.split(" ")[1];
-        if (!isValidTimeInput(input)) {
-            if (input === "") {
-                setInputValue(input);
-                onChange?.(createChangeEvent(""));
-                onBlur?.(createBlurEvent(""));
-                return;
-            }
-            // Create an empty but valid time value that matches the format expected by the value prop
-            const inValid = formatInputsToValueFormat("", "", "±00:00");
-            setInputValue(input);
-            onChange?.(createChangeEvent(inValid));
-            onBlur?.(createBlurEvent(input));
-            return;
-        }
         const validDisplay = formatInputToDisplayValid(input, is12HourFormat, timeIntervals, inputPeriod);
-        // Check if the validDisplay is empty and if it is, set the inputValue to an empty string
-        if (!validDisplay) {
-            setInputValue("");
-            onChange?.(createChangeEvent(""));
-            onBlur?.(createBlurEvent(""));
-            return;
-        }
-        setInputValue(validDisplay);
-        const validValue = convert12hTo24h(validDisplay);
+        const valueForInput = isValidTimeInput(input) ? validDisplay : input;
+        setInputValue(valueForInput);
+        const validValue = convert12hTo24h(valueForInput);
         const { minutes, hours, period } = getHoursAndMinutes(validValue);
         const offsetUTC = getOffset(selectedTimeZone);
         if (is12HourFormat) {

package/dist/src/ui/components/data-entry/time-picker/utils.d.ts

@@ -192,4 +192,16 @@ export declare const getHoursAndMinutes: (input: string) => {
     period: string | undefined;
 };
 export declare const handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+/**
+ * Validates if a string has the hh:mm format and represents a valid time.
+ * @param {string} timeString - The string to validate.
+ * @returns {boolean} - Returns true if the string is valid, false otherwise.
+ */
+export declare const isValidTimeFromValue: (timeString: string) => boolean;
+/**
+ * Extracts hours and minutes from a time string value.
+ * @param {string} timeString - The time string to process.
+ * @returns {string} - Returns the time in hh:mm format if valid, empty string otherwise.
+ */
+export declare const getHoursAndMinutesFromValue: (timeString: string) => string;
 //# sourceMappingURL=utils.d.ts.map

package/dist/src/ui/components/data-entry/time-picker/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/data-entry/time-picker/utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,WAAW,CAAC;AAE5C,eAAO,MAAM,iBAAiB,GAC5B,OAAO,MAAM,KACZ,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAYpC,CAAC;AAEF,eAAO,MAAM,oBAAoB,UAAkC,CAAC;AACpE,eAAO,MAAM,mBAAmB,GAAI,QAAQ,MAAM,KAAG,OAEpD,CAAC;AACF,eAAO,MAAM,aAAa;IACxB,uEAAuE;;IAEvE,uEAAuE;;CAE/D,CAAC;AAEX,eAAO,MAAM,SAAS,GAAI,MAAM,MAAM,WAErC,CAAC;AACF;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO,MAAM,WAM5C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,OAAO,MAAM,WAIpC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,QAAQ,MAAM,EAAE,UAAU,MAAM,KAAG,MAa9D,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,GAC7B,OAAO,MAAM,EACb,gBAAgB,OAAO,EACvB,iBAAY,EACZ,gBAAgB,UAAU,KACzB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,UAAU,CAAA;CA2DrD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,GAAI,OAAO,MAAM,KAAG,OAmBhD,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,GAAI,WAAW,MAAM,WAOnD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,UAAU,GAAI,0BAAwB;;;GAWlD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,WAAW,MAAM;;;;CAW9C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,WAAW,MAAM,WAGzC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,UAAU,GAAI,WAAW,MAAM,WAG3C,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,WAAW,MAAM,WAK9C,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,GAAI,UAAU,MAAM,WAG1C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,WAAW,MAAM,KAAG,MAQ/C,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,yBAAyB,GACpC,OAAO,MAAM,EACb,SAAS,MAAM,EACf,gBAAgB,MAAM,KACrB,MAIF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO,MAAM,WAa5C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,yBAAyB,GACpC,OAAO,MAAM,EACb,gBAAgB,OAAO,EACvB,gBAAgB,MAAM,EACtB,gBAAgB,UAAU,WAY3B,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,kBAAkB,GAAI,OAAO,MAAM;;;;CAO/C,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,SA+BrE,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/data-entry/time-picker/utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,WAAW,CAAC;AAE5C,eAAO,MAAM,iBAAiB,GAC5B,OAAO,MAAM,KACZ,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAYpC,CAAC;AAEF,eAAO,MAAM,oBAAoB,UAAkC,CAAC;AACpE,eAAO,MAAM,mBAAmB,GAAI,QAAQ,MAAM,KAAG,OAEpD,CAAC;AACF,eAAO,MAAM,aAAa;IACxB,uEAAuE;;IAEvE,uEAAuE;;CAE/D,CAAC;AAEX,eAAO,MAAM,SAAS,GAAI,MAAM,MAAM,WAErC,CAAC;AACF;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO,MAAM,WAM5C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,OAAO,MAAM,WAIpC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,QAAQ,MAAM,EAAE,UAAU,MAAM,KAAG,MAa9D,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,GAC7B,OAAO,MAAM,EACb,gBAAgB,OAAO,EACvB,iBAAY,EACZ,gBAAgB,UAAU,KACzB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,UAAU,CAAA;CA2DrD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,GAAI,OAAO,MAAM,KAAG,OAuChD,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,GAAI,WAAW,MAAM,WAOnD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,UAAU,GAAI,0BAAwB;;;GAWlD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,WAAW,MAAM;;;;CAW9C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,WAAW,MAAM,WAGzC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,UAAU,GAAI,WAAW,MAAM,WAG3C,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,WAAW,MAAM,WAK9C,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,GAAI,UAAU,MAAM,WAG1C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,WAAW,MAAM,KAAG,MAQ/C,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,yBAAyB,GACpC,OAAO,MAAM,EACb,SAAS,MAAM,EACf,gBAAgB,MAAM,KACrB,MAIF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO,MAAM,WAa5C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,yBAAyB,GACpC,OAAO,MAAM,EACb,gBAAgB,OAAO,EACvB,gBAAgB,MAAM,EACtB,gBAAgB,UAAU,WAY3B,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,kBAAkB,GAAI,OAAO,MAAM;;;;CA4B/C,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,SA+BrE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAAI,YAAY,MAAM,YAItD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,GAAI,YAAY,MAAM,WAI7D,CAAC"}

package/dist/src/ui/components/data-entry/time-picker/utils.js

@@ -16,7 +16,7 @@ export const isFormatTimeAllowed = (format) => {
 };
 export const TIME_PATTERNS = {
     /** Matches times in 24-hour format (HH:mm) like: 0:00, 09:30, 23:59 */
-    HOURS_24: /^([0-9]|0[0-9]|1[0-9]|2[0-3]):([0-5][0-9])$/,
+    HOURS_24: /^([0-1][0-9]|2[0-3]):([0-5][0-9])$/,
     /** Matches times in 12-hour format (h:mm a) like: 1:00 AM, 12:59 PM */
     HOURS_12: /^(0?[1-9]|1[0-2]):([0-5][0-9])\s(AM|PM|am|pm)$/,
 };
@@ -150,7 +150,27 @@ export const isValidTimeInput = (input) => {
     input = input.trim();
     // Allow change the format and convert the time
     if (input.includes(":")) {
-        return (TIME_PATTERNS.HOURS_12.test(input) || TIME_PATTERNS.HOURS_24.test(input));
+        // Must be exactly 5 characters for 24h format
+        if (input.length !== 5) {
+            return false;
+        }
+        // Split into hours and minutes
+        const [hours, minutes] = input.split(":");
+        // Hours and minutes must be numbers
+        const hoursNum = parseInt(hours, 10);
+        const minutesNum = parseInt(minutes, 10);
+        if (isNaN(hoursNum) || isNaN(minutesNum))
+            return false;
+        // Hours must be between 0 and 23
+        if (hoursNum < 0 || hoursNum > 23)
+            return false;
+        // Minutes must be between 0 and 59
+        if (minutesNum < 0 || minutesNum > 59)
+            return false;
+        // Minutes must be exactly 2 digits
+        if (minutes.length !== 2)
+            return false;
+        return true;
     }
     else {
         // "For digits, expect 3 or 4 characters and validate they're in range".
@@ -377,9 +397,32 @@ export const formatInputToDisplayValid = (input, is12HourFormat, timeIntervals,
 export const getHoursAndMinutes = (input) => {
     if (!input)
         return { hours: "", minutes: "", period: undefined };
-    const [hours, minutes] = input.split(":");
-    const period = input.includes("AM") || input.includes("PM") ? input.slice(-2) : undefined;
-    return { hours, minutes, period };
+    if (input.includes(":")) {
+        const [hours, minutes] = input.split(":");
+        const period = input.includes("AM") || input.includes("PM")
+            ? input.slice(-2)
+            : undefined;
+        return { hours, minutes, period };
+    }
+    else {
+        // Handle short format (e.g., "1430" -> "14:30")
+        if (input.length === 3) {
+            return {
+                hours: input.slice(0, 1),
+                minutes: input.slice(1, 3),
+                period: undefined,
+            };
+        }
+        else if (input.length === 4) {
+            return {
+                hours: input.slice(0, 2),
+                minutes: input.slice(2, 4),
+                period: undefined,
+            };
+        }
+        // Return and invalid value as cannot be a value time
+        return { hours: "", minutes: "", period: undefined };
+    }
 };
 export const handleKeyDown = (e) => {
     // Allow control keys (backspace, delete, arrows, etc)
@@ -409,3 +452,23 @@ export const handleKeyDown = (e) => {
     }
     e.preventDefault();
 };
+/**
+ * Validates if a string has the hh:mm format and represents a valid time.
+ * @param {string} timeString - The string to validate.
+ * @returns {boolean} - Returns true if the string is valid, false otherwise.
+ */
+export const isValidTimeFromValue = (timeString) => {
+    // Regular expression to validate the hh:mm format
+    const regex = /^([01]?\d|2[0-3]):[0-5]\d$/;
+    return regex.test(timeString);
+};
+/**
+ * Extracts hours and minutes from a time string value.
+ * @param {string} timeString - The time string to process.
+ * @returns {string} - Returns the time in hh:mm format if valid, empty string otherwise.
+ */
+export const getHoursAndMinutesFromValue = (timeString) => {
+    // Captures everything up to the second ':' regardless of the number of digits in the hour
+    const match = /^([^:]+:\d{2,})/.exec(timeString);
+    return match ? match[1] : "";
+};

package/dist/src/ui/components/object-set-table/hooks/useGlobalTableKeyEvents.d.ts

@@ -0,0 +1,3 @@
+declare const useGlobalTableKeyEvents: () => void;
+export { useGlobalTableKeyEvents };
+//# sourceMappingURL=useGlobalTableKeyEvents.d.ts.map

package/dist/src/ui/components/object-set-table/hooks/useGlobalTableKeyEvents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGlobalTableKeyEvents.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/object-set-table/hooks/useGlobalTableKeyEvents.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,uBAAuB,YAmD5B,CAAC;AAEF,OAAO,EAAE,uBAAuB,EAAE,CAAC"}

package/dist/src/ui/components/object-set-table/hooks/useGlobalTableKeyEvents.js

@@ -0,0 +1,47 @@
+import { useEffect } from "react";
+import { useInternalTableState } from "../subcomponents/table-provider/table-provider.js";
+import { getDirectionFromKey, getNextSelectedCell } from "../utils.js";
+const useGlobalTableKeyEvents = () => {
+    const { api } = useInternalTableState();
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            const isEditing = api.isEditing();
+            const selectedCell = api._getState().selectedCellIndex;
+            if (isEditing) {
+                if (e.key === "Enter") {
+                    api.exitCellEditMode(true);
+                }
+                if (e.key === "Escape" && !!selectedCell) {
+                    api.exitCellEditMode(false);
+                }
+            }
+            else {
+                if (e.key === "Enter" &&
+                    !!selectedCell &&
+                    api.canEditCell(selectedCell.row, selectedCell.column)) {
+                    api.enterCellEditMode(selectedCell.row, selectedCell.column);
+                }
+                // arrow keys
+                if (["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp", "Tab"].includes(e.key)) {
+                    const direction = getDirectionFromKey(e.key);
+                    const nextCell = getNextSelectedCell({
+                        direction,
+                        currentCell: selectedCell,
+                        rowCount: api._getState().data.length,
+                        columnCount: api._getConfig().columns.length,
+                        moveToNextRow: e.key === "Tab",
+                    });
+                    if (e.key === "Tab") {
+                        e.preventDefault();
+                    }
+                    api.selection.selectCell(nextCell.row, nextCell.column);
+                }
+            }
+        };
+        api._getTable()?.addEventListener("keydown", handleKeyDown);
+        return () => {
+            api._getTable()?.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [api]);
+};
+export { useGlobalTableKeyEvents };

package/dist/src/ui/components/object-set-table/logic/selection-manager.d.ts

@@ -0,0 +1,49 @@
+import type { TableApi } from "./table-api.js";
+declare class SelectionManager<TData> {
+    private api;
+    constructor(api: TableApi<TData>);
+    /**
+     * Checks if the table allows row selection
+     */
+    canSelectRows(): boolean | undefined;
+    /**
+     * Checks if the table allows cell selection
+     */
+    canSelectCells(): boolean | undefined;
+    /**
+     * Clears the selection of the table
+     */
+    clear(): void;
+    /**
+     * Selects a single row in the table. Only one row can be selected at a time.
+     *
+     * @param rowIndex - The index of the row to select
+     */
+    selectRow(rowIndex: number): void;
+    /**
+     * Toggles the selection of a row in the table.
+     *
+     * @param rowIndex - The index of the row to toggle
+     */
+    toggleRow(rowIndex: number): void;
+    /**
+     * Selects a range of rows from the last active row to the given row index.
+     *
+     * @param rowIndex - The index of the row to select from
+     */
+    selectFromLastActiveRow(rowIndex: number): void;
+    /**
+     * Selects all rows in the table.
+     */
+    selectAllRows(): void;
+    toggleSelectAll(): void;
+    /**
+     * Selects a cell in the table.
+     *
+     * @param rowIndex - The index of the row to select
+     * @param columnIndex - The index of the column to select
+     */
+    selectCell(rowIndex: number, columnIndex: number): void;
+}
+export { SelectionManager };
+//# sourceMappingURL=selection-manager.d.ts.map

package/dist/src/ui/components/object-set-table/logic/selection-manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-manager.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/object-set-table/logic/selection-manager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,cAAM,gBAAgB,CAAC,KAAK;IACd,OAAO,CAAC,GAAG;gBAAH,GAAG,EAAE,QAAQ,CAAC,KAAK,CAAC;IAExC;;OAEG;IACH,aAAa;IAIb;;OAEG;IACH,cAAc;IAId;;OAEG;IACH,KAAK;IAIL;;;;OAIG;IACH,SAAS,CAAC,QAAQ,EAAE,MAAM;IAS1B;;;;OAIG;IACH,SAAS,CAAC,QAAQ,EAAE,MAAM;IAS1B;;;;OAIG;IACH,uBAAuB,CAAC,QAAQ,EAAE,MAAM;IASxC;;OAEG;IACH,aAAa;IASb,eAAe;IAQf;;;;;OAKG;IACH,UAAU,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM;CAQjD;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/src/ui/components/object-set-table/logic/selection-manager.js

@@ -0,0 +1,96 @@
+class SelectionManager {
+    api;
+    constructor(api) {
+        this.api = api;
+    }
+    /**
+     * Checks if the table allows row selection
+     */
+    canSelectRows() {
+        return this.api._getConfig().allowRowSelection;
+    }
+    /**
+     * Checks if the table allows cell selection
+     */
+    canSelectCells() {
+        return this.api._getConfig().allowRowSelection;
+    }
+    /**
+     * Clears the selection of the table
+     */
+    clear() {
+        this.api._getState().dispatch?.({ type: "SELECT_CELL", payload: null });
+    }
+    /**
+     * Selects a single row in the table. Only one row can be selected at a time.
+     *
+     * @param rowIndex - The index of the row to select
+     */
+    selectRow(rowIndex) {
+        if (!this.canSelectRows())
+            return;
+        this.api._getState().dispatch?.({
+            type: "TOGGLE_SELECTED_ROW",
+            payload: { index: rowIndex, clearOtherSelections: true },
+        });
+    }
+    /**
+     * Toggles the selection of a row in the table.
+     *
+     * @param rowIndex - The index of the row to toggle
+     */
+    toggleRow(rowIndex) {
+        if (!this.canSelectRows())
+            return;
+        this.api._getState().dispatch?.({
+            type: "TOGGLE_SELECTED_ROW",
+            payload: { index: rowIndex },
+        });
+    }
+    /**
+     * Selects a range of rows from the last active row to the given row index.
+     *
+     * @param rowIndex - The index of the row to select from
+     */
+    selectFromLastActiveRow(rowIndex) {
+        if (!this.canSelectRows())
+            return;
+        this.api._getState().dispatch?.({
+            type: "SELECT_ROW_RANGE",
+            payload: rowIndex,
+        });
+    }
+    /**
+     * Selects all rows in the table.
+     */
+    selectAllRows() {
+        if (!this.canSelectRows())
+            return;
+        this.api._getState().dispatch?.({
+            type: "SELECT_ROW_RANGE",
+            payload: this.api._getState().data.length - 1,
+        });
+    }
+    toggleSelectAll() {
+        if (!this.canSelectRows())
+            return;
+        this.api._getState().dispatch?.({
+            type: "TOGGLE_SELECT_ALL_ROWS",
+        });
+    }
+    /**
+     * Selects a cell in the table.
+     *
+     * @param rowIndex - The index of the row to select
+     * @param columnIndex - The index of the column to select
+     */
+    selectCell(rowIndex, columnIndex) {
+        if (!this.canSelectCells())
+            return;
+        this.api._getState().dispatch?.({
+            type: "SELECT_CELL",
+            payload: { row: rowIndex, column: columnIndex },
+        });
+    }
+}
+export { SelectionManager };

package/dist/src/ui/components/object-set-table/logic/table-api.d.ts

@@ -0,0 +1,52 @@
+import type { RefObject } from "react";
+import type { TableState } from "../subcomponents/table-provider/table-reducer.js";
+import type { CellContext, ObjectSetTableConfig } from "../types.js";
+import { SelectionManager } from "./selection-manager.js";
+declare class TableApi<TData> {
+    private readonly tableRef;
+    private readonly configRef;
+    private readonly stateRef;
+    readonly selection: SelectionManager<TData>;
+    constructor(tableRef: RefObject<HTMLTableElement>, configRef: RefObject<ObjectSetTableConfig<TData>>, stateRef: RefObject<TableState<TData>>);
+    _getTable(): HTMLTableElement | null;
+    _getConfig(): ObjectSetTableConfig<TData>;
+    _getState(): TableState<TData>;
+    _createCellContext(row: number, column: number): CellContext<TData>;
+    /**
+     * Checks if the cell at the given row and column can be edited
+     *
+     * @param row - The row index of the cell to check
+     * @param column - The column index of the cell to check
+     * @returns `true` if the cell can be edited, `false` otherwise
+     */
+    canEditCell(row: number, column: number): boolean | undefined;
+    /**
+     * Checks if the table is currently in cell edit mode
+     *
+     * @returns `true` if the table is in cell edit mode, `false` otherwise
+     */
+    isEditing(): boolean;
+    /**
+     * Checks if the table is currently in cell edit mode for the given cell
+     *
+     * @param row - The row index of the cell to check
+     * @param column - The column index of the cell to check
+     * @returns `true` if the table is in cell edit mode for the given cell, `false` otherwise
+     */
+    isEditingCell(row: number, column: number): boolean;
+    /**
+     * Enters cell edit mode for the given cell
+     *
+     * @param row - The row index of the cell to enter edit mode
+     * @param column - The column index of the cell to enter edit mode
+     */
+    enterCellEditMode(row: number, column: number): void;
+    /**
+     * Exits cell edit mode
+     *
+     * @param save - Whether to save the changes made in the cell
+     */
+    exitCellEditMode(save?: boolean): void;
+}
+export { TableApi };
+//# sourceMappingURL=table-api.d.ts.map

package/dist/src/ui/components/object-set-table/logic/table-api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-api.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/object-set-table/logic/table-api.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kDAAkD,CAAC;AACnF,OAAO,KAAK,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAErE,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE1D,cAAM,QAAQ,CAAC,KAAK;IAIhB,OAAO,CAAC,QAAQ,CAAC,QAAQ;IACzB,OAAO,CAAC,QAAQ,CAAC,SAAS;IAC1B,OAAO,CAAC,QAAQ,CAAC,QAAQ;IAL3B,SAAgB,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAC;gBAGhC,QAAQ,EAAE,SAAS,CAAC,gBAAgB,CAAC,EACrC,SAAS,EAAE,SAAS,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC,EACjD,QAAQ,EAAE,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;IAKzD,SAAS,IAAI,gBAAgB,GAAG,IAAI;IAIpC,UAAU,IAAI,oBAAoB,CAAC,KAAK,CAAC;IAIzC,SAAS,IAAI,UAAU,CAAC,KAAK,CAAC;IAI9B,kBAAkB,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,WAAW,CAAC,KAAK,CAAC;IAWnE;;;;;;OAMG;IACH,WAAW,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;IAIvC;;;;OAIG;IACH,SAAS;IAIT;;;;;;OAMG;IACH,aAAa,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;IAQzC;;;;;OAKG;IACH,iBAAiB,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;IAS7C;;;;OAIG;IACH,gBAAgB,CAAC,IAAI,UAAO;CAgC7B;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/src/ui/components/object-set-table/logic/table-api.js

@@ -0,0 +1,104 @@
+import { getNextSelectedCell } from "../utils.js";
+import { SelectionManager } from "./selection-manager.js";
+class TableApi {
+    tableRef;
+    configRef;
+    stateRef;
+    selection;
+    constructor(tableRef, configRef, stateRef) {
+        this.tableRef = tableRef;
+        this.configRef = configRef;
+        this.stateRef = stateRef;
+        this.selection = new SelectionManager(this);
+    }
+    _getTable() {
+        return this.tableRef.current;
+    }
+    _getConfig() {
+        return this.configRef.current;
+    }
+    _getState() {
+        return this.stateRef.current;
+    }
+    _createCellContext(row, column) {
+        return {
+            row: this._getState().data[row],
+            column: this._getConfig().columns[column],
+            rowIndex: row,
+            columnIndex: column,
+            tableConfig: this._getConfig(),
+        };
+    }
+    // cell editing
+    /**
+     * Checks if the cell at the given row and column can be edited
+     *
+     * @param row - The row index of the cell to check
+     * @param column - The column index of the cell to check
+     * @returns `true` if the cell can be edited, `false` otherwise
+     */
+    canEditCell(row, column) {
+        return this._getConfig().columns[column].editable;
+    }
+    /**
+     * Checks if the table is currently in cell edit mode
+     *
+     * @returns `true` if the table is in cell edit mode, `false` otherwise
+     */
+    isEditing() {
+        return this._getState().isCellEditMode;
+    }
+    /**
+     * Checks if the table is currently in cell edit mode for the given cell
+     *
+     * @param row - The row index of the cell to check
+     * @param column - The column index of the cell to check
+     * @returns `true` if the table is in cell edit mode for the given cell, `false` otherwise
+     */
+    isEditingCell(row, column) {
+        return (this._getState().isCellEditMode &&
+            this._getState().selectedCellIndex?.row === row &&
+            this._getState().selectedCellIndex?.column === column);
+    }
+    /**
+     * Enters cell edit mode for the given cell
+     *
+     * @param row - The row index of the cell to enter edit mode
+     * @param column - The column index of the cell to enter edit mode
+     */
+    enterCellEditMode(row, column) {
+        if (!this.canEditCell(row, column))
+            throw new Error("Cell is not editable");
+        this._getState().dispatch?.({
+            type: "ENTER_CELL_EDIT_MODE",
+            payload: { row, column },
+        });
+    }
+    /**
+     * Exits cell edit mode
+     *
+     * @param save - Whether to save the changes made in the cell
+     */
+    exitCellEditMode(save = true) {
+        // TODO: before exiting, check if the ${value} edited is valid
+        // exit edit mode
+        const selectedCell = this._getState().selectedCellIndex ?? {
+            row: 0,
+            column: 0,
+        };
+        this.selection.selectCell(selectedCell.row, selectedCell.column);
+        if (save) {
+            const value = this._getConfig().columns[selectedCell.column]?.valueGetter?.(this._getState().data[selectedCell.row], this._createCellContext(selectedCell.row, selectedCell.column));
+            this._getConfig().columns[selectedCell.column]?.onSave?.(`${value} edited`, this._createCellContext(selectedCell.row, selectedCell.column));
+            const nextCell = getNextSelectedCell({
+                direction: "down",
+                currentCell: selectedCell,
+                rowCount: this._getState().data.length,
+                columnCount: this._getConfig().columns.length,
+                moveToNextRow: true,
+            });
+            this.selection.selectCell(nextCell.row, nextCell.column);
+        }
+    }
+}
+export { TableApi };

package/dist/src/ui/components/object-set-table/object-set-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"object-set-table.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/object-set-table/object-set-table.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,QAAQ,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAEjE;;;;;;;GAOG;AACH,QAAA,MAAM,cAAc,GAAI,CAAC,SAAS,QAAQ,GAAG,QAAQ,EAAE,eAEpD,oBAAoB,CAAC,CAAC,CAAC,4CAsCzB,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"object-set-table.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/object-set-table/object-set-table.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,QAAQ,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAEjE;;;;;;;GAOG;AACH,QAAA,MAAM,cAAc,GAAI,CAAC,SAAS,QAAQ,GAAG,QAAQ,EAAE,eAEpD,oBAAoB,CAAC,CAAC,CAAC,4CAkDzB,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/src/ui/components/object-set-table/object-set-table.js

@@ -29,6 +29,17 @@ const ObjectSetTable = ({ ...config }) => {
                 valueGetter: column.valueGetter ?? defaultValueGetter,
                 valueFormatter: column.valueFormatter ?? defaultValueFormatter,
                 renderCell: column.renderCell ?? getRenderFn(column.type),
+                editable: column.editable ?? false,
+                // TODO: move the default onSave to a utility function
+                onSave: column.onSave ??
+                    ((value, context) => {
+                        // TODO: fix this
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                        // @ts-expect-error
+                        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                        config.data[context.rowIndex][context.column.field] = value;
+                        return true;
+                    }),
             })),
             allowRowSelection: config.allowRowSelection ?? true,
             showRowNumbers: config.showRowNumbers ?? true,

package/dist/src/ui/components/object-set-table/subcomponents/body.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"body.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/object-set-table/subcomponents/body.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAe,SAAS,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAQpE,UAAU,cAAc,CAAC,CAAC,SAAS,QAAQ;IACzC,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;CACzB;AAED,QAAA,MAAM,SAAS,GAAI,CAAC,SAAS,QAAQ,EAAE,oBAGpC,cAAc,CAAC,CAAC,CAAC,4CAuKnB,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"body.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/object-set-table/subcomponents/body.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAe,SAAS,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAQpE,UAAU,cAAc,CAAC,CAAC,SAAS,QAAQ;IACzC,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;CACzB;AAED,QAAA,MAAM,SAAS,GAAI,CAAC,SAAS,QAAQ,EAAE,oBAGpC,cAAc,CAAC,CAAC,CAAC,4CAgLnB,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}