@oslokommune/punkt-react 16.25.1 → 16.26.3

package/dist/components/progressbar/Progressbar.d.ts

@@ -0,0 +1,21 @@
+import { HTMLAttributes, Ref } from 'react';
+import { TAriaLive, TProgressbarRole, TProgressbarSkin, TProgressbarStatusPlacement, TProgressbarStatusType, TProgressbarTitlePosition } from '../../shared-types';
+export type { TProgressbarRole, TProgressbarSkin, TProgressbarStatusPlacement, TProgressbarStatusType, TProgressbarTitlePosition };
+export interface IPktProgressbar extends Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'title'> {
+    ariaLabel?: string | null;
+    ariaLabelledby?: string | null;
+    ariaLive?: TAriaLive;
+    ariaValueText?: string | null;
+    id?: string;
+    role?: TProgressbarRole;
+    skin?: TProgressbarSkin;
+    statusPlacement?: TProgressbarStatusPlacement;
+    statusType?: TProgressbarStatusType;
+    title?: string | null;
+    titlePosition?: TProgressbarTitlePosition;
+    valueCurrent: number;
+    valueMax?: number;
+    valueMin?: number;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const PktProgressbar: import('react').ForwardRefExoticComponent<Omit<IPktProgressbar, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/radio/RadioButton.d.ts

@@ -0,0 +1,20 @@
+import { ChangeEventHandler, InputHTMLAttributes, ReactNode } from 'react';
+export interface IPktRadioButton extends InputHTMLAttributes<HTMLInputElement> {
+    id: string;
+    name: string;
+    label: string;
+    hasTile?: boolean;
+    disabled?: boolean;
+    checkHelptext?: ReactNode | ReactNode[] | string;
+    defaultChecked?: boolean;
+    checked?: boolean;
+    hasError?: boolean;
+    value?: string;
+    optionalTag?: boolean;
+    optionalText?: string;
+    requiredTag?: boolean;
+    requiredText?: string;
+    tagText?: string | null;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+}
+export declare const PktRadioButton: import('react').ForwardRefExoticComponent<IPktRadioButton & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/searchinput/SearchInput.d.ts

@@ -0,0 +1,36 @@
+import { ChangeEvent, HTMLProps, ReactNode } from 'react';
+import { IPktSearchInputSuggestion } from '../../shared-types/searchinput';
+/**
+ * React suggestion item: portable fields from {@link IPktSearchInputSuggestion}
+ * plus optional rich content and per-row handler.
+ */
+export type PktSearchInputSuggestion = Omit<IPktSearchInputSuggestion, 'title' | 'text'> & {
+    title?: string | ReactNode;
+    text?: string | ReactNode;
+    onClick?: () => void;
+};
+interface ISearch extends HTMLProps<HTMLInputElement> {
+    appearance?: 'local' | 'local-with-button' | 'global';
+    disabled?: boolean;
+    fullwidth?: boolean;
+    id: string;
+    label?: string;
+    name?: string;
+    placeholder?: string;
+    suggestions?: PktSearchInputSuggestion[];
+    value?: string | undefined;
+    onSearch?: (value: string) => void;
+    onSuggestionClick?: (index: number) => void;
+    action?: string;
+    method?: 'get' | 'post' | 'dialog';
+}
+interface ISearchForm extends ISearch {
+    action?: string;
+    method?: 'get' | 'post' | 'dialog';
+}
+interface ISearchInput extends ISearch {
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+}
+export declare const PktSearchInput: import('react').ForwardRefExoticComponent<(Omit<ISearchForm, "ref"> | Omit<ISearchInput, "ref">) & import('react').RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/select/Select.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode, SelectHTMLAttributes } from 'react';
+import { TSelectOption } from '../../shared-types';
+export type { TSelectOption };
+export interface IPktSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    ariaDescribedby?: string;
+    ariaLabelledby?: string;
+    children?: ReactNode | ReactNode[];
+    disabled?: boolean;
+    errorMessage?: string | ReactNode | ReactNode[];
+    hasError?: boolean;
+    helptext?: string | ReactNode | ReactNode[];
+    helptextDropdown?: string | ReactNode | ReactNode[];
+    helptextDropdownButton?: string;
+    id: string;
+    inline?: boolean;
+    fullwidth?: boolean;
+    label: string;
+    name?: string;
+    optionalTag?: boolean;
+    optionalText?: string;
+    requiredTag?: boolean;
+    requiredText?: string;
+    tagText?: string | null;
+    options?: Array<{
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }>;
+}
+export declare const PktSelect: import('react').ForwardRefExoticComponent<IPktSelectProps & import('react').RefAttributes<HTMLSelectElement>>;

package/dist/components/stepper/Step.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+export type TStepStatus = 'completed' | 'incomplete' | 'current';
+export interface IPktStep {
+    /**
+     * Step content. Can be a string, a React component or an element.
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Step status. Can be 'completed', 'incomplete' or 'current'
+     */
+    status: TStepStatus;
+    /**
+     * Title of the step
+     */
+    title: string;
+}
+export declare const PktStep: ({ children, className, status, title }: IPktStep) => import("react").JSX.Element;

package/dist/components/stepper/Stepper.d.ts

@@ -0,0 +1,32 @@
+import { HTMLAttributes, ReactElement } from 'react';
+import { IPktStep } from './Step';
+export interface IPktStepper extends HTMLAttributes<HTMLOListElement> {
+    /**
+     * The index of the current active step
+     */
+    activeStep: number;
+    /**
+     * Children of the Stepper must be Step items. Either an Array of Step items or a single Step item.
+     */
+    children: ReactElement<IPktStep>[] | ReactElement<IPktStep>;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Boolean to hide the content of non-active steps content
+     * @default true
+     */
+    hideNonActiveStepsContent?: boolean;
+    /**
+     * Boolean to hide the content and title of non-active steps
+     * @default false
+     */
+    hideNonActiveSteps?: boolean;
+    /**
+     * Orientation of the stepper.
+     * @default vertical
+     */
+    orientation?: 'horizontal' | 'vertical';
+}
+export declare const PktStepper: import('react').ForwardRefExoticComponent<IPktStepper & import('react').RefAttributes<HTMLOListElement>>;

package/dist/components/table/Table.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type TTableSkin = 'basic' | 'zebra-blue';
+interface ITableProps extends HTMLAttributes<HTMLTableElement> {
+    compact?: boolean;
+    skin?: 'basic' | 'zebra-blue';
+    responsiveView?: boolean;
+    className?: string;
+    children: ReactNode;
+}
+export declare const PktTable: ({ className, compact, skin, responsiveView, children, ...props }: ITableProps) => import("react").JSX.Element;
+export {};

package/dist/components/table/TableBody.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes, ReactNode } from 'react';
+interface ITableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
+    className?: string;
+    children: ReactNode;
+}
+export declare const PktTableBody: ({ id, children, className, ...props }: ITableBodyProps) => import("react").JSX.Element;
+export {};

package/dist/components/table/TableData.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes, ReactNode } from 'react';
+interface TableDataProps extends HTMLAttributes<HTMLTableCellElement> {
+    className?: string;
+    children: ReactNode | ReactNode[];
+}
+export declare const PktTableData: ({ children, className, ...props }: TableDataProps) => import("react").JSX.Element;
+export {};

package/dist/components/table/TableDataCell.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes, ReactNode } from 'react';
+interface ITableDataCellProps extends HTMLAttributes<HTMLTableCellElement> {
+    className?: string;
+    children?: ReactNode;
+    dataLabel?: string;
+}
+export declare const PktTableDataCell: ({ children, className, dataLabel, ...props }: ITableDataCellProps) => import("react").JSX.Element;
+export {};

package/dist/components/table/TableHeader.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes, ReactNode } from 'react';
+interface ITableHeaderProps extends HTMLAttributes<HTMLTableSectionElement> {
+    className?: string;
+    children: ReactNode;
+}
+export declare const PktTableHeader: ({ className, children, ...props }: ITableHeaderProps) => import("react").JSX.Element;
+export {};

package/dist/components/table/TableHeaderCell.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes, ReactNode } from 'react';
+interface ITableHeaderCellProps extends HTMLAttributes<HTMLTableCellElement> {
+    className?: string;
+    children: ReactNode;
+}
+export declare const PktTableHeaderCell: ({ className, children, ...props }: ITableHeaderCellProps) => import("react").JSX.Element;
+export {};

package/dist/components/table/TableRow.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes, ReactNode } from 'react';
+interface ITableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    className?: string;
+    children: ReactNode;
+}
+export declare const PktTableRow: ({ className, children, ...props }: ITableRowProps) => import("react").JSX.Element;
+export {};

package/dist/components/tabs/TabItem.d.ts

@@ -0,0 +1,15 @@
+import { MouseEvent, ReactNode } from 'react';
+import { TTagSkin } from '../../shared-types';
+export interface IPktTabItem {
+    children: ReactNode;
+    active?: boolean;
+    disabled?: boolean;
+    href?: string;
+    onClick?: (event: MouseEvent) => void;
+    icon?: string;
+    controls?: string;
+    tag?: string;
+    tagSkin?: TTagSkin;
+    index?: number;
+}
+export declare const PktTabItem: import('react').ForwardRefExoticComponent<IPktTabItem & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;

package/dist/components/tabs/Tabs.d.ts

@@ -0,0 +1,33 @@
+import { KeyboardEvent, ReactNode } from 'react';
+import { TTagSkin } from '../../shared-types';
+interface ITabsContext {
+    arrowNav: boolean;
+    registerTabRef: (index: number, el: HTMLAnchorElement | HTMLButtonElement | null, disabled?: boolean) => void;
+    handleKeyPress: (index: number, event: KeyboardEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
+    selectTab: (index: number) => void;
+}
+export declare const useTabsContext: () => ITabsContext;
+export interface IPktTab {
+    text: string;
+    href?: string;
+    action?: (index: number) => void;
+    disabled?: boolean;
+    icon?: string;
+    controls?: string;
+    tag?: {
+        text: string;
+        skin: TTagSkin | undefined;
+    };
+    active?: boolean;
+}
+export interface IPktTabs {
+    arrowNav?: boolean;
+    disableArrowNav?: boolean;
+    separatorIconName?: string;
+    separatorIconPath?: string;
+    tabs?: IPktTab[];
+    onTabSelected?: (index: number) => void;
+    children?: ReactNode;
+}
+export declare const PktTabs: import('react').ForwardRefExoticComponent<IPktTabs & import('react').RefAttributes<HTMLDivElement>>;
+export { PktTabItem } from './TabItem';

package/dist/components/tag/Tag.d.ts

@@ -0,0 +1,24 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { TTagSkin } from '../../shared-types';
+interface BasePktTagProps {
+    skin?: TTagSkin;
+    textStyle?: 'normal-text' | 'thin-text';
+    size?: 'small' | 'medium' | 'large';
+    closeTag?: boolean;
+    iconName?: string;
+    ariaLabel?: string;
+    onClose?: () => void;
+    children?: ReactNode;
+}
+interface ButtonPktTagProps extends BasePktTagProps, HTMLAttributes<HTMLButtonElement> {
+    closeTag: true;
+    type?: 'button' | 'submit' | 'reset';
+}
+interface SpanPktTagProps extends BasePktTagProps, HTMLAttributes<HTMLSpanElement> {
+    closeTag?: false | undefined;
+    onClose?: undefined;
+    type?: undefined;
+}
+export type IPktTag = ButtonPktTagProps | SpanPktTagProps;
+export declare const PktTag: import('react').ForwardRefExoticComponent<(ButtonPktTagProps | SpanPktTagProps) & import('react').RefAttributes<HTMLSpanElement | HTMLButtonElement>>;
+export {};

package/dist/components/textarea/Textarea.d.ts

@@ -0,0 +1,35 @@
+import { ChangeEventHandler, ReactNode, TextareaHTMLAttributes } from 'react';
+export interface IPktTextarea extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    id: string;
+    ariaDescribedby?: string;
+    ariaLabelledby?: string;
+    counter?: boolean;
+    counterMaxLength?: number;
+    disabled?: boolean;
+    errorMessage?: string | ReactNode | ReactNode[];
+    hasError?: boolean;
+    helptext?: string | ReactNode | ReactNode[];
+    helptextDropdown?: string | ReactNode | ReactNode[];
+    helptextDropdownButton?: string;
+    inline?: boolean;
+    fullwidth?: boolean;
+    label: string;
+    name?: string;
+    optionalTag?: boolean;
+    optionalText?: string;
+    requiredTag?: boolean;
+    requiredText?: string;
+    tagText?: string | null;
+    placeholder?: string;
+    rows?: number;
+    useWrapper?: boolean;
+    value?: string;
+    autocomplete?: string;
+    minLength?: number;
+    maxLength?: number;
+    readOnly?: boolean;
+    required?: boolean;
+    skipForwardTestid?: boolean;
+    onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+}
+export declare const PktTextarea: import('react').ForwardRefExoticComponent<IPktTextarea & import('react').RefAttributes<HTMLTextAreaElement>>;

package/dist/components/textinput/Textinput.d.ts

@@ -0,0 +1,44 @@
+import { ChangeEventHandler, InputHTMLAttributes, ReactNode } from 'react';
+export interface IPktTextinput extends InputHTMLAttributes<HTMLInputElement> {
+    id: string;
+    ariaDescribedby?: string;
+    ariaLabelledby?: string;
+    autocomplete?: string;
+    counter?: boolean;
+    counterMaxLength?: number;
+    disabled?: boolean;
+    errorMessage?: string | ReactNode | ReactNode[];
+    hasError?: boolean;
+    helptext?: string | ReactNode | ReactNode[];
+    helptextDropdown?: string | ReactNode | ReactNode[];
+    helptextDropdownButton?: string;
+    iconNameRight?: string;
+    inline?: boolean;
+    fullwidth?: boolean;
+    label: string;
+    name?: string;
+    optionalTag?: boolean;
+    optionalText?: string;
+    requiredTag?: boolean;
+    requiredText?: string;
+    tagText?: string | null;
+    placeholder?: string;
+    prefix?: string;
+    suffix?: string;
+    type?: string;
+    useWrapper?: boolean;
+    value?: string;
+    omitSearchIcon?: boolean;
+    min?: number | string;
+    max?: number | string;
+    minLength?: number;
+    maxLength?: number;
+    step?: string;
+    size?: number;
+    readonly?: boolean;
+    required?: boolean;
+    dataTestid?: string;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    skipForwardTestid?: boolean;
+}
+export declare const PktTextinput: import('react').ForwardRefExoticComponent<IPktTextinput & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/timepicker/Timepicker.d.ts

@@ -0,0 +1,3 @@
+import { IPktTimepicker } from './types';
+export type { IPktTimepicker } from './types';
+export declare const PktTimepicker: import('react').ForwardRefExoticComponent<IPktTimepicker & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/timepicker/types.d.ts

@@ -0,0 +1,81 @@
+import { ChangeEvent, FocusEvent, InputHTMLAttributes, ReactNode } from 'react';
+import { ITimepickerStrings } from '../../shared-types/timepicker';
+/**
+ * Props for {@link PktTimepicker}: a React time picker with `HH:MM`, aligned with Elements `pkt-timepicker`.
+ *
+ * The value is submitted via a hidden `input type="time"`; hour/minute fields are the editing UI. Use `value`
+ * or `defaultValue` for controlled vs. uncontrolled mode.
+ */
+export interface IPktTimepicker extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'onInput' | 'min' | 'max' | 'step' | 'onFocus' | 'onBlur'> {
+    /** Unique id; used for hour, minute, popup, and hidden input ids. */
+    id: string;
+    /** Visible label (InputWrapper). */
+    label: string;
+    /** Controlled value (`HH:MM`). */
+    value?: string;
+    /** Initial value when the component is uncontrolled. */
+    defaultValue?: string;
+    /**
+     * Earliest valid time (`HH:MM`). May be a number or string (HTML attribute / RHF).
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time}
+     */
+    min?: string | number;
+    /**
+     * Latest valid time (`HH:MM`). May be a number or string (HTML attribute / RHF).
+     */
+    max?: string | number;
+    /**
+     * Step in **seconds** (e.g. `60` = 1 min, `300` = 5 min). Must be a valid multiple (same rules as Elements).
+     * @default 60
+     */
+    step?: number;
+    /** Hides the clock button and popup; shows a static clock icon. */
+    hidePicker?: boolean;
+    /** Shows previous/next step buttons instead of the popup. */
+    stepArrows?: boolean;
+    /** Full width (`pkt-timepicker--fullwidth`). */
+    fullwidth?: boolean;
+    /** Form field name on the hidden `input`; falls back to `id` if omitted. */
+    name?: string;
+    /** Help text above the field. */
+    helptext?: string | ReactNode;
+    /** Expandable help text (dropdown). */
+    helptextDropdown?: string | ReactNode;
+    /** Button label for expandable help text. */
+    helptextDropdownButton?: string;
+    /** Forces error state on the wrapper. */
+    hasError?: boolean;
+    /** Error message below the field. */
+    errorMessage?: string | ReactNode;
+    /** Shows an "optional" tag. */
+    optionalTag?: boolean;
+    /** Label text for the optional tag. */
+    optionalText?: string;
+    /** Shows a "required" tag. */
+    requiredTag?: boolean;
+    /** Label text for the required tag. */
+    requiredText?: string;
+    /** Extra tag next to the label. */
+    tagText?: string | null;
+    /** Inline layout in InputWrapper. */
+    inline?: boolean;
+    /** Show visible label and help text (`false` = screen-reader-only label). */
+    useWrapper?: boolean;
+    /** Passed through to InputWrapper as `aria-describedby`. */
+    ariaDescribedby?: string;
+    /** Copy for hours, minutes, buttons, and popup. */
+    strings?: ITimepickerStrings;
+    /** Change event from the hidden input (`e.target.value` is `HH:MM`). In React, `onChange` already fires on input. */
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /** Callback with the committed `HH:MM` string. */
+    onValueChange?: (value: string) => void;
+    /**
+     * Fires when focus enters this control from outside (not when moving only between hour and minute).
+     * Implemented on the root wrapper; spinbuttons must allow focus to bubble so this runs.
+     */
+    onFocus?: (e: FocusEvent<Element>) => void;
+    /** Focus leaves the whole component. */
+    onBlur?: (e: FocusEvent<Element>) => void;
+    /** Extra class names on the root (`pkt-timepicker`). */
+    className?: string;
+}

package/dist/components/timepicker/useTimepickerState.d.ts

@@ -0,0 +1,58 @@
+import { KeyboardEvent } from 'react';
+import { IPktTimepicker } from './types';
+export declare function useTimepickerState(props: IPktTimepicker, ref: React.ForwardedRef<HTMLDivElement>): {
+    id: string;
+    containerRef: import('react').RefObject<HTMLDivElement | null>;
+    outerClasses: string;
+    strings: import('../../../../../shared-types').ITimepickerStrings;
+    label: string;
+    disabled: boolean;
+    required: boolean;
+    helptext: import('react').ReactNode;
+    helptextDropdown: import('react').ReactNode;
+    helptextDropdownButton: string | undefined;
+    hasError: boolean;
+    isInvalid: boolean;
+    errorMessage: import('react').ReactNode;
+    optionalTag: boolean;
+    optionalText: string | undefined;
+    requiredTag: boolean;
+    requiredText: string | undefined;
+    tagText: string | null | undefined;
+    inline: boolean;
+    useWrapper: boolean;
+    ariaDescribedby: string | undefined;
+    hidePicker: boolean;
+    stepArrows: boolean;
+    min: string | number | undefined;
+    max: string | number | undefined;
+    step: number;
+    hours: string;
+    minutes: string;
+    hoursId: string;
+    minutesId: string;
+    popupId: string;
+    hiddenInputId: string;
+    name: string;
+    isOpen: boolean;
+    hourOptions: number[];
+    minuteOptions: number[];
+    hoursInputRef: import('react').RefObject<HTMLInputElement | null>;
+    minutesInputRef: import('react').RefObject<HTMLInputElement | null>;
+    buttonRef: import('react').RefObject<HTMLButtonElement | null>;
+    popupRef: import('react').RefObject<HTMLDivElement | null>;
+    changeInputRef: import('react').RefObject<HTMLInputElement | null>;
+    handleHoursKeydown: (e: KeyboardEvent<HTMLInputElement>) => void;
+    handleHoursBlur: () => void;
+    handleMinutesKeydown: (e: KeyboardEvent<HTMLInputElement>) => void;
+    handleMinutesBlur: () => void;
+    handlePopupKeydown: (e: KeyboardEvent<HTMLDivElement>) => void;
+    handlePopupFocusOut: (e: React.FocusEvent<HTMLDivElement>) => void;
+    handleFocusIn: (e: React.FocusEvent<HTMLDivElement>) => void;
+    handleFocusOut: (e: React.FocusEvent<HTMLDivElement>) => void;
+    handleOptionClick: (optionValue: number, type: "hour" | "minute") => void;
+    handleClockButtonClick: () => void;
+    closePopup: () => void;
+    stepTimeDelta: (direction: 1 | -1) => void;
+    effectiveValue: string;
+};

package/dist/components/types.d.ts

@@ -0,0 +1,2 @@
+export { FileItem } from './fileupload/types';
+export type { TFileAndTransfer, TFileAttribute, TFileAttributes, TFileId, TFileItemList, TFileTransfer, TItemRenderer, TQueueItemOperation, TQueueOperationContext, TTransferItemInProgress, TUploadStrategy, } from './fileupload/types';