@oslokommune/punkt-react 16.9.0 → 16.10.0

package/dist/shared-utils/combobox/option-utils.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Shared combobox option utility functions used by both Elements and React packages.
+ * Only framework-agnostic functions belong here.
+ */
+import type { IPktComboboxOption, TPktComboboxDisplayValue } from '../../shared-types/combobox';
+/**
+ * Finds an option by its value, falling back to label match.
+ * Value matches are prioritized over label matches to avoid ambiguity
+ * when an option's label matches another option's value.
+ */
+export declare const findOptionByValue: (options: IPktComboboxOption[], value: string | null) => IPktComboboxOption | null;
+/**
+ * Finds the index of an option by its value, falling back to label match.
+ */
+export declare const findOptionIndex: (options: IPktComboboxOption[], value: string | null) => number;
+/**
+ * Filters options by a search string, matching against fulltext.
+ */
+export declare const filterOptionsBySearch: (options: IPktComboboxOption[], search: string | null) => IPktComboboxOption[];
+/**
+ * Builds the fulltext search string for an option.
+ */
+export declare const buildFulltext: (option: IPktComboboxOption) => string;
+/**
+ * Checks if the maximum number of selections has been reached.
+ */
+export declare const isMaxSelectionReached: (selectedCount: number, maxlength: number | null) => boolean;
+/**
+ * Returns the display text for an option based on the displayValueAs setting.
+ */
+export declare const getOptionDisplayText: (option: IPktComboboxOption | null, displayValueAs: TPktComboboxDisplayValue) => string;
+/**
+ * Parses a value prop (string or string[]) into a normalized array.
+ */
+export declare const parseValueToArray: (value: string | string[] | null | undefined, multiple: boolean) => string[];
+/**
+ * Finds typeahead matches from options based on search input.
+ * Returns filtered options and the best autocomplete suggestion.
+ */
+export declare const findTypeaheadMatches: (options: IPktComboboxOption[], search: string) => {
+    filtered: IPktComboboxOption[];
+    suggestion: IPktComboboxOption | null;
+};
+/**
+ * Determines the user info message based on search state and matches.
+ */
+export declare const getSearchInfoMessage: (searchValue: string, selectedValues: string[], options: IPktComboboxOption[], allowUserInput: boolean) => {
+    addValueText: string | null;
+    userInfoMessage: string;
+};

package/dist/shared-utils/combobox/selection-manager.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Shared combobox selection management functions used by both Elements and React packages.
+ * Only framework-agnostic functions belong here.
+ */
+import type { IPktComboboxOption } from '../../shared-types/combobox';
+/**
+ * Configuration for the toggleSelection function.
+ */
+export interface IToggleSelectionConfig {
+    multiple: boolean;
+    allowUserInput: boolean;
+    maxlength: number | null;
+}
+/**
+ * Result of a toggle selection operation.
+ * Describes what happened and what the new state should be.
+ */
+export interface IToggleSelectionResult {
+    values: string[];
+    options: IPktComboboxOption[];
+    shouldOptionsBeOpen: boolean;
+    shouldResetInput: boolean;
+    userInfoMessage: string;
+    searchValue: string;
+    newUserOption: IPktComboboxOption | null;
+}
+/**
+ * Marks an option as selected in the options array.
+ * Returns new arrays (immutable).
+ */
+export declare const selectOption: (value: string | null, currentValues: string[], options: IPktComboboxOption[], maxlength: number | null, multiple: boolean) => {
+    values: string[];
+    options: IPktComboboxOption[];
+};
+/**
+ * Removes an option from the selection.
+ * Returns new arrays (immutable).
+ */
+export declare const deselectOption: (value: string | null, currentValues: string[], options: IPktComboboxOption[]) => {
+    values: string[];
+    options: IPktComboboxOption[];
+};
+/**
+ * Selects all options (for multiple mode).
+ * Returns new arrays (immutable).
+ */
+export declare const selectAllOptions: (options: IPktComboboxOption[], maxlength: number | null) => {
+    values: string[];
+    options: IPktComboboxOption[];
+    userInfoMessage: string;
+};
+/**
+ * Clears all selections.
+ * Returns new arrays (immutable).
+ */
+export declare const clearAllSelections: (options: IPktComboboxOption[]) => {
+    values: string[];
+    options: IPktComboboxOption[];
+};
+/**
+ * Creates a new user-added option object.
+ */
+export declare const createUserOption: (value: string) => IPktComboboxOption;
+/**
+ * Core toggle selection logic.
+ *
+ * Given a value to toggle and the current state, returns the new state
+ * describing what happened. This is the framework-agnostic version of
+ * the combobox's toggleValue method.
+ */
+export declare const toggleSelection: (value: string | null, currentValues: string[], options: IPktComboboxOption[], config: IToggleSelectionConfig) => IToggleSelectionResult;

package/dist/shared-utils/combobox/typeahead.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Shared combobox typeahead utility functions used by both Elements and React packages.
+ * Only framework-agnostic functions belong here.
+ */
+/**
+ * Checks if a character is a letter or space (Unicode-aware).
+ */
+export declare const isLetterOrSpace: (char: string) => boolean;
+/**
+ * Creates a typeahead handler that manages debounced character accumulation.
+ * Returns a stateful handler — call destroy() when done to clear timeouts.
+ */
+export declare const createTypeaheadHandler: (timeout?: number) => {
+    append: (char: string) => string;
+    reset: () => void;
+    getBuffer: () => string;
+};
+/**
+ * Finds the first option element whose text content starts with the search string.
+ * Works with an array of elements, matching against textContent.
+ */
+export declare const findTypeaheadOptionMatch: (options: {
+    textContent: string | null;
+}[], searchString: string) => number;

package/dist/shared-utils/date-utils.d.ts

@@ -0,0 +1,138 @@
+import { TZDate } from '@date-fns/tz';
+declare global {
+    interface Window {
+        pktTz: string;
+    }
+}
+/**
+ * Returns the current date in the specified timezone, with time set to 00:00:00
+ * @param tz - Timezone string (default: window.pktTz)
+ * @returns Date object representing today's date in the specified timezone
+ */
+export declare const todayInTz: (tz?: string) => Date;
+/**
+ * Parses an ISO date string and returns a Date object.
+ * Handles "YYYY-MM-DD", "YYYY-MM", and "YYYY" formats as local dates.
+ * @param date - The ISO date string to parse
+ * @returns A Date object
+ */
+export declare function parseISODateString(date: string | null | undefined): Date;
+/**
+ * Formats a Date or TZDate object to an ISO date string (YYYY-MM-DD).
+ * Uses local time, not UTC.
+ * @param date - The Date or TZDate object to format
+ * @returns An ISO date string
+ */
+export declare const formatISODate: (date: Date | TZDate) => string;
+/**
+ * Converts an ISO date string to a Date object
+ * @param date - The ISO date string to convert
+ * @returns A Date object or null if invalid
+ */
+export declare const fromISOToDate: (date: string | null) => Date | null;
+/**
+ * Converts an ISO date string to a formatted date string
+ * @param date - The ISO date string to convert
+ * @param dateformat - The desired date format
+ * @returns A formatted date string
+ */
+export declare const fromISOtoLocal: (date: string, dateformat: string) => string;
+/**
+ * Creates a new Date object based on the provided date string or Date object.
+ * Optionally sets the time to the start or end of the day.
+ * @param date - The date string or Date object
+ * @param timeOfDay - 'start' to set time to 00:00:00, 'end' to set time to 23:59:59
+ * @returns A Date object
+ */
+export declare const newDate: (date?: string | Date, timeOfDay?: "start" | "end") => Date;
+/**
+ * Creates a new Date object based on the provided year, month, and day.
+ * If the inputs are invalid, returns the current date.
+ * @param year - The year
+ * @param month - The month (0-11)
+ * @param day - The day of the month (default: 1)
+ * @returns A Date object
+ */
+export declare const newDateYMD: (year: number, month: number, day?: number) => Date;
+/**
+ * Creates a new Date object based on the provided date string or Date object.
+ * Sets the time to noon (12:00:00) to avoid timezone issues.
+ * @param date - The date string or Date object
+ * @returns A Date object with time set to noon
+ */
+export declare const newDateFromDate: (date: Date | TZDate | number) => Date;
+export declare const formatReadableDate: (date: Date | TZDate) => string;
+/**
+ * Validates if a date is within the specified range
+ * @param date - The date to validate
+ * @param min - The minimum date (ISO string)
+ * @param max - The maximum date (ISO string)
+ * @returns boolean indicating if the date is in range
+ */
+export declare const isDateInRange: (date: Date, min?: string | null, max?: string | null) => boolean;
+/**
+ * Checks if a date is in the list of excluded dates
+ * @param date - The date to check
+ * @param excludedDates - Array of excluded date strings (ISO format)
+ * @returns boolean indicating if the date is excluded
+ */
+export declare const isDateExcluded: (date: Date, excludedDates: string[]) => boolean;
+/**
+ * Checks if a date's weekday is excluded
+ * @param date - The date to check
+ * @param excludedWeekdays - Array of excluded weekdays (0 = Sunday, 1 = Monday, etc.)
+ * @returns boolean indicating if the weekday is excluded
+ */
+export declare const isWeekdayExcluded: (date: Date, excludedWeekdays: string[]) => boolean;
+/**
+ * Validates if a date can be selected based on all constraints
+ * @param date - The date to validate
+ * @param min - The minimum date (ISO string)
+ * @param max - The maximum date (ISO string)
+ * @param excludedDates - Array of excluded date strings (ISO format)
+ * @param excludedWeekdays - Array of excluded weekdays (0 = Sunday, 1 = Monday, etc.)
+ * @returns boolean indicating if the date is selectable
+ */
+export declare const isDateSelectable: (date: Date, min?: string | null, max?: string | null, excludedDates?: string[], excludedWeekdays?: string[]) => boolean;
+/**
+ * Filters an array of date strings to only include selectable dates
+ * @param dates - Array of date strings (ISO format)
+ * @param min - The minimum date (ISO string)
+ * @param max - The maximum date (ISO string)
+ * @param excludedDates - Array of excluded date strings (ISO format)
+ * @param excludedWeekdays - Array of excluded weekdays (0 = Sunday, 1 = Monday, etc.)
+ * @returns Array of selectable date strings
+ */
+export declare const filterSelectableDates: (dates: string[], min?: string | null, max?: string | null, excludedDates?: string[], excludedWeekdays?: string[]) => string[];
+/**
+ * Sorts an array of ISO date strings chronologically
+ * @param dates - Array of date strings (ISO format)
+ * @returns Sorted array of date strings
+ */
+export declare const sortDateStrings: (dates: string[]) => string[];
+/**
+ * Validates a date range (start should be before or equal to end)
+ * @param startDate - The start date (ISO string)
+ * @param endDate - The end date (ISO string)
+ * @returns boolean indicating if the date range is valid
+ */
+export declare const isValidDateRange: (startDate: string, endDate: string) => boolean;
+declare const _default: {
+    todayInTz: (tz?: string) => Date;
+    parseISODateString: typeof parseISODateString;
+    formatISODate: (date: Date | TZDate) => string;
+    fromISOToDate: (date: string | null) => Date | null;
+    fromISOtoLocal: (date: string, dateformat: string) => string;
+    newDate: (date?: string | Date, timeOfDay?: "start" | "end") => Date;
+    newDateYMD: (year: number, month: number, day?: number) => Date;
+    newDateFromDate: (date: Date | TZDate | number) => Date;
+    formatReadableDate: (date: Date | TZDate) => string;
+    isDateInRange: (date: Date, min?: string | null, max?: string | null) => boolean;
+    isDateExcluded: (date: Date, excludedDates: string[]) => boolean;
+    isWeekdayExcluded: (date: Date, excludedWeekdays: string[]) => boolean;
+    isDateSelectable: (date: Date, min?: string | null, max?: string | null, excludedDates?: string[], excludedWeekdays?: string[]) => boolean;
+    filterSelectableDates: (dates: string[], min?: string | null, max?: string | null, excludedDates?: string[], excludedWeekdays?: string[]) => string[];
+    sortDateStrings: (dates: string[]) => string[];
+    isValidDateRange: (startDate: string, endDate: string) => boolean;
+};
+export default _default;

package/dist/shared-utils/datepicker-utils.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Shared datepicker utility functions used by both Elements and React packages.
+ * Only framework-agnostic functions belong here.
+ */
+/**
+ * Determines the appropriate input type based on device.
+ * Returns 'text' on iOS to avoid native date picker conflicts.
+ */
+export declare const getDatepickerInputType: () => string;
+/**
+ * Validates that a range has valid order (start <= end).
+ * Returns true if range is valid or incomplete.
+ */
+export declare const validateRangeOrder: (values: string[]) => boolean;
+/**
+ * Sorts date strings chronologically.
+ */
+export declare const sortDates: (dates: string[]) => string[];
+/**
+ * Filters dates to only include selectable ones based on constraints.
+ */
+export declare const filterDates: (dates: string[], min?: string | null, max?: string | null, excludedDates?: string[], excludedWeekdays?: string[]) => string[];
+/**
+ * Generates input CSS classes for datepicker.
+ */
+export declare const getDatepickerInputClasses: (fullwidth: boolean, showRangeLabels: boolean, multiple: boolean, range: boolean, readonly?: boolean, inputType?: string) => Record<string, boolean>;
+/**
+ * Generates button CSS classes for calendar toggle button.
+ */
+export declare const getDatepickerButtonClasses: () => Record<string, boolean>;
+/**
+ * Generates range label CSS classes.
+ */
+export declare const getRangeLabelClasses: (showRangeLabels: boolean) => Record<string, boolean>;
+/**
+ * Processes date selection from calendar events.
+ * Converts the calendar's date selection into the appropriate string format.
+ */
+export declare const processDateSelection: (detail: string | string[], multiple: boolean, range: boolean) => string;
+/**
+ * Handles calendar positioning based on viewport and input position.
+ * Positions calendar below input by default, flips above if overflowing.
+ *
+ * Accepts plain DOM elements (not framework-specific refs).
+ */
+export declare const handleCalendarPosition: (popup: HTMLElement | null, input: HTMLElement | null, hasCounter?: boolean) => void;
+/**
+ * Handles common keyboard interactions for datepicker inputs.
+ *
+ * - Space: Opens calendar
+ * - Enter: Submits form, focuses next input, or blurs
+ * - Comma: Adds date to selection (multiple) or blurs input
+ */
+export declare const handleDatepickerKeydown: (event: KeyboardEvent, toggleCalendar: (e: Event) => void, submitForm?: () => void, focusNextInput?: () => void, blurInput?: () => void, commaHandler?: (e: KeyboardEvent) => void) => void;
+/**
+ * Handles keyboard interactions for calendar button.
+ * Responds to Enter and Space keys.
+ */
+export declare const handleDatepickerButtonKeydown: (event: KeyboardEvent, toggleCalendar: (e: Event) => void) => void;
+declare const _default: {
+    getDatepickerInputType: () => string;
+    validateRangeOrder: (values: string[]) => boolean;
+    sortDates: (dates: string[]) => string[];
+    filterDates: (dates: string[], min?: string | null, max?: string | null, excludedDates?: string[], excludedWeekdays?: string[]) => string[];
+    getDatepickerInputClasses: (fullwidth: boolean, showRangeLabels: boolean, multiple: boolean, range: boolean, readonly?: boolean, inputType?: string) => Record<string, boolean>;
+    getDatepickerButtonClasses: () => Record<string, boolean>;
+    getRangeLabelClasses: (showRangeLabels: boolean) => Record<string, boolean>;
+    processDateSelection: (detail: string | string[], multiple: boolean, range: boolean) => string;
+    handleCalendarPosition: (popup: HTMLElement | null, input: HTMLElement | null, hasCounter?: boolean) => void;
+    handleDatepickerKeydown: (event: KeyboardEvent, toggleCalendar: (e: Event) => void, submitForm?: () => void, focusNextInput?: () => void, blurInput?: () => void, commaHandler?: (e: KeyboardEvent) => void) => void;
+    handleDatepickerButtonKeydown: (event: KeyboardEvent, toggleCalendar: (e: Event) => void) => void;
+};
+export default _default;

package/dist/shared-utils/device-utils.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Detects if the current device is iOS (iPhone, iPad, iPod)
+ * Handles modern iPad Safari which uses desktop user agent since iOS 13
+ * @returns boolean indicating if the device is iOS
+ */
+export declare const isIOS: () => boolean;
+declare const _default: {
+    isIOS: () => boolean;
+};
+export default _default;

package/dist/shared-utils/timepicker/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Shared timepicker utilities for use by both Elements and React packages.
+ */
+export { isValidTimeString, parseTimeString, timeToMinutes } from './time-utils';
+export { getMinuteStep, getHourOptions, getMinuteOptions } from './options';
+export { stepTime } from './stepper';

package/dist/shared-utils/timepicker/options.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Shared timepicker option generation utilities.
+ * Used by both Elements and React implementations.
+ * Only framework-agnostic functions belong here.
+ */
+/**
+ * Converts a step value in seconds to a step value in minutes.
+ * Defaults to 1 if step is null/undefined/zero.
+ */
+export declare const getMinuteStep: (stepSeconds?: number | null) => number;
+/**
+ * Returns an array of valid hour values (0–23) based on min/max constraints.
+ * min and max should be HH:MM strings; invalid/missing values fall back to 0 and 23.
+ */
+export declare const getHourOptions: (min?: string | number | null, max?: string | number | null) => number[];
+/**
+ * Returns an array of valid minute values based on step constraints.
+ */
+export declare const getMinuteOptions: (stepSeconds?: number | null) => number[];

package/dist/shared-utils/timepicker/stepper.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Shared timepicker stepper logic.
+ * Used by both Elements and React implementations.
+ * Only framework-agnostic functions belong here.
+ */
+/**
+ * Increments or decrements the time by one minute-step.
+ * Rolls over: incrementing past 23:59 wraps to 00:00, and decrementing past 00:00 wraps to 23:59.
+ * Falls back to sensible defaults when hours/minutes are empty strings.
+ *
+ * @param hours - Current hours display value ('09', '', etc.)
+ * @param minutes - Current minutes display value ('30', '', etc.)
+ * @param direction - 1 for next, -1 for previous
+ * @param minuteStep - Step size in minutes
+ * @returns Zero-padded { hours, minutes } strings
+ */
+export declare const stepTime: (hours: string, minutes: string, direction: 1 | -1, minuteStep: number) => {
+    hours: string;
+    minutes: string;
+};

package/dist/shared-utils/timepicker/time-utils.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Shared timepicker time utility functions.
+ * Used by both Elements and React implementations.
+ * Only framework-agnostic functions belong here.
+ */
+/**
+ * Returns true if the string matches the HH:MM format with valid hour/minute ranges.
+ */
+export declare const isValidTimeString: (value: string) => boolean;
+/**
+ * Parses an HH:MM string into zero-padded [hours, minutes] strings.
+ * Returns null for empty or invalid values.
+ */
+export declare const parseTimeString: (value: string) => [string, string] | null;
+/**
+ * Converts an HH:MM string to total minutes since midnight.
+ * Assumes a valid time string.
+ */
+export declare const timeToMinutes: (time: string) => number;

package/dist/shared-utils/utils.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Sleep utility function for async delays
+ * @param ms - Number of milliseconds to sleep
+ * @returns A promise that resolves after the specified delay
+ */
+export declare const sleep: (ms: number) => Promise<void>;
+/**
+ * UUID-like string generator for very random identifiers
+ * @returns A UUID-like string (Not actually a valid UUID)
+ */
+export declare const uuidish: () => string;
+declare const _default: {
+    sleep: (ms: number) => Promise<void>;
+    uuidish: () => string;
+};
+export default _default;

package/dist/shared-utils/value-utils.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Converts a value (string or string array) into an array of strings
+ * @param value - The value to convert
+ * @returns An array of strings
+ */
+export declare const valueToArray: (value: string | string[] | null | undefined) => string[];
+/**
+ * Converts an array of strings into a CSV string
+ * @param array - The array of strings to convert
+ * @returns A CSV string
+ */
+export declare const arrayToCsv: (array: string[]) => string;
+declare const _default: {
+    valueToArray: (value: string | string[] | null | undefined) => string[];
+    arrayToCsv: (array: string[]) => string;
+};
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "16.9.0",
+  "version": "16.10.0",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -27,7 +27,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "tsc && vite build && node scripts/bundle-shared-types.js",
     "build-app": "tsc && vite build --config vite.config-app.ts",
     "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
     "lint:fix": "eslint --fix 'src/**/*.{jsx,ts,tsx}'",
@@ -39,7 +39,7 @@
   "dependencies": {
     "@lit-labs/ssr-dom-shim": "^1.2.1",
     "@lit/react": "^1.0.7",
-    "@oslokommune/punkt-elements": "^16.9.0",
+    "@oslokommune/punkt-elements": "^16.10.0",
     "classnames": "^2.5.1",
     "prettier": "^3.3.3",
     "react-hook-form": "^7.53.0"
@@ -50,7 +50,7 @@
     "@eslint/eslintrc": "^3.3.3",
     "@eslint/js": "^9.37.0",
     "@oslokommune/punkt-assets": "^16.0.0",
-    "@oslokommune/punkt-css": "^16.8.2",
+    "@oslokommune/punkt-css": "^16.10.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -109,5 +109,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "b5986d27e787fefda72f847d65bb9b7de2ab5316"
+  "gitHead": "7d339c3bc11d0da4291536496aebb6761dd519cb"
 }

package/src/components/modal/Modal.tsx

@@ -20,7 +20,7 @@ export interface IPktModal
   headingText?: string
   hideCloseButton?: boolean
   closeOnBackdropClick?: boolean
-  size?: 'small' | 'medium' | 'large'
+  size?: 'small' | 'medium' | 'large' | 'fit-content'
   removePadding?: boolean
   closeButtonSkin?: 'blue' | 'yellow-filled'
   variant?: 'dialog' | 'drawer'