@oslokommune/punkt-react 11.18.0 → 11.19.0

package/CHANGELOG.md

@@ -5,6 +5,30 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [11.19.0](https://github.com/oslokommune/punkt/compare/11.18.0...11.19.0) (2024-08-19)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+* Counter i inputs, HTML i errorMessage, og endring i PktSearchInput-hendelser (#1877). * Counter i inputs, HTML i errorMessage, og WIP PktSearchInput
+  
+  * Masse tøvete arbeid for å få TypeScript til å slutte å syte
+  
+  * TypeScript gjør meg frustrert.
+  
+  * Counter PktTextInpu dokumentasjon og spesifikasjon
+
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [11.18.0](https://github.com/oslokommune/punkt/compare/11.17.0...11.18.0) (2024-08-16)
 
 ### ⚠ BREAKING CHANGES

package/dist/index.d.ts

@@ -0,0 +1,621 @@
+/// <reference types="react" />
+
+import { Context } from 'react';
+import { default as default_2 } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { HTMLAttributes } from 'react';
+import { HTMLProps } from 'react';
+import { InputHTMLAttributes } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import * as React_2 from 'react';
+import { ReactElement } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+import { SelectHTMLAttributes } from 'react';
+import { TextareaHTMLAttributes } from 'react';
+
+declare interface Column {
+    title: string;
+    links?: Link[];
+    text?: string;
+}
+
+declare interface IBreadcrumbs {
+    text: string;
+    href: string;
+}
+
+declare type IconFetcher = {
+    fetchIcon: (name: string, path: string | undefined) => Promise<string | null>;
+};
+
+declare interface InputProps extends default_2.InputHTMLAttributes<HTMLInputElement> {
+    /** The input's label */
+    label?: string;
+    /** The input's id */
+    id: string;
+}
+
+declare interface IPktAccordion {
+    className?: string;
+    children: ReactNode | ReactNode[];
+    /**
+     * @default compact: "false"
+     */
+    compact?: boolean;
+    /**
+     * @default skin: "borderless"
+     */
+    skin?: 'borderless' | 'outlined' | 'beige' | 'blue';
+}
+
+declare interface IPktAccordionItem {
+    children?: default_2.ReactNode | default_2.ReactNode[];
+    className?: string;
+    defaultOpen?: boolean;
+    id: string;
+    title: string | default_2.ReactNode;
+    toggleProps?: IPktAccordionToggleProps;
+}
+
+/**
+ * @param toggleProps
+ *
+ * @description Send in an "isOpen" boolean and "onToggleClick" function
+ * to override the automatic toggling
+ */
+declare interface IPktAccordionToggleProps {
+    isOpen: boolean;
+    onToggleClick: (e: default_2.MouseEvent, id: string) => void;
+}
+
+declare interface IPktAlert extends default_2.HTMLAttributes<HTMLDivElement> {
+    skin?: 'error' | 'success' | 'warning' | 'info';
+    closeAlert?: boolean;
+    onClose?: () => void;
+    title?: string;
+    date?: string;
+    ariaLive?: 'off' | 'polite' | 'assertive';
+    compact?: boolean;
+}
+
+declare interface IPktBackLink extends default_2.AnchorHTMLAttributes<HTMLAnchorElement> {
+    href?: string;
+    text?: string;
+    className?: string;
+}
+
+declare interface IPktBreadcrumbs extends default_2.AnchorHTMLAttributes<HTMLAnchorElement> {
+    breadcrumbs: IBreadcrumbs[];
+    navigationType?: 'router' | 'anchor';
+}
+
+declare interface IPktButton extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    iconName?: string;
+    secondIconName?: string;
+    mode?: 'light' | 'dark';
+    size?: 'small' | 'medium' | 'large';
+    color?: 'blue' | 'blue-outline' | 'green' | 'green-outline' | 'green-dark' | 'green-dark-outline' | 'beige-light' | 'beige-dark-outline' | 'yellow' | 'yellow-outline' | 'red' | 'red-outline';
+    skin?: 'primary' | 'secondary' | 'tertiary';
+    variant?: 'label-only' | 'icon-left' | 'icon-right' | 'icon-only' | 'icons-right-and-left';
+    state?: 'normal' | 'focus' | 'hover' | 'active';
+    type?: 'button' | 'submit' | 'reset';
+    isLoading?: boolean;
+    onClick?: (event: default_2.MouseEvent<HTMLButtonElement>) => void;
+}
+
+declare interface IPktCheckbox extends default_2.InputHTMLAttributes<HTMLInputElement> {
+    id: string;
+    hasTile?: boolean;
+    disabled?: boolean;
+    label?: string;
+    labelPosition?: 'right' | 'left';
+    hideLabel?: boolean;
+    checkHelptext?: string;
+    hasError?: boolean;
+    defaultChecked?: boolean;
+    isSwitch?: boolean;
+    value?: string;
+}
+
+declare interface IPktFooter extends default_2.HTMLAttributes<HTMLDivElement> {
+    columnOne: Column;
+    columnTwo: Column;
+    socialLinks?: SocialLink[];
+    personvernOgInfoLink?: string;
+    tilgjengelighetLink?: string;
+}
+
+declare interface IPktFooterSimple extends default_2.HTMLAttributes<HTMLDivElement> {
+    links?: Array<{
+        href: string;
+        text: string;
+        external?: boolean;
+        openInNewTab?: boolean;
+    }>;
+    personvernOgInfoLink?: string;
+    tilgjengelighetLink?: string;
+}
+
+declare interface IPktHeader extends HTMLAttributes<HTMLDivElement> {
+    logoLink?: string | (() => void);
+    serviceName?: string;
+    fixed?: boolean;
+    scrollToHide?: boolean;
+    user?: User;
+    userMenu?: UserMenuItem[];
+    representing?: Representing;
+    userOptions?: UserMenuItem[];
+    userMenuFooter?: UserMenuFooterItem[];
+    canChangeRepresentation?: boolean;
+    showMenuButton?: boolean;
+    showLogOutButton?: boolean;
+    openMenu?: () => void;
+    logOut?: () => void;
+    changeRepresentation?: () => void;
+    children?: default_2.ReactNode | default_2.ReactNode[];
+}
+
+declare interface IPktInputWrapper extends RefAttributes<HTMLElement> {
+    forId: string;
+    label: string;
+    helptext?: string;
+    helptextDropdown?: string;
+    helptextDropdownButton?: string;
+    counter?: boolean;
+    counterCurrent?: number;
+    counterMaxLength?: number;
+    optionalTag?: boolean;
+    optionalText?: string;
+    requiredTag?: boolean;
+    requiredText?: string;
+    hasError?: boolean;
+    errorMessage?: string | ReactNode | ReactNode[];
+    disabled?: boolean;
+    inline?: boolean;
+    ariaDescribedby?: string;
+    useWrapper?: boolean;
+    children?: ReactNode | ReactNode[];
+    className?: string;
+    hasFieldset?: boolean;
+}
+
+declare interface IPktLinkCard extends default_2.HTMLAttributes<HTMLAnchorElement> {
+    skin?: 'normal' | 'blue' | 'beige' | 'beige-outline' | 'green' | 'grey' | 'grey-outline';
+    title?: string;
+    href?: string;
+    iconName?: string;
+    openInNewTab?: boolean;
+    external?: boolean;
+}
+
+declare interface IPktLoader extends HTMLAttributes<HTMLDivElement> {
+    message?: string;
+    inline?: boolean;
+    /**
+     * The boolean 'isLoading' decides whether the loader or the children will be displayed.
+     * If set to false, the children will be displayed.
+     */
+    isLoading?: boolean;
+    /**
+     * Default size is set to "medium"
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Variants available are "blue" spinner, "rainbow" spinner and
+     * "shapes" oslo wave loader. Default is rainbow.
+     */
+    variant?: 'blue' | 'rainbow' | 'shapes';
+    /**
+     * The `delay` prop controls how much time the loading should be given before the loader is displayed.
+     * This is handy for situations where the load time might be so short that loader is not necessary.
+     * Delay time is in milliseconds.
+     */
+    delay?: number;
+}
+
+declare interface IPktMessagebox extends default_2.HTMLAttributes<HTMLDivElement> {
+    skin?: 'beige' | 'red' | 'green' | 'blue';
+    title?: string;
+    compact?: boolean;
+    closable?: boolean;
+    onClose?: () => void;
+}
+
+declare interface IPktProgressbar extends HTMLAttributes<HTMLDivElement> {
+    valueCurrent: number;
+    valueMax?: number;
+    valueMin?: number;
+    ariaValueText?: string;
+    skin?: 'dark-blue' | 'light-blue' | 'green' | 'red';
+    title?: string;
+    titlePosition?: 'left' | 'center';
+    statusType?: 'none' | 'percentage' | 'fraction';
+    statusPlacement?: 'center' | 'left' | 'following';
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    role?: 'progressbar' | 'meter';
+    className?: string;
+    id?: string;
+}
+
+declare interface IPktSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    ariaDescribedby?: string;
+    ariaLabelledby?: string;
+    children?: ReactNode | ReactNode[];
+    disabled?: boolean;
+    errorMessage?: string | ReactNode | ReactNode[];
+    hasError?: boolean;
+    helptext?: string;
+    helptextDropdown?: string;
+    helptextDropdownButton?: string;
+    id: string;
+    inline?: boolean;
+    fullwidth?: boolean;
+    label: string;
+    name?: string;
+    optionalTag?: boolean;
+    optionalText?: string;
+    requiredTag?: boolean;
+    requiredText?: string;
+}
+
+declare interface IPktStep {
+    /**
+     * Step content. Can be a string, a React component or an element.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Step status. Can be 'completed', 'incomplete' or 'current'
+     */
+    status: TStepStatus;
+    /**
+     * Title of the step
+     */
+    title: string;
+}
+
+declare interface IPktStepper extends default_2.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
+     * @default true
+     */
+    hideNonActiveStepsContent?: boolean;
+    /**
+     * Orientation of the stepper.
+     * @default vertical
+     */
+    orientation?: 'horizontal' | 'vertical';
+}
+
+declare interface IPktTag extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    skin?: 'blue' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'blue-light';
+    textStyle?: 'normal-text' | 'thin-text';
+    size?: 'small' | 'medium' | 'large';
+    closeTag?: boolean;
+    iconName?: string;
+    ariaLabel?: string;
+}
+
+declare interface IPktTextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    id: string;
+    ariaDescribedby?: string;
+    ariaLabelledby?: string;
+    counter?: boolean;
+    counterMaxLength?: number;
+    disabled?: boolean;
+    errorMessage?: string | ReactNode | ReactNode[];
+    hasError?: boolean;
+    helptext?: string;
+    helptextDropdown?: string;
+    helptextDropdownButton?: string;
+    inline?: boolean;
+    fullwidth?: boolean;
+    label: string;
+    name?: string;
+    optionalTag?: boolean;
+    optionalText?: string;
+    requiredTag?: boolean;
+    requiredText?: string;
+    placeholder?: string;
+    rows?: number;
+    useWrapper?: boolean;
+}
+
+declare 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;
+    helptextDropdown?: string;
+    helptextDropdownButton?: string;
+    iconNameRight?: string;
+    inline?: boolean;
+    fullwidth?: boolean;
+    label: string;
+    name?: string;
+    optionalTag?: boolean;
+    optionalText?: string;
+    requiredTag?: boolean;
+    requiredText?: string;
+    placeholder?: string;
+    prefix?: string;
+    suffix?: string;
+    type?: string;
+    useWrapper?: boolean;
+    value?: string;
+    omitSearchIcon?: boolean;
+}
+
+declare interface IRadio extends default_2.InputHTMLAttributes<HTMLInputElement> {
+    id: string;
+    name: string;
+    label: string;
+    hasTile?: boolean;
+    disabled?: boolean;
+    checkHelptext?: string;
+    hasError?: boolean;
+    value?: string;
+}
+
+declare interface ISearch extends HTMLProps<HTMLInputElement> {
+    appearance?: 'local' | 'local-with-button' | 'global';
+    disabled?: boolean;
+    fullwidth?: boolean;
+    id: string;
+    label?: string;
+    name?: string;
+    placeholder?: string;
+    suggestions?: SearchSuggestion[];
+    value?: string | undefined;
+    onSearch?: (value: string) => void;
+    onSuggestionClick?: (index: number) => void;
+    action?: string;
+    method?: 'get' | 'post' | 'dialog';
+}
+
+declare interface ISearchForm extends ISearch {
+    action?: string;
+    method?: 'get' | 'post' | 'dialog';
+}
+
+declare interface ISearchInput extends ISearch {
+    onChange: (event: default_2.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+}
+
+declare interface ISpecObject {
+    name?: string;
+    'css-class'?: string;
+    'dark-mode'?: boolean;
+    props?: Record<string, PropObject | string[]>;
+    events?: Record<string, PropObject>;
+    slots?: Record<string, any>;
+    default?: any;
+}
+
+declare interface ITableBodyProps {
+    className?: string;
+    children: React_2.ReactNode;
+}
+
+declare interface ITableDataCellProps {
+    className?: string;
+    children?: React_2.ReactNode;
+    dataLabel?: string;
+}
+
+declare interface ITableHeaderCellProps {
+    className?: string;
+    children: React_2.ReactNode;
+}
+
+declare interface ITableHeaderProps {
+    className?: string;
+    children: React_2.ReactNode;
+}
+
+declare interface ITableProps {
+    compact?: boolean;
+    skin?: 'basic' | 'zebra-blue';
+    responsiveView?: boolean;
+    className?: string;
+    children: React_2.ReactNode;
+}
+
+declare interface ITableRowProps {
+    className?: string;
+    children: React_2.ReactNode;
+}
+
+declare interface ITabs {
+    arrowNav?: boolean;
+    tabs: Tab[];
+    onTabSelected?: (index: number) => void;
+}
+
+declare interface Link {
+    href: string;
+    text: string;
+    external?: boolean;
+    openInNewTab?: boolean;
+}
+
+export declare const PktAccordion: ForwardRefExoticComponent<IPktAccordion & RefAttributes<HTMLDivElement>>;
+
+export declare const PktAccordionItem: default_2.ForwardRefExoticComponent<IPktAccordionItem & default_2.RefAttributes<HTMLDetailsElement>>;
+
+export declare const PktAlert: default_2.ForwardRefExoticComponent<IPktAlert & default_2.RefAttributes<HTMLDivElement>>;
+
+export declare const PktBackLink: default_2.ForwardRefExoticComponent<IPktBackLink & default_2.RefAttributes<HTMLAnchorElement>>;
+
+export declare const PktBreadcrumbs: default_2.ForwardRefExoticComponent<IPktBreadcrumbs & default_2.RefAttributes<HTMLAnchorElement>>;
+
+export declare const PktButton: default_2.ForwardRefExoticComponent<IPktButton & default_2.RefAttributes<HTMLButtonElement>>;
+
+export declare const PktCheckbox: default_2.ForwardRefExoticComponent<IPktCheckbox & default_2.RefAttributes<HTMLInputElement>>;
+
+export declare const PktFooter: default_2.FC<IPktFooter>;
+
+export declare const PktFooterSimple: default_2.FC<IPktFooterSimple>;
+
+export declare const PktHeader: default_2.ForwardRefExoticComponent<IPktHeader & default_2.RefAttributes<HTMLDivElement>>;
+
+export declare const PktIcon: default_2.FC<PktIconProps>;
+
+export declare const PktIconContext: Context<IconFetcher>;
+
+declare interface PktIconProps extends default_2.HTMLAttributes<HTMLSpanElement> {
+    name?: string;
+    path?: string;
+}
+
+/**
+ * Input component
+ * @param {string} label - Label for the input
+ * @param {string} id - Id for the input
+ * @param {string} validationMessage - Validation message for the input
+ * @param {React.InputHTMLAttributes<HTMLInputElement>} props - Other props to pass to the input
+ * @returns {React.ReactElement} - React element
+ *
+ * @example
+ * <Input label="First name" id="firstName" validationMessage="First name is required" />
+ *
+ */
+export declare const PktInput: default_2.ForwardRefExoticComponent<InputProps & default_2.RefAttributes<HTMLInputElement>>;
+
+export declare const PktInputWrapper: default_2.ForwardRefExoticComponent<Omit<IPktInputWrapper, "ref"> & default_2.RefAttributes<HTMLDivElement>>;
+
+export declare const PktLinkCard: default_2.ForwardRefExoticComponent<IPktLinkCard & default_2.RefAttributes<HTMLAnchorElement>>;
+
+export declare const PktLoader: default_2.ForwardRefExoticComponent<IPktLoader & default_2.RefAttributes<HTMLDivElement>>;
+
+export declare const PktMessagebox: default_2.ForwardRefExoticComponent<IPktMessagebox & default_2.RefAttributes<HTMLDivElement>>;
+
+export declare const PktPreview: default_2.FC<PreviewProps>;
+
+export declare const PktProgressbar: default_2.ForwardRefExoticComponent<IPktProgressbar & default_2.RefAttributes<HTMLDivElement>>;
+
+export declare const PktRadioButton: default_2.ForwardRefExoticComponent<IRadio & default_2.RefAttributes<HTMLInputElement>>;
+
+export declare const PktSearchInput: default_2.ForwardRefExoticComponent<(Omit<ISearchForm, "ref"> | Omit<ISearchInput, "ref">) & default_2.RefAttributes<HTMLInputElement>>;
+
+export declare const PktSelect: default_2.ForwardRefExoticComponent<IPktSelectProps & default_2.RefAttributes<HTMLSelectElement>>;
+
+export declare const PktStep: ({ children, className, status, title }: IPktStep) => JSX_2.Element;
+
+export declare const PktStepper: default_2.ForwardRefExoticComponent<IPktStepper & default_2.RefAttributes<HTMLOListElement>>;
+
+export declare const PktTable: ({ className, compact, skin, responsiveView, children, }: ITableProps) => JSX_2.Element;
+
+export declare const PktTableBody: ({ children, className }: ITableBodyProps) => JSX_2.Element;
+
+export declare const PktTableDataCell: ({ children, className, dataLabel }: ITableDataCellProps) => JSX_2.Element;
+
+export declare const PktTableHeader: ({ className, children }: ITableHeaderProps) => JSX_2.Element;
+
+export declare const PktTableHeaderCell: ({ className, children }: ITableHeaderCellProps) => JSX_2.Element;
+
+export declare const PktTableRow: ({ className, children }: ITableRowProps) => JSX_2.Element;
+
+export declare const PktTabs: default_2.ForwardRefExoticComponent<ITabs & default_2.RefAttributes<HTMLDivElement>>;
+
+export declare const PktTag: default_2.ForwardRefExoticComponent<IPktTag & default_2.RefAttributes<HTMLButtonElement>>;
+
+export declare const PktTextarea: ForwardRefExoticComponent<IPktTextareaProps & RefAttributes<HTMLTextAreaElement>>;
+
+export declare const PktTextinput: default_2.ForwardRefExoticComponent<IPktTextinput & default_2.RefAttributes<HTMLInputElement>>;
+
+declare interface PreviewProps {
+    children?: ReactNode;
+    specs: ISpecObject;
+    fullWidth?: boolean;
+}
+
+declare type PropObject = {
+    name?: string;
+    description?: string;
+    type?: string | string[];
+    converter?: string;
+    reflect?: boolean;
+    default?: any;
+    items?: PropObject;
+};
+
+declare interface Representing {
+    name?: string;
+    shortname?: string;
+    orgNumber?: string | number;
+}
+
+declare interface SearchSuggestion {
+    title?: string;
+    text?: string;
+    href?: string;
+    onClick?: () => void;
+}
+
+declare interface SocialLink {
+    href: string;
+    iconName?: string;
+    language?: string;
+    openInNewTab?: boolean;
+}
+
+declare interface Tab {
+    text: string;
+    href?: string;
+    action?: (index: number) => void;
+    icon?: string;
+    controls?: string;
+    tag?: {
+        text: string;
+        skin: TSkin | undefined;
+    };
+    active?: boolean;
+}
+
+declare type TSkin = 'blue' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'blue-light';
+
+declare type TStepStatus = 'completed' | 'incomplete' | 'current';
+
+declare interface User {
+    name?: string;
+    shortname?: string;
+    lastLoggedIn?: string | Date;
+}
+
+declare interface UserMenuFooterItem {
+    title: string;
+    target: string | (() => void);
+}
+
+declare interface UserMenuItem {
+    iconName?: string;
+    title: string;
+    target: string | (() => void);
+}
+
+export { }