@fremtind/jokul 0.14.1 → 0.16.0

package/build/packages/jokul/src/components/button/types.d.ts

@@ -1,6 +1,23 @@
-import { Density, PolymorphicPropsWithRef } from '../..';
+import { Density } from '../../core';
+import { PolymorphicPropsWithRef } from '../../utilities';
 export declare const buttonVariants: readonly ["primary", "secondary", "tertiary", "ghost"];
 export type ButtonVariant = (typeof buttonVariants)[number];
+export type IconPosition = "left" | "right";
+type IconOptions<T extends React.ElementType> = {
+    iconPosition?: never;
+    icon?: never;
+    children: React.ComponentPropsWithoutRef<T>["children"];
+} | {
+    /**
+     * Plasseringen av ikonet
+     * @default "left"
+     */
+    iconPosition?: IconPosition;
+    /**
+     * Hvilket ikon som skal vises i knappen
+     */
+    icon: React.ReactElement;
+};
 export type ButtonProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<ElementType, {
     density?: Density;
     /**
@@ -13,7 +30,14 @@ export type ButtonProps<ElementType extends React.ElementType> = PolymorphicProp
         showLoader: boolean;
         textDescription: string;
     };
+    /**
+     * @deprecated Bruk `icon` i kombinasjon med `iconPosition="left"`
+     */
     iconLeft?: React.ReactNode;
+    /**
+     * @deprecated Bruk `icon` i kombinasjon med `iconPosition="right"`
+     */
     iconRight?: React.ReactNode;
-}>;
+} & IconOptions<ElementType>>;
 export type ButtonComponent = <ElementType extends React.ElementType = "button">(props: ButtonProps<ElementType>) => React.ReactElement | null;
+export {};

package/build/packages/jokul/src/components/datepicker/internal/Calendar.d.ts

@@ -6,7 +6,6 @@ interface CalendarProps extends Omit<UseCalendarProps, "date" | "onOffsetChanged
     date: Date | null;
     density?: Density;
     defaultSelected?: Date;
-    hidden?: boolean;
     days?: string[];
     months?: string[];
     monthLabel?: string;

package/build/packages/jokul/src/components/popover/Popover.d.ts

@@ -1,4 +1,4 @@
-import { useFocus, useHover, useClick, useDismiss, useRole, UseFloatingOptions } from '@floating-ui/react';
+import { useFocus, useHover, useClick, useDismiss, useRole, UseFloatingOptions, ReferenceType } from '@floating-ui/react';
 import * as React from "react";
 type ClickOptions = Parameters<typeof useClick>[1];
 type DismissOptions = Parameters<typeof useDismiss>[1];
@@ -8,72 +8,95 @@ type RoleOptions = Parameters<typeof useRole>[1];
 interface PopoverOptions {
     /**
      * Angir om popoveren er åpen eller lukket.
-     * @see https://floating-ui.com/docs/useFloating#open
+     *
+     * @see https://floating-ui.com/docs/usefloating#open
      */
     open?: boolean;
     /**
      * Callback som trigges når popoveren åpnes eller lukkes.
-     * @see https://floating-ui.com/docs/useFloating#onOpenChange
+     *
+     * @see https://floating-ui.com/docs/usefloating#onopenchange
      */
     onOpenChange?: UseFloatingOptions["onOpenChange"];
     /**
      * Bestemmer plasseringen av popoveren.
+     *
+     * @see https://floating-ui.com/docs/usefloating#placement
+     *
      * @default "bottom-start"
-     * @see https://floating-ui.com/docs/useFloating#placement
      */
     placement?: UseFloatingOptions["placement"];
     /**
      * Definerer strategien for posisjonering av popoveren.
+     *
+     * @see https://floating-ui.com/docs/usefloating#strategy
+     *
      * @default "absolute"
-     * @see https://floating-ui.com/docs/useFloating#strategy
      */
     strategy?: UseFloatingOptions["strategy"];
     /**
      * Angir om popoveren skal fungere som en modal, der fokus er låst til det flytende elementet
      * og innhold utenfor ikke kan interageres med.
+     *
+     * @see https://floating-ui.com/docs/usefloating#modal
+     *
      * @default true
-     * @see https://floating-ui.com/docs/useFloating#modal
      */
     modal?: boolean;
-    /**
-     * Offset til det flytende elementet.
-     * @see https://floating-ui.com/docs/offset
-     * @default 4
-     * */
     /**
      * Justerer avstanden mellom referanse-elementet og popoveren.
+     *
      * @see https://floating-ui.com/docs/offset
+     *
      * @default 4
      */
     offset?: number;
+    /**
+     * Referanse til elementet som popoveren skal posisjoneres i forhold til.
+     *
+     * @see https://floating-ui.com/docs/usefloating#setpositionreference
+     *
+     * @default Popover.Trigger
+     */
+    positionReference?: React.RefObject<ReferenceType>;
     /**
      * Options for hover-interaksjoner.
-     * @see https://floating-ui.com/docs/useHover
+     *
+     * @see https://floating-ui.com/docs/usehover
+     *
      * @default { enabled: false }
      */
     hoverOptions?: HoverOptions;
     /**
      * Options for fokus-interaksjoner.
-     * @see https://floating-ui.com/docs/useFocus
+     *
+     * @see https://floating-ui.com/docs/usefocus
+     *
      * @default { enabled: false }
      */
     focusOptions?: FocusOptions;
     /**
      * Options for klikk-interaksjoner.
-     * @see https://floating-ui.com/docs/useClick
+     *
+     * @see https://floating-ui.com/docs/useclick
+     *
      * @default { enabled: false }
      */
     clickOptions?: ClickOptions;
     /**
      * Konfigurerer rollen for popoveren.
-     * @see https://floating-ui.com/docs/useRole
+     *
+     * @see https://floating-ui.com/docs/userole
+     *
      * @default { enabled: true, role: "dialog" }
      */
     roleOptions?: RoleOptions;
     /**
      * Options for å lukke popoveren når en dismissal skjer,
      * som ved å klikke utenfor eller trykke på "Escape"-tasten.
-     * @see https://floating-ui.com/docs/useDismiss
+     *
+     * @see https://floating-ui.com/docs/usedismiss
+     *
      * @default { enabled: true }
      */
     dismissOptions?: DismissOptions;
@@ -88,8 +111,10 @@ declare const Popover: {
 interface PopoverTriggerProps {
     children: React.ReactNode;
     /**
-     * Rendrer komponenten som child-elementet sitt, og slår
-     * sammen egenskaper og props.
+     * Rendrer komponenten som child-elementet sitt, og slår sammen egenskaper og props.
+     *
+     * Default er `false`.
+     *
      * @example
      * ```tsx
      * <Component asChild foo="bar">
@@ -99,16 +124,31 @@ interface PopoverTriggerProps {
      * // Rendrer følgende:
      * <Child foo="bar" baz="qux" />
      * ```
-     *
-     * @default false
      */
     asChild?: boolean;
 }
 interface PopoverContentProps {
     /**
      * Padding rundt innholdet i popoveren.
-     * @default 0
+     *
+     * Default er `0`.
      */
     padding?: 0 | 8 | 16 | 24;
+    /**
+     *
+     * Angir hvilket element som skal motta fokus ved åpning.
+     * Kan være en tabbar index eller en referanse til et element."
+     *
+     * Default er `0`, som betyr at det første fokuserbare elementet i popoveren får fokus.
+     * @see https://floating-ui.com/docs/FloatingFocusManager#initialfocus
+     */
+    initialFocus?: number | React.RefObject<HTMLElement>;
+    /**
+     * Angir om fokus skal returneres til triggeren når popoveren lukkes.
+     *
+     * Default er `true`.
+     * @see https://floating-ui.com/docs/FloatingFocusManager#returnfocus
+     */
+    returnFocus?: boolean;
 }
 export default Popover;

package/build/packages/jokul/src/components/popover/utils.d.ts

@@ -1,4 +1,4 @@
-export declare const getThemeAndDensity: (element: HTMLElement | null) => {
+export declare const getThemeAndDensity: (element: Element | undefined) => {
     theme?: string | undefined;
     density?: string | undefined;
 };

package/build/packages/jokul/src/components/text-input/BaseTextInput.d.ts

@@ -21,6 +21,10 @@ export interface BaseTextInputProps extends Omit<InputHTMLAttributes<HTMLInputEl
      * @default "left"
      */
     align?: "left" | "right";
+    /**
+     * @deprecated Bruk heller actionButton
+     *
+     */
     action?: Action;
     density?: Density;
     /**
@@ -29,6 +33,10 @@ export interface BaseTextInputProps extends Omit<InputHTMLAttributes<HTMLInputEl
      * */
     unit?: ReactNode;
     width?: string;
+    /**
+     * Element som vises til høyre for inputfeltet. Brukes typisk til å trigge en handling som f.eks. å vise/skjule passord.
+     */
+    actionButton?: React.ReactElement<IconProps>;
 }
 export declare const BaseTextInput: React.ForwardRefExoticComponent<BaseTextInputProps & React.RefAttributes<HTMLInputElement>>;
 export {};