npm - @fremtind/jokul - Versions diffs - 0.28.1 → 0.30.0 - Mend

@fremtind/jokul 0.28.1 → 0.30.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (279) hide show

package/build/cjs/components/select/Select.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.cjs","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n ChangeEvent,\n CSSProperties,\n FocusEvent,\n forwardRef,\n KeyboardEvent,\n MouseEvent,\n RefObject,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { DataTestAutoId, Density } from \"../../core/types.js\";\nimport { useAnimatedHeight } from \"../../hooks/useAnimatedHeight/useAnimatedHeight.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useListNavigation } from \"../../hooks/useListNavigation/useListNavigation.js\";\nimport { usePreviousValue } from \"../../hooks/usePreviousValue/usePreviousValue.js\";\nimport { getValuePair, ValuePair } from \"../../utilities/valuePair.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { InputGroup, InputGroupProps } from \"../input-group/InputGroup.js\";\nimport { LabelProps } from \"../input-group/Label.js\";\nimport { focusSelected, toLower } from \"./select-utils.js\";\n\ninterface PartialChangeEvent\n extends Partial<Omit<ChangeEvent<HTMLSelectElement>, \"target\">> {\n /** Kreves av react-hook-form, det skjer ulike ting avhengig av om det er blur eller change /\n type: \"change\" \| \"blur\";\n target: {\n /* Kreves av react-hook-form for å vite hvilket skjemafelt som ble endret /\n name: string;\n value: string;\n };\n}\n\ntype ChangeEventHandler = (event: PartialChangeEvent) => void;\n\ninterface Option extends ValuePair {\n visible: boolean;\n}\n\nexport interface SelectProps\n extends Omit<InputGroupProps, \"children\">,\n DataTestAutoId {\n id?: string;\n name: string;\n label: string;\n labelProps?: Omit<\n LabelProps,\n \"children\" \| \"density\" \| \"htmlFor\" \| \"standAlone\"\n >;\n items: Array<string \| ValuePair>;\n /\n @default false\n /\n inline?: boolean;\n /\n @default \"Velg\"\n /\n defaultPrompt?: string;\n className?: string;\n value?: string;\n helpLabel?: string;\n errorLabel?: string;\n /\n @default false\n /\n searchable?:\n \| boolean\n \| ((searchValue: string, searchItem: string \| ValuePair) => boolean);\n density?: Density;\n width?: string;\n onChange?: ChangeEventHandler;\n onBlur?: ChangeEventHandler;\n onFocus?: ChangeEventHandler;\n /\n Merk som ugyldig uten å sende inn en errorLabel.\n * NB! Brukes kun i tilfeller der valideringsfeil dukker opp andre steder, for eksempel i en FieldGroup.\n /\n invalid?: boolean;\n /\n Hvor mange valg skal vises i listen før den begynner å scrolle.\n * @default 5\n /\n maxShownOptions?: number;\n}\n\nconst noop = () => {\n return;\n};\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n (props, forwardedSelectRef) => {\n const {\n id,\n name,\n items,\n value,\n label,\n labelProps,\n onChange,\n onBlur,\n onFocus,\n className,\n helpLabel,\n errorLabel,\n invalid,\n searchable = false,\n inline = false,\n defaultPrompt = \"Velg\",\n density,\n width,\n maxShownOptions = 5,\n style,\n tooltipProps,\n ...rest\n } = props;\n\n const listId = useId(id \|\| \"jkl-select\", { generateSuffix: !id });\n const labelId = `${listId}_label`;\n const buttonId = `${listId}_button`;\n const searchInputId = `${listId}_search-input`;\n\n const [dropdownIsShown, setShown] = useState(false);\n const toggleListVisibility = useCallback(() => {\n setShown((previousValue) => !previousValue);\n }, []);\n\n /// Søk\n\n const isSearchable = Boolean(searchable);\n const showSearchInputField = isSearchable && dropdownIsShown;\n const [searchValue, setSearchValue] = useState(\"\");\n const searchFn = useCallback(\n (item: ValuePair) => {\n if (\n item.label.toLowerCase().includes(searchValue.toLowerCase())\n ) {\n return true;\n }\n\n if (typeof searchable === \"function\") {\n return searchable(searchValue, item);\n }\n\n return false;\n },\n [searchable, searchValue],\n );\n const visibleItems: Option[] = useMemo(\n () =>\n items.map(getValuePair).map((item) => {\n const visible =\n !isSearchable \|\| searchValue === \"\" \|\| searchFn(item);\n return { ...item, visible };\n }),\n [items, isSearchable, searchValue, searchFn],\n );\n const valueIsInItems: boolean = useMemo(() => {\n if (typeof value === \"undefined\") {\n return false;\n }\n return items.some((item) =>\n typeof item === \"string\"\n ? item === value\n : item.value === value,\n );\n }, [value, items]);\n\n /// Valg av <option>\n\n const [selectedValue, setSelectedValue] = useState<string>(\n valueIsInItems && value !== undefined ? value : \"\",\n );\n const hasSelectedValue = selectedValue !== \"\";\n const selectedValueLabel = useMemo(\n () =>\n visibleItems.find((item) => item.value === selectedValue)\n ?.label \|\| defaultPrompt,\n [visibleItems, selectedValue, defaultPrompt],\n );\n\n const selectRef = useRef<HTMLSelectElement \| null>(null);\n // Hjelpefunksjon som gjør det enklere å forwarde refen og å bruke den selv internt\n const unifiedSelectRef = useCallback(\n (instance: HTMLSelectElement \| null) => {\n selectRef.current = instance;\n if (forwardedSelectRef) {\n if (typeof forwardedSelectRef === \"function\") {\n forwardedSelectRef(instance);\n } else {\n forwardedSelectRef.current = instance;\n }\n }\n if (instance) {\n setSelectedValue(instance.value);\n }\n },\n [selectRef, forwardedSelectRef],\n );\n\n const previousValue = usePreviousValue(value);\n useEffect(() => {\n if (value === previousValue) {\n return;\n }\n if (typeof value === \"undefined\" \|\| !valueIsInItems) {\n setSelectedValue(\"\");\n } else {\n setSelectedValue(value);\n }\n }, [setSelectedValue, value, previousValue, valueIsInItems]);\n\n const selectOption = useCallback(\n (item: Option) => {\n const nextValue = item.value;\n setSearchValue(\"\");\n setSelectedValue(nextValue);\n toggleListVisibility();\n },\n [setSearchValue, setSelectedValue, toggleListVisibility],\n );\n\n // La komponenten rendre <select> med den valgte verdien før onChange trigges, slik at\n // react-hook-form@>7.41.1 behandler feltet som at det har en verdi.\n const previousSelectedValue = usePreviousValue(selectedValue);\n useEffect(() => {\n // previousSelectedValue er undefined på første render, men da vil vi ikke ha en onChange uansett\n if (\n typeof previousSelectedValue === \"undefined\" \|\|\n previousSelectedValue === selectedValue \|\|\n selectedValue === value\n ) {\n return;\n }\n if (onChange) {\n onChange({\n type: \"change\",\n target: { name, value: selectedValue },\n });\n }\n if (selectRef.current) {\n selectRef.current.dispatchEvent(\n new Event(\"change\", { bubbles: true }),\n );\n }\n }, [onChange, name, value, selectedValue, previousSelectedValue]);\n\n /// Fokushåndtering\n\n const componentRootElementRef = useRef<HTMLDivElement>(null);\n const focusInsideRef = useRef(false);\n const searchFieldRef = useRef<HTMLInputElement>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n\n const handleFocusPlacement = useCallback(\n (isOpen: boolean, ref: RefObject<HTMLElement>) => {\n if (isOpen && !isSearchable) {\n const listElement = ref.current;\n if (listElement) {\n focusSelected(listElement, selectedValue);\n }\n } else if (isOpen) {\n if (searchFieldRef.current) {\n searchFieldRef.current.focus();\n }\n } else {\n if (focusInsideRef.current && buttonRef.current) {\n buttonRef.current.focus();\n }\n }\n },\n [isSearchable, selectedValue],\n );\n\n const [dropdownRef] = useAnimatedHeight<HTMLDivElement>(\n dropdownIsShown,\n {\n onFirstVisible: handleFocusPlacement,\n onTransitionEnd: handleFocusPlacement,\n },\n );\n\n useListNavigation({ ref: dropdownRef });\n\n const close = useCallback(() => {\n if (isSearchable) {\n setSearchValue(\"\");\n }\n if (onBlur) {\n onBlur({\n type: \"blur\",\n target: { name, value: selectedValue },\n });\n selectRef.current?.dispatchEvent(\n new Event(\"focusout\", { bubbles: true }),\n );\n }\n focusInsideRef.current = false;\n setShown(false);\n }, [\n onBlur,\n setSearchValue,\n setShown,\n isSearchable,\n name,\n selectedValue,\n ]);\n\n const handleBlur = useCallback(\n (e: FocusEvent<HTMLButtonElement \| HTMLInputElement>) => {\n const componentRootElement = componentRootElementRef.current;\n // There are known issues in Firefox when using \"relatedTarget\" in onBlur events:\n // https://github.com/facebook/react/issues/2011\n // This might be fixed in react 17. Se issue above.\n const nextFocusIsInsideComponent =\n componentRootElement &&\n componentRootElement.contains(e.relatedTarget as Node);\n if (!nextFocusIsInsideComponent) {\n close();\n }\n },\n [close],\n );\n\n const handleFocus = useCallback(() => {\n if (!focusInsideRef.current) {\n if (onFocus) {\n onFocus({\n type: \"change\",\n target: { name, value: selectedValue },\n });\n }\n focusInsideRef.current = true;\n }\n }, [onFocus, selectedValue, name]);\n\n const handleMouseOver = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n // Ved mouseOver på options flytter vi fokus til dem for å unngå \"dobbel fokus\"\n // der det ser ut som to forskjellige elementer er fokusert/hovered samtidig\n (e.target as HTMLButtonElement).focus({ preventScroll: true });\n },\n [],\n );\n\n // Handle focus and blur of hidden select element\n useEffect(() => {\n const select = selectRef.current;\n const searchField = searchFieldRef.current;\n const button = buttonRef.current;\n const componentRootElement = componentRootElementRef.current;\n\n select?.addEventListener(\"focus\", () => {\n showSearchInputField ? searchField?.focus() : button?.focus();\n });\n select?.addEventListener(\"blur\", function (this, ev) {\n componentRootElement &&\n componentRootElement.contains(ev.relatedTarget as Node) &&\n ev.preventDefault();\n });\n\n return () => {\n select?.removeEventListener(\"focus\", () => {\n showSearchInputField\n ? searchField?.focus()\n : button?.focus();\n });\n select?.removeEventListener(\"blur\", function (this, ev) {\n componentRootElement &&\n componentRootElement.contains(\n ev.relatedTarget as Node,\n ) &&\n ev.preventDefault();\n });\n };\n }, [showSearchInputField]);\n\n /// Tastaturnavigasjon\n\n // Add support for opening dropdown with arrowkey down as expected from native select\n // onKeyDown to stop ArrowDown from scrolling the page\n const handleOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n if (\n (e.key === \"ArrowDown\" \|\| e.key === \" \") &&\n !dropdownIsShown\n ) {\n e.preventDefault();\n e.stopPropagation();\n setShown(true);\n } else if (e.key === \"Escape\") {\n e.preventDefault();\n e.stopPropagation();\n setShown(false);\n }\n },\n [setShown, dropdownIsShown],\n );\n\n // onKeyDown to stop ArrowDown from scrolling the page\n const handleSearchOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n e.stopPropagation();\n\n const listElement = dropdownRef.current;\n if (listElement) {\n if (isSearchable) {\n // Flytt fokus til det første elementet i listen, ikke det forrige valgte.\n // Ved endring i filter er det ikke gitt at vi ønsker å ta utgangspunkt i\n // den valgte verdien.\n focusSelected(listElement, undefined);\n } else {\n focusSelected(listElement, selectedValue);\n }\n }\n } else if (e.key === \"Escape\") {\n e.preventDefault();\n e.stopPropagation();\n setShown(false);\n } else if (e.key === \"Tab\" && !e.shiftKey) {\n const listElement = dropdownRef.current;\n if (listElement) {\n e.preventDefault();\n e.stopPropagation();\n focusSelected(listElement, selectedValue);\n }\n } else if (e.key === \"Enter\" && dropdownIsShown) {\n // Should not propagate Enter keyevent because form might submit\n e.preventDefault();\n e.stopPropagation();\n }\n },\n [\n setShown,\n dropdownRef,\n selectedValue,\n isSearchable,\n dropdownIsShown,\n ],\n );\n\n // onKeyDown so this Tab listener isn't triggered by tabbing from search field to option\n const handleOptionOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === \"Tab\") {\n e.preventDefault();\n e.stopPropagation();\n\n if (e.shiftKey && searchFieldRef.current) {\n searchFieldRef.current.focus();\n } else if (buttonRef.current) {\n // Mimic behaviour of Firefox and native select, where Tab selects the current item and closes the menu\n setSelectedValue(e.currentTarget.value);\n setShown(false);\n buttonRef.current.focus();\n }\n } else if (e.key === \"ArrowUp\") {\n if (dropdownRef.current && searchFieldRef.current) {\n // Can't be based on index since the first item might be filtered out\n const firstVisible = dropdownRef.current.querySelector(\n '[role=\"option\"]:not([hidden])',\n );\n if (\n e.currentTarget.id === firstVisible?.id &&\n searchFieldRef.current\n ) {\n searchFieldRef.current.focus();\n }\n }\n }\n },\n [setShown, dropdownRef],\n );\n\n // Add support for closing the dropdown with Escape like native select. Unfortunately, Escape does not trigger the button onKeyDown.\n useEffect(() => {\n const handleEscape = (e: globalThis.KeyboardEvent) => {\n if (e.key === \"Escape\" && dropdownIsShown) {\n setShown(false);\n }\n };\n if (typeof window !== \"undefined\" && dropdownIsShown) {\n window.addEventListener(\"keydown\", handleEscape);\n }\n return () => {\n if (typeof window !== \"undefined\") {\n window.removeEventListener(\"keydown\", handleEscape);\n }\n };\n }, [setShown, dropdownIsShown]);\n\n return (\n <>\n <select\n name={name}\n tabIndex={-1}\n data-testid=\"jkl-native-select\"\n className=\"jkl-sr-only\"\n aria-hidden\n ref={unifiedSelectRef}\n value={selectedValue}\n onChange={noop} // React complains unless we give an onChange handler. This is technically a read-only field, but readOnly isn't an option here.\n >\n <option value=\"\"></option>{\" \"}\n {/ Tom option må være et valg, ellers vil <select> alltid ha en value /}\n {visibleItems.map((item) => (\n <option\n key={`${listId}-opt-${item.value}`}\n hidden={!item.visible}\n value={item.value}\n >\n {item.label}\n </option>\n ))}\n </select>\n <InputGroup\n ref={componentRootElementRef}\n data-testid=\"jkl-select\"\n className={clsx(\"jkl-select\", className, {\n \"jkl-select--inline\": inline,\n \"jkl-select--open\":\n dropdownIsShown &&\n visibleItems.some((item) => item.visible),\n \"jkl-select--no-value\": !hasSelectedValue,\n \"jkl-select--invalid\": !!errorLabel \|\| invalid,\n })}\n tooltipProps={\n tooltipProps && {\n ...tooltipProps,\n triggerProps: {\n ...tooltipProps.triggerProps,\n onFocus: (e) => {\n tooltipProps.triggerProps?.onFocus?.(e);\n close();\n },\n },\n }\n }\n {...rest}\n id={isSearchable ? searchInputId : buttonId}\n style={\n {\n [\"--jkl-select-max-shown-options\"]: maxShownOptions,\n ...style,\n } as CSSProperties\n }\n density={density}\n label={label}\n labelProps={{\n id: labelId,\n srOnly: inline,\n ...labelProps,\n htmlFor: isSearchable ? searchInputId : buttonId,\n }}\n helpLabel={helpLabel}\n errorLabel={errorLabel}\n render={({\n \"aria-invalid\": ariaInvalid,\n ...inputProps\n }) => (\n <div\n className=\"jkl-select__outer-wrapper\"\n style={{ width }}\n >\n {isSearchable && (\n <input\n {...inputProps}\n aria-invalid={ariaInvalid}\n id={searchInputId}\n hidden={!showSearchInputField}\n ref={searchFieldRef}\n placeholder=\"Søk\"\n value={searchValue}\n onChange={(e) =>\n setSearchValue(e.target.value)\n }\n data-testid=\"jkl-select__search-input\"\n className=\"jkl-select__search-input\"\n aria-autocomplete=\"list\"\n aria-activedescendant={\n hasSelectedValue\n ? `${listId}__${toLower(\n selectedValue,\n )}`\n : undefined\n }\n aria-controls={listId}\n aria-expanded={dropdownIsShown}\n role=\"combobox\"\n onKeyDown={handleSearchOnKeyDown}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onClick={(e) => {\n e.stopPropagation();\n }}\n />\n )}\n {/ eslint-disable-next-line jsx-a11y/role-supports-aria-props */}\n <button\n // Nei dette er ikke i henhold til speccen, men VoiceOver leser den likevel og det er oppførselen vi ønsker\n aria-invalid={ariaInvalid}\n {...inputProps}\n id={buttonId}\n ref={buttonRef}\n hidden={showSearchInputField}\n type=\"button\"\n name={`${name}-btn`}\n className={clsx(\"jkl-select__button\", {\n \"jkl-select__button--active-value\":\n !!selectedValue,\n })}\n data-testid=\"jkl-select__button\"\n aria-label={`${\n selectedValueLabel \|\| \"Velg\"\n },${label}`}\n aria-expanded={dropdownIsShown}\n aria-controls={listId}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onKeyDown={handleOnKeyDown}\n onClick={toggleListVisibility}\n onMouseDown={(e) => {\n // Workaround for en Safari-bug hvor e.relatedTarget er null i onBlur\n // https://twitter.com/MilesSorce/status/1278762360669265925\n e.preventDefault();\n buttonRef.current?.focus();\n }}\n >\n {selectedValueLabel}\n </button>\n <div\n id={listId}\n ref={dropdownRef}\n role=\"listbox\"\n className=\"jkl-select__options-menu\"\n hidden={\n !dropdownIsShown \|\|\n visibleItems.every((item) => !item.visible)\n }\n aria-labelledby={labelId}\n tabIndex={-1}\n data-focus=\"controlled\" // lar oss styre markering av valg vha focus\n >\n {visibleItems.map((item, i) =>\n // Det er viktig at vi _fjerner_ elementer som ikke er synlige fra DOMen for at tastaturnavigasjon skal fungere.\n // For eksempel, hvis vi har elementene Apple, Samsung og LG i den rekkefølgen og søker etter \"l\"\n // vil Samsung ikke synes. Om vi bare setter hidden-attributtet på Samsung vil ArrowDown fra Apple ikke fungere.\n // Dette lar seg ikke gjenskape i en enhetstest med JSDOM + user-events, og Cypress lukker Select\n // ved første {downArrow} ¯\\_(ツ)_/¯. Så please test scenariet over manuelt om dette skaper trøbbel for deg.\n item.visible ? (\n <button\n key={`${listId}-${item.value}`}\n hidden={!item.visible}\n type=\"button\"\n id={`${listId}__${toLower(\n item.value,\n )}`}\n className=\"jkl-select__option\"\n data-testid=\"jkl-select__option\"\n aria-selected={\n item.value === selectedValue\n }\n role=\"option\"\n value={item.value}\n data-testautoid={`jkl-select__option-${i}`}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onKeyDown={handleOptionOnKeyDown}\n onClick={(e) => {\n e.preventDefault();\n selectOption(item);\n }}\n onMouseOver={handleMouseOver}\n >\n {item.label}\n {item.description ? (\n <span className=\"jkl-select__option-description\">\n {item.description}\n </span>\n ) : null}\n </button>\n ) : null,\n )}\n </div>\n <ArrowVerticalAnimated\n variant=\"medium\"\n pointingDown={!dropdownIsShown}\n className=\"jkl-select__arrow\"\n />\n </div>\n )}\n />\n </>\n );\n },\n);\n\nSelect.displayName = \"Select\";\n"],"names":["noop","Select","forwardRef","props","forwardedSelectRef","id","name","items","value","label","labelProps","onChange","onBlur","onFocus","className","helpLabel","errorLabel","invalid","searchable","inline","defaultPrompt","density","width","maxShownOptions","style","tooltipProps","rest","listId","useId","generateSuffix","labelId","buttonId","searchInputId","dropdownIsShown","setShown","useState","toggleListVisibility","useCallback","previousValue","isSearchable","showSearchInputField","searchValue","setSearchValue","searchFn","item","toLowerCase","includes","visibleItems","useMemo","map","getValuePair","visible","valueIsInItems","some","selectedValue","setSelectedValue","hasSelectedValue","selectedValueLabel","_a","find","selectRef","useRef","unifiedSelectRef","instance","current","usePreviousValue","useEffect","selectOption","nextValue","previousSelectedValue","type","target","dispatchEvent","Event","bubbles","componentRootElementRef","focusInsideRef","searchFieldRef","buttonRef","handleFocusPlacement","isOpen","ref","listElement","focusSelected","focus","dropdownRef","useAnimatedHeight","onFirstVisible","onTransitionEnd","useListNavigation","close","handleBlur","e","componentRootElement","contains","relatedTarget","handleFocus","handleMouseOver","preventScroll","select","searchField","button","addEventListener","ev","preventDefault","removeEventListener","handleOnKeyDown","key","stopPropagation","handleSearchOnKeyDown","shiftKey","handleOptionOnKeyDown","currentTarget","firstVisible","querySelector","handleEscape","window","jsxs","Fragment","children","tabIndex","jsx","hidden","InputGroup","clsx","triggerProps","_b","call","srOnly","htmlFor","render","ariaInvalid","inputProps","placeholder","toLower","role","onKeyDown","onClick","onMouseDown","every","i","onMouseOver","description","ArrowVerticalAnimated","variant","pointingDown","displayName"],"mappings":"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"}
1	+ {"version":3,"file":"Select.cjs","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n ChangeEvent,\n CSSProperties,\n FocusEvent,\n forwardRef,\n KeyboardEvent,\n MouseEvent,\n RefObject,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { DataTestAutoId, Density } from \"../../core/types.js\";\nimport { useAnimatedHeight } from \"../../hooks/useAnimatedHeight/useAnimatedHeight.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useListNavigation } from \"../../hooks/useListNavigation/useListNavigation.js\";\nimport { usePreviousValue } from \"../../hooks/usePreviousValue/usePreviousValue.js\";\nimport { getValuePair, ValuePair } from \"../../utilities/valuePair.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { InputGroup, InputGroupProps } from \"../input-group/InputGroup.js\";\nimport { LabelProps } from \"../input-group/Label.js\";\nimport { focusSelected, toLower } from \"./select-utils.js\";\n\nexport interface SelectPartialChangeEvent\n extends Partial<Omit<ChangeEvent<HTMLSelectElement>, \"target\">> {\n /** Kreves av react-hook-form, det skjer ulike ting avhengig av om det er blur eller change /\n type: \"change\" \| \"blur\";\n target: {\n /* Kreves av react-hook-form for å vite hvilket skjemafelt som ble endret /\n name: string;\n value: string;\n };\n}\n\nexport type SelectChangeEventHandler = (\n event: SelectPartialChangeEvent,\n) => void;\n\ninterface Option extends ValuePair {\n visible: boolean;\n}\n\nexport interface SelectProps\n extends Omit<InputGroupProps, \"children\">,\n DataTestAutoId {\n id?: string;\n name: string;\n label: string;\n labelProps?: Omit<\n LabelProps,\n \"children\" \| \"density\" \| \"htmlFor\" \| \"standAlone\"\n >;\n items: Array<string \| ValuePair>;\n /\n @default false\n /\n inline?: boolean;\n /\n @default \"Velg\"\n /\n defaultPrompt?: string;\n className?: string;\n value?: string;\n helpLabel?: string;\n errorLabel?: string;\n /\n @default false\n /\n searchable?:\n \| boolean\n \| ((searchValue: string, searchItem: string \| ValuePair) => boolean);\n density?: Density;\n width?: string;\n onChange?: SelectChangeEventHandler;\n onBlur?: SelectChangeEventHandler;\n onFocus?: SelectChangeEventHandler;\n /\n Merk som ugyldig uten å sende inn en errorLabel.\n * NB! Brukes kun i tilfeller der valideringsfeil dukker opp andre steder, for eksempel i en FieldGroup.\n /\n invalid?: boolean;\n /\n Hvor mange valg skal vises i listen før den begynner å scrolle.\n * @default 5\n /\n maxShownOptions?: number;\n}\n\nconst noop = () => {\n return;\n};\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n (props, forwardedSelectRef) => {\n const {\n id,\n name,\n items,\n value,\n label,\n labelProps,\n onChange,\n onBlur,\n onFocus,\n className,\n helpLabel,\n errorLabel,\n invalid,\n searchable = false,\n inline = false,\n defaultPrompt = \"Velg\",\n density,\n width,\n maxShownOptions = 5,\n style,\n tooltipProps,\n ...rest\n } = props;\n\n const listId = useId(id \|\| \"jkl-select\", { generateSuffix: !id });\n const labelId = `${listId}_label`;\n const buttonId = `${listId}_button`;\n const searchInputId = `${listId}_search-input`;\n\n const [dropdownIsShown, setShown] = useState(false);\n const toggleListVisibility = useCallback(() => {\n setShown((previousValue) => !previousValue);\n }, []);\n\n /// Søk\n\n const isSearchable = Boolean(searchable);\n const showSearchInputField = isSearchable && dropdownIsShown;\n const [searchValue, setSearchValue] = useState(\"\");\n const searchFn = useCallback(\n (item: ValuePair) => {\n if (\n item.label.toLowerCase().includes(searchValue.toLowerCase())\n ) {\n return true;\n }\n\n if (typeof searchable === \"function\") {\n return searchable(searchValue, item);\n }\n\n return false;\n },\n [searchable, searchValue],\n );\n const visibleItems: Option[] = useMemo(\n () =>\n items.map(getValuePair).map((item) => {\n const visible =\n !isSearchable \|\| searchValue === \"\" \|\| searchFn(item);\n return { ...item, visible };\n }),\n [items, isSearchable, searchValue, searchFn],\n );\n const valueIsInItems: boolean = useMemo(() => {\n if (typeof value === \"undefined\") {\n return false;\n }\n return items.some((item) =>\n typeof item === \"string\"\n ? item === value\n : item.value === value,\n );\n }, [value, items]);\n\n /// Valg av <option>\n\n const [selectedValue, setSelectedValue] = useState<string>(\n valueIsInItems && value !== undefined ? value : \"\",\n );\n const hasSelectedValue = selectedValue !== \"\";\n const selectedValueLabel = useMemo(\n () =>\n visibleItems.find((item) => item.value === selectedValue)\n ?.label \|\| defaultPrompt,\n [visibleItems, selectedValue, defaultPrompt],\n );\n\n const selectRef = useRef<HTMLSelectElement \| null>(null);\n // Hjelpefunksjon som gjør det enklere å forwarde refen og å bruke den selv internt\n const unifiedSelectRef = useCallback(\n (instance: HTMLSelectElement \| null) => {\n selectRef.current = instance;\n if (forwardedSelectRef) {\n if (typeof forwardedSelectRef === \"function\") {\n forwardedSelectRef(instance);\n } else {\n forwardedSelectRef.current = instance;\n }\n }\n if (instance) {\n setSelectedValue(instance.value);\n }\n },\n [selectRef, forwardedSelectRef],\n );\n\n const previousValue = usePreviousValue(value);\n useEffect(() => {\n if (value === previousValue) {\n return;\n }\n if (typeof value === \"undefined\" \|\| !valueIsInItems) {\n setSelectedValue(\"\");\n } else {\n setSelectedValue(value);\n }\n }, [setSelectedValue, value, previousValue, valueIsInItems]);\n\n const selectOption = useCallback(\n (item: Option) => {\n const nextValue = item.value;\n setSearchValue(\"\");\n setSelectedValue(nextValue);\n toggleListVisibility();\n },\n [setSearchValue, setSelectedValue, toggleListVisibility],\n );\n\n // La komponenten rendre <select> med den valgte verdien før onChange trigges, slik at\n // react-hook-form@>7.41.1 behandler feltet som at det har en verdi.\n const previousSelectedValue = usePreviousValue(selectedValue);\n useEffect(() => {\n // previousSelectedValue er undefined på første render, men da vil vi ikke ha en onChange uansett\n if (\n typeof previousSelectedValue === \"undefined\" \|\|\n previousSelectedValue === selectedValue \|\|\n selectedValue === value\n ) {\n return;\n }\n if (onChange) {\n onChange({\n type: \"change\",\n target: { name, value: selectedValue },\n });\n }\n if (selectRef.current) {\n selectRef.current.dispatchEvent(\n new Event(\"change\", { bubbles: true }),\n );\n }\n }, [onChange, name, value, selectedValue, previousSelectedValue]);\n\n /// Fokushåndtering\n\n const componentRootElementRef = useRef<HTMLDivElement>(null);\n const focusInsideRef = useRef(false);\n const searchFieldRef = useRef<HTMLInputElement>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n\n const handleFocusPlacement = useCallback(\n (isOpen: boolean, ref: RefObject<HTMLElement>) => {\n if (isOpen && !isSearchable) {\n const listElement = ref.current;\n if (listElement) {\n focusSelected(listElement, selectedValue);\n }\n } else if (isOpen) {\n if (searchFieldRef.current) {\n searchFieldRef.current.focus();\n }\n } else {\n if (focusInsideRef.current && buttonRef.current) {\n buttonRef.current.focus();\n }\n }\n },\n [isSearchable, selectedValue],\n );\n\n const [dropdownRef] = useAnimatedHeight<HTMLDivElement>(\n dropdownIsShown,\n {\n onFirstVisible: handleFocusPlacement,\n onTransitionEnd: handleFocusPlacement,\n },\n );\n\n useListNavigation({ ref: dropdownRef });\n\n const close = useCallback(() => {\n if (isSearchable) {\n setSearchValue(\"\");\n }\n if (onBlur) {\n onBlur({\n type: \"blur\",\n target: { name, value: selectedValue },\n });\n selectRef.current?.dispatchEvent(\n new Event(\"focusout\", { bubbles: true }),\n );\n }\n focusInsideRef.current = false;\n setShown(false);\n }, [\n onBlur,\n setSearchValue,\n setShown,\n isSearchable,\n name,\n selectedValue,\n ]);\n\n const handleBlur = useCallback(\n (e: FocusEvent<HTMLButtonElement \| HTMLInputElement>) => {\n const componentRootElement = componentRootElementRef.current;\n // There are known issues in Firefox when using \"relatedTarget\" in onBlur events:\n // https://github.com/facebook/react/issues/2011\n // This might be fixed in react 17. Se issue above.\n const nextFocusIsInsideComponent =\n componentRootElement &&\n componentRootElement.contains(e.relatedTarget as Node);\n if (!nextFocusIsInsideComponent) {\n close();\n }\n },\n [close],\n );\n\n const handleFocus = useCallback(() => {\n if (!focusInsideRef.current) {\n if (onFocus) {\n onFocus({\n type: \"change\",\n target: { name, value: selectedValue },\n });\n }\n focusInsideRef.current = true;\n }\n }, [onFocus, selectedValue, name]);\n\n const handleMouseOver = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n // Ved mouseOver på options flytter vi fokus til dem for å unngå \"dobbel fokus\"\n // der det ser ut som to forskjellige elementer er fokusert/hovered samtidig\n (e.target as HTMLButtonElement).focus({ preventScroll: true });\n },\n [],\n );\n\n // Handle focus and blur of hidden select element\n useEffect(() => {\n const select = selectRef.current;\n const searchField = searchFieldRef.current;\n const button = buttonRef.current;\n const componentRootElement = componentRootElementRef.current;\n\n select?.addEventListener(\"focus\", () => {\n showSearchInputField ? searchField?.focus() : button?.focus();\n });\n select?.addEventListener(\"blur\", function (this, ev) {\n componentRootElement &&\n componentRootElement.contains(ev.relatedTarget as Node) &&\n ev.preventDefault();\n });\n\n return () => {\n select?.removeEventListener(\"focus\", () => {\n showSearchInputField\n ? searchField?.focus()\n : button?.focus();\n });\n select?.removeEventListener(\"blur\", function (this, ev) {\n componentRootElement &&\n componentRootElement.contains(\n ev.relatedTarget as Node,\n ) &&\n ev.preventDefault();\n });\n };\n }, [showSearchInputField]);\n\n /// Tastaturnavigasjon\n\n // Add support for opening dropdown with arrowkey down as expected from native select\n // onKeyDown to stop ArrowDown from scrolling the page\n const handleOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n if (\n (e.key === \"ArrowDown\" \|\| e.key === \" \") &&\n !dropdownIsShown\n ) {\n e.preventDefault();\n e.stopPropagation();\n setShown(true);\n } else if (e.key === \"Escape\") {\n e.preventDefault();\n e.stopPropagation();\n setShown(false);\n }\n },\n [setShown, dropdownIsShown],\n );\n\n // onKeyDown to stop ArrowDown from scrolling the page\n const handleSearchOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n e.stopPropagation();\n\n const listElement = dropdownRef.current;\n if (listElement) {\n if (isSearchable) {\n // Flytt fokus til det første elementet i listen, ikke det forrige valgte.\n // Ved endring i filter er det ikke gitt at vi ønsker å ta utgangspunkt i\n // den valgte verdien.\n focusSelected(listElement, undefined);\n } else {\n focusSelected(listElement, selectedValue);\n }\n }\n } else if (e.key === \"Escape\") {\n e.preventDefault();\n e.stopPropagation();\n setShown(false);\n } else if (e.key === \"Tab\" && !e.shiftKey) {\n const listElement = dropdownRef.current;\n if (listElement) {\n e.preventDefault();\n e.stopPropagation();\n focusSelected(listElement, selectedValue);\n }\n } else if (e.key === \"Enter\" && dropdownIsShown) {\n // Should not propagate Enter keyevent because form might submit\n e.preventDefault();\n e.stopPropagation();\n }\n },\n [\n setShown,\n dropdownRef,\n selectedValue,\n isSearchable,\n dropdownIsShown,\n ],\n );\n\n // onKeyDown so this Tab listener isn't triggered by tabbing from search field to option\n const handleOptionOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === \"Tab\") {\n e.preventDefault();\n e.stopPropagation();\n\n if (e.shiftKey && searchFieldRef.current) {\n searchFieldRef.current.focus();\n } else if (buttonRef.current) {\n // Mimic behaviour of Firefox and native select, where Tab selects the current item and closes the menu\n setSelectedValue(e.currentTarget.value);\n setShown(false);\n buttonRef.current.focus();\n }\n } else if (e.key === \"ArrowUp\") {\n if (dropdownRef.current && searchFieldRef.current) {\n // Can't be based on index since the first item might be filtered out\n const firstVisible = dropdownRef.current.querySelector(\n '[role=\"option\"]:not([hidden])',\n );\n if (\n e.currentTarget.id === firstVisible?.id &&\n searchFieldRef.current\n ) {\n searchFieldRef.current.focus();\n }\n }\n }\n },\n [setShown, dropdownRef],\n );\n\n // Add support for closing the dropdown with Escape like native select. Unfortunately, Escape does not trigger the button onKeyDown.\n useEffect(() => {\n const handleEscape = (e: globalThis.KeyboardEvent) => {\n if (e.key === \"Escape\" && dropdownIsShown) {\n setShown(false);\n }\n };\n if (typeof window !== \"undefined\" && dropdownIsShown) {\n window.addEventListener(\"keydown\", handleEscape);\n }\n return () => {\n if (typeof window !== \"undefined\") {\n window.removeEventListener(\"keydown\", handleEscape);\n }\n };\n }, [setShown, dropdownIsShown]);\n\n return (\n <>\n <select\n name={name}\n tabIndex={-1}\n data-testid=\"jkl-native-select\"\n className=\"jkl-sr-only\"\n aria-hidden\n ref={unifiedSelectRef}\n value={selectedValue}\n onChange={noop} // React complains unless we give an onChange handler. This is technically a read-only field, but readOnly isn't an option here.\n >\n <option value=\"\"></option>{\" \"}\n {/ Tom option må være et valg, ellers vil <select> alltid ha en value /}\n {visibleItems.map((item) => (\n <option\n key={`${listId}-opt-${item.value}`}\n hidden={!item.visible}\n value={item.value}\n >\n {item.label}\n </option>\n ))}\n </select>\n <InputGroup\n ref={componentRootElementRef}\n data-testid=\"jkl-select\"\n className={clsx(\"jkl-select\", className, {\n \"jkl-select--inline\": inline,\n \"jkl-select--open\":\n dropdownIsShown &&\n visibleItems.some((item) => item.visible),\n \"jkl-select--no-value\": !hasSelectedValue,\n \"jkl-select--invalid\": !!errorLabel \|\| invalid,\n })}\n tooltipProps={\n tooltipProps && {\n ...tooltipProps,\n triggerProps: {\n ...tooltipProps.triggerProps,\n onFocus: (e) => {\n tooltipProps.triggerProps?.onFocus?.(e);\n close();\n },\n },\n }\n }\n {...rest}\n id={isSearchable ? searchInputId : buttonId}\n style={\n {\n [\"--jkl-select-max-shown-options\"]: maxShownOptions,\n ...style,\n } as CSSProperties\n }\n density={density}\n label={label}\n labelProps={{\n id: labelId,\n srOnly: inline,\n ...labelProps,\n htmlFor: isSearchable ? searchInputId : buttonId,\n }}\n helpLabel={helpLabel}\n errorLabel={errorLabel}\n render={({\n \"aria-invalid\": ariaInvalid,\n ...inputProps\n }) => (\n <div\n className=\"jkl-select__outer-wrapper\"\n style={{ width }}\n >\n {isSearchable && (\n <input\n {...inputProps}\n aria-invalid={ariaInvalid}\n id={searchInputId}\n hidden={!showSearchInputField}\n ref={searchFieldRef}\n placeholder=\"Søk\"\n value={searchValue}\n onChange={(e) =>\n setSearchValue(e.target.value)\n }\n data-testid=\"jkl-select__search-input\"\n className=\"jkl-select__search-input\"\n aria-autocomplete=\"list\"\n aria-activedescendant={\n hasSelectedValue\n ? `${listId}__${toLower(\n selectedValue,\n )}`\n : undefined\n }\n aria-controls={listId}\n aria-expanded={dropdownIsShown}\n role=\"combobox\"\n onKeyDown={handleSearchOnKeyDown}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onClick={(e) => {\n e.stopPropagation();\n }}\n />\n )}\n {/ eslint-disable-next-line jsx-a11y/role-supports-aria-props */}\n <button\n // Nei dette er ikke i henhold til speccen, men VoiceOver leser den likevel og det er oppførselen vi ønsker\n aria-invalid={ariaInvalid}\n {...inputProps}\n id={buttonId}\n ref={buttonRef}\n hidden={showSearchInputField}\n type=\"button\"\n name={`${name}-btn`}\n className={clsx(\"jkl-select__button\", {\n \"jkl-select__button--active-value\":\n !!selectedValue,\n })}\n data-testid=\"jkl-select__button\"\n aria-label={`${\n selectedValueLabel \|\| \"Velg\"\n },${label}`}\n aria-expanded={dropdownIsShown}\n aria-controls={listId}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onKeyDown={handleOnKeyDown}\n onClick={toggleListVisibility}\n onMouseDown={(e) => {\n // Workaround for en Safari-bug hvor e.relatedTarget er null i onBlur\n // https://twitter.com/MilesSorce/status/1278762360669265925\n e.preventDefault();\n buttonRef.current?.focus();\n }}\n >\n {selectedValueLabel}\n </button>\n <div\n id={listId}\n ref={dropdownRef}\n role=\"listbox\"\n className=\"jkl-select__options-menu\"\n hidden={\n !dropdownIsShown \|\|\n visibleItems.every((item) => !item.visible)\n }\n aria-labelledby={labelId}\n tabIndex={-1}\n data-focus=\"controlled\" // lar oss styre markering av valg vha focus\n >\n {visibleItems.map((item, i) =>\n // Det er viktig at vi _fjerner_ elementer som ikke er synlige fra DOMen for at tastaturnavigasjon skal fungere.\n // For eksempel, hvis vi har elementene Apple, Samsung og LG i den rekkefølgen og søker etter \"l\"\n // vil Samsung ikke synes. Om vi bare setter hidden-attributtet på Samsung vil ArrowDown fra Apple ikke fungere.\n // Dette lar seg ikke gjenskape i en enhetstest med JSDOM + user-events, og Cypress lukker Select\n // ved første {downArrow} ¯\\_(ツ)_/¯. Så please test scenariet over manuelt om dette skaper trøbbel for deg.\n item.visible ? (\n <button\n key={`${listId}-${item.value}`}\n hidden={!item.visible}\n type=\"button\"\n id={`${listId}__${toLower(\n item.value,\n )}`}\n className=\"jkl-select__option\"\n data-testid=\"jkl-select__option\"\n aria-selected={\n item.value === selectedValue\n }\n role=\"option\"\n value={item.value}\n data-testautoid={`jkl-select__option-${i}`}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onKeyDown={handleOptionOnKeyDown}\n onClick={(e) => {\n e.preventDefault();\n selectOption(item);\n }}\n onMouseOver={handleMouseOver}\n >\n {item.label}\n {item.description ? (\n <span className=\"jkl-select__option-description\">\n {item.description}\n </span>\n ) : null}\n </button>\n ) : null,\n )}\n </div>\n <ArrowVerticalAnimated\n variant=\"medium\"\n pointingDown={!dropdownIsShown}\n className=\"jkl-select__arrow\"\n />\n </div>\n )}\n />\n </>\n );\n },\n);\n\nSelect.displayName = \"Select\";\n"],"names":["noop","Select","forwardRef","props","forwardedSelectRef","id","name","items","value","label","labelProps","onChange","onBlur","onFocus","className","helpLabel","errorLabel","invalid","searchable","inline","defaultPrompt","density","width","maxShownOptions","style","tooltipProps","rest","listId","useId","generateSuffix","labelId","buttonId","searchInputId","dropdownIsShown","setShown","useState","toggleListVisibility","useCallback","previousValue","isSearchable","showSearchInputField","searchValue","setSearchValue","searchFn","item","toLowerCase","includes","visibleItems","useMemo","map","getValuePair","visible","valueIsInItems","some","selectedValue","setSelectedValue","hasSelectedValue","selectedValueLabel","_a","find","selectRef","useRef","unifiedSelectRef","instance","current","usePreviousValue","useEffect","selectOption","nextValue","previousSelectedValue","type","target","dispatchEvent","Event","bubbles","componentRootElementRef","focusInsideRef","searchFieldRef","buttonRef","handleFocusPlacement","isOpen","ref","listElement","focusSelected","focus","dropdownRef","useAnimatedHeight","onFirstVisible","onTransitionEnd","useListNavigation","close","handleBlur","e","componentRootElement","contains","relatedTarget","handleFocus","handleMouseOver","preventScroll","select","searchField","button","addEventListener","ev","preventDefault","removeEventListener","handleOnKeyDown","key","stopPropagation","handleSearchOnKeyDown","shiftKey","handleOptionOnKeyDown","currentTarget","firstVisible","querySelector","handleEscape","window","jsxs","Fragment","children","tabIndex","jsx","hidden","InputGroup","clsx","triggerProps","_b","call","srOnly","htmlFor","render","ariaInvalid","inputProps","placeholder","toLower","role","onKeyDown","onClick","onMouseDown","every","i","onMouseOver","description","ArrowVerticalAnimated","variant","pointingDown","displayName"],"mappings":"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"}

package/build/cjs/components/select/Select.d.cts CHANGED Viewed

@@ -3,7 +3,7 @@ import { DataTestAutoId, Density } from '../../core/types.cjs';
 import { ValuePair } from '../../utilities/valuePair.cjs';
 import { InputGroupProps } from '../input-group/InputGroup.cjs';
 import { LabelProps } from '../input-group/Label.cjs';
-interface PartialChangeEvent extends Partial<Omit<ChangeEvent<HTMLSelectElement>, "target">> {
+export interface SelectPartialChangeEvent extends Partial<Omit<ChangeEvent<HTMLSelectElement>, "target">> {
     /** Kreves av react-hook-form, det skjer ulike ting avhengig av om det er blur eller change */
     type: "change" | "blur";
     target: {
@@ -12,7 +12,7 @@ interface PartialChangeEvent extends Partial<Omit<ChangeEvent<HTMLSelectElement>
         value: string;
     };
 }
-type ChangeEventHandler = (event: PartialChangeEvent) => void;
+export type SelectChangeEventHandler = (event: SelectPartialChangeEvent) => void;
 export interface SelectProps extends Omit<InputGroupProps, "children">, DataTestAutoId {
     id?: string;
     name: string;
@@ -37,9 +37,9 @@ export interface SelectProps extends Omit<InputGroupProps, "children">, DataTest
     searchable?: boolean | ((searchValue: string, searchItem: string | ValuePair) => boolean);
     density?: Density;
     width?: string;
-    onChange?: ChangeEventHandler;
-    onBlur?: ChangeEventHandler;
-    onFocus?: ChangeEventHandler;
+    onChange?: SelectChangeEventHandler;
+    onBlur?: SelectChangeEventHandler;
+    onFocus?: SelectChangeEventHandler;
     /**
      * Merk som ugyldig uten å sende inn en errorLabel.
      * NB! Brukes kun i tilfeller der valideringsfeil dukker opp andre steder, for eksempel i en FieldGroup.
@@ -52,4 +52,3 @@ export interface SelectProps extends Omit<InputGroupProps, "children">, DataTest
     maxShownOptions?: number;
 }
 export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
-export {};

package/build/cjs/components/select/index.d.cts CHANGED Viewed

@@ -1,4 +1,2 @@
-export type { SelectProps } from './Select.cjs';
-export { Select } from './Select.cjs';
-export type { NativeSelectProps } from './NativeSelect.cjs';
-export { NativeSelect } from './NativeSelect.cjs';
+export { Select, type SelectProps, type SelectChangeEventHandler, type SelectPartialChangeEvent, } from './Select.cjs';
+export { NativeSelect, type NativeSelectProps } from './NativeSelect.cjs';

package/build/cjs/components/summary-table/SummaryTable.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SummaryTable.cjs","sources":["../../../../src/components/summary-table/SummaryTable.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { ReactNode, FC } from \"react\";\n\nexport interface ~~Props~~ {\n className?: string;\n caption?: string;\n header: [string, string];\n body: ReactNode;\n footer?: ReactNode;\n}\n\nexport const SummaryTable: FC<~~Props~~> = ({\n className,\n caption,\n header,\n body,\n footer,\n ...rest\n}) => {\n return (\n <table {...rest} className={clsx(\"jkl-summary-table\", className)}>\n {caption && <caption className=\"jkl-sr-only\">{caption}</caption>}\n\n <thead className=\"jkl-sr-only\">\n <tr>\n {header.map((description, index) => (\n <th scope=\"col\" key={index}>\n {description}\n </th>\n ))}\n </tr>\n </thead>\n\n <tbody>{body}</tbody>\n\n <tfoot>{footer}</tfoot>\n </table>\n );\n};\n"],"names":["className","caption","header","body","footer","rest","jsxs","clsx","children","jsx","map","description","index","scope"],"mappings":"~~kLAWuC~~,~~EACnCA~~,UAAAA,EACAC,QAAAA,EACAC,OAAAA,EACAC,KAAAA,EACAC,OAAAA,KACGC,KAGCC,EAAAA,KAAC,YAAUD,EAAML,UAAWO,EAAAA,KAAK,oBAAqBP,GACjDQ,SAAA,CAAAP,GAAYQ,EAAAA,IAAA,UAAA,CAAQT,UAAU,cAAeQ,SAAQP,UAErD,QAAM,CAAAD,UAAU,cACbQ,SAACC,EAAAA,IAAA,KAAA,CACID,WAAOE,KAAI,CAACC,EAAaC,IACtBH,EAAAA,IAAC,MAAGI,MAAM,MACLL,YADgBI,SAOjCH,EAAAA,IAAC,SAAOD,SAAKL,IAEbM,EAAAA,IAAC,SAAOD,SAAOJ"}
1	+ {"version":3,"file":"SummaryTable.cjs","sources":["../../../../src/components/summary-table/SummaryTable.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { ReactNode, FC } from \"react\";\n\nexport interface SummaryTableProps {\n className?: string;\n caption?: string;\n header: [string, string];\n body: ReactNode;\n footer?: ReactNode;\n}\n\nexport const SummaryTable: FC<SummaryTableProps> = ({\n className,\n caption,\n header,\n body,\n footer,\n ...rest\n}) => {\n return (\n <table {...rest} className={clsx(\"jkl-summary-table\", className)}>\n {caption && <caption className=\"jkl-sr-only\">{caption}</caption>}\n\n <thead className=\"jkl-sr-only\">\n <tr>\n {header.map((description, index) => (\n <th scope=\"col\" key={index}>\n {description}\n </th>\n ))}\n </tr>\n </thead>\n\n <tbody>{body}</tbody>\n\n <tfoot>{footer}</tfoot>\n </table>\n );\n};\n"],"names":["className","caption","header","body","footer","rest","jsxs","clsx","children","jsx","map","description","index","scope"],"mappings":"kLAWmD,EAC/CA,UAAAA,EACAC,QAAAA,EACAC,OAAAA,EACAC,KAAAA,EACAC,OAAAA,KACGC,KAGCC,EAAAA,KAAC,YAAUD,EAAML,UAAWO,EAAAA,KAAK,oBAAqBP,GACjDQ,SAAA,CAAAP,GAAYQ,EAAAA,IAAA,UAAA,CAAQT,UAAU,cAAeQ,SAAQP,UAErD,QAAM,CAAAD,UAAU,cACbQ,SAACC,EAAAA,IAAA,KAAA,CACID,WAAOE,KAAI,CAACC,EAAaC,IACtBH,EAAAA,IAAC,MAAGI,MAAM,MACLL,YADgBI,SAOjCH,EAAAA,IAAC,SAAOD,SAAKL,IAEbM,EAAAA,IAAC,SAAOD,SAAOJ"}

package/build/cjs/components/summary-table/SummaryTable.d.cts CHANGED Viewed

@@ -1,9 +1,9 @@
 import { ReactNode, FC } from 'react';
-export interface Props {
+export interface SummaryTableProps {
     className?: string;
     caption?: string;
     header: [string, string];
     body: ReactNode;
     footer?: ReactNode;
 }
-export declare const SummaryTable: FC<Props>;
+export declare const SummaryTable: FC<SummaryTableProps>;

package/build/cjs/components/summary-table/index.d.cts CHANGED Viewed

@@ -1,2 +1,2 @@
-export { SummaryTable } from './SummaryTable.cjs';
-export { SummaryTableRow } from './SummaryTableRow.cjs';
+export { SummaryTable, type SummaryTableProps } from './SummaryTable.cjs';
+export { SummaryTableRow, type SummaryTableRowProps, } from './SummaryTableRow.cjs';

package/build/cjs/components/system-message/SystemMessage.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SystemMessage.cjs","sources":["../../../../src/components/system-message/SystemMessage.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { Density, WithChildren } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { DismissButton } from \"../message/DismissButton.js\";\nimport { MessageIcon } from \"./common/MessageIcon.js\";\n\ntype messageTypes = \"info\" \| \"error\" \| \"success\" \| \"warning\";\n\~~ninterface~~ ~~Props~~ extends WithChildren {\n id?: string;\n className?: string;\n density?: Density;\n maxContentWidth?: string;\n paddingLeft?: string;\n /** Overstyr standardrollen til meldingen. Om du ønsker å \"skru av\" rollen kan du bruke verdien `none presentation`. */\n role?: string;\n dismissed?: boolean;\n dismissAction?: {\n handleDismiss: () => void;\n buttonTitle?: string;\n };\n}\n\nfunction systemFactory(messageType: messageTypes): React.FC<~~Props~~> {\n const SystemMessage: React.FC<~~Props~~> = ({\n id,\n className,\n density,\n maxContentWidth,\n paddingLeft,\n role = \"status\",\n dismissed,\n dismissAction,\n children,\n ...rest\n }) => {\n const systemId = useId(id \|\| \"jkl-system-message\", {\n generateSuffix: !id,\n });\n\n return (\n <div\n role={role}\n {...rest}\n id={systemId}\n className={clsx(\n \"jkl-system-message\",\n \"jkl-system-message--\" + messageType,\n className,\n {\n \"jkl-system-message--dismissed\": dismissed,\n },\n )}\n data-density={density}\n >\n <div\n className=\"jkl-system-message__content\"\n data-testid=\"system-message-content\"\n data-theme=\"light\"\n style={{\n maxWidth: maxContentWidth,\n paddingLeft,\n }}\n >\n <MessageIcon messageType={messageType} />\n <span className=\"jkl-system-message__message\">\n {children}\n </span>\n {dismissAction?.handleDismiss && (\n <DismissButton\n aria-controls={systemId}\n className=\"jkl-system-message__dismiss-button\"\n label={dismissAction.buttonTitle \|\| \"Lukk\"}\n onClick={dismissAction.handleDismiss}\n />\n )}\n </div>\n </div>\n );\n };\n return SystemMessage;\n}\n\nexport const InfoSystemMessage = systemFactory(\"info\");\nInfoSystemMessage.displayName = \"InfoSystemMessage\";\nexport const ErrorSystemMessage = systemFactory(\"error\");\nErrorSystemMessage.displayName = \"ErrorSystemMessage\";\nexport const WarningSystemMessage = systemFactory(\"warning\");\nWarningSystemMessage.displayName = \"WarningSystemMessage\";\nexport const SuccessSystemMessage = systemFactory(\"success\");\nSuccessSystemMessage.displayName = \"SuccessSystemMessage\";\n"],"names":["systemFactory","messageType","id","className","density","maxContentWidth","paddingLeft","role","dismissed","dismissAction","children","rest","systemId","useId","generateSuffix","jsx","clsx","jsxs","style","maxWidth","MessageIcon","handleDismiss","DismissButton","label","buttonTitle","onClick","InfoSystemMessage","displayName","ErrorSystemMessage","WarningSystemMessage","SuccessSystemMessage"],"mappings":"sRAwBA,SAASA,~~EAAcC~~,~~GAyDZ~~,~~MAxDgC~~,~~EACnCC~~,GAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAC,cAAAA,EACAC,SAAAA,KACGC,MAEG,MAAAC,EAAWC,EAAAA,MAAMX,GAAM,qBAAsB,CAC/CY,gBAAiBZ,IAIjB,OAAAa,EAAAA,IAAC,MAAA,CACGR,KAAAA,KACII,EACJT,GAAIU,EACJT,UAAWa,EAAAA,KACP,qBACA,uBAAyBf,EACzBE,EACA,CACI,gCAAiCK,IAGzC,eAAcJ,EAEdM,SAAAO,EAAAA,KAAC,MAAA,CACGd,UAAU,8BACV,cAAY,yBACZ,aAAW,QACXe,MAAO,CACHC,SAAUd,EACVC,YAAAA,GAGJI,SAAA,CAAAK,MAACK,EAAAA,aAAYnB,YAAAA,IACZc,EAAAA,IAAA,OAAA,CAAKZ,UAAU,8BACXO,SAAAA,KAEJ,MAAAD,OAAA,EAAAA,EAAeY,gBACZN,EAAAA,IAACO,EAAAA,cAAA,CACG,gBAAeV,EACfT,UAAU,qCACVoB,MAAOd,EAAce,aAAe,OACpCC,QAAShB,EAAcY,oBAGnC,CAKhB,CAEa,MAAAK,EAAoB1B,EAAc,QAC/C0B,EAAkBC,YAAc,oBACnB,MAAAC,EAAqB5B,EAAc,SAChD4B,EAAmBD,YAAc,qBACpB,MAAAE,EAAuB7B,EAAc,WAClD6B,EAAqBF,YAAc,uBACtB,MAAAG,EAAuB9B,EAAc,WAClD8B,EAAqBH,YAAc"}
1	+ {"version":3,"file":"SystemMessage.cjs","sources":["../../../../src/components/system-message/SystemMessage.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { Density, WithChildren } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { DismissButton } from \"../message/DismissButton.js\";\nimport { MessageIcon } from \"./common/MessageIcon.js\";\n\ntype messageTypes = \"info\" \| \"error\" \| \"success\" \| \"warning\";\n\nexport interface SystemMessageProps extends WithChildren {\n id?: string;\n className?: string;\n density?: Density;\n maxContentWidth?: string;\n paddingLeft?: string;\n /** Overstyr standardrollen til meldingen. Om du ønsker å \"skru av\" rollen kan du bruke verdien `none presentation`. */\n role?: string;\n dismissed?: boolean;\n dismissAction?: {\n handleDismiss: () => void;\n buttonTitle?: string;\n };\n}\n\nfunction systemFactory(\n messageType: messageTypes,\n): React.FC<SystemMessageProps> {\n const SystemMessage: React.FC<SystemMessageProps> = ({\n id,\n className,\n density,\n maxContentWidth,\n paddingLeft,\n role = \"status\",\n dismissed,\n dismissAction,\n children,\n ...rest\n }) => {\n const systemId = useId(id \|\| \"jkl-system-message\", {\n generateSuffix: !id,\n });\n\n return (\n <div\n role={role}\n {...rest}\n id={systemId}\n className={clsx(\n \"jkl-system-message\",\n \"jkl-system-message--\" + messageType,\n className,\n {\n \"jkl-system-message--dismissed\": dismissed,\n },\n )}\n data-density={density}\n >\n <div\n className=\"jkl-system-message__content\"\n data-testid=\"system-message-content\"\n data-theme=\"light\"\n style={{\n maxWidth: maxContentWidth,\n paddingLeft,\n }}\n >\n <MessageIcon messageType={messageType} />\n <span className=\"jkl-system-message__message\">\n {children}\n </span>\n {dismissAction?.handleDismiss && (\n <DismissButton\n aria-controls={systemId}\n className=\"jkl-system-message__dismiss-button\"\n label={dismissAction.buttonTitle \|\| \"Lukk\"}\n onClick={dismissAction.handleDismiss}\n />\n )}\n </div>\n </div>\n );\n };\n return SystemMessage;\n}\n\nexport const InfoSystemMessage = systemFactory(\"info\");\nInfoSystemMessage.displayName = \"InfoSystemMessage\";\nexport const ErrorSystemMessage = systemFactory(\"error\");\nErrorSystemMessage.displayName = \"ErrorSystemMessage\";\nexport const WarningSystemMessage = systemFactory(\"warning\");\nWarningSystemMessage.displayName = \"WarningSystemMessage\";\nexport const SuccessSystemMessage = systemFactory(\"success\");\nSuccessSystemMessage.displayName = \"SuccessSystemMessage\";\n"],"names":["systemFactory","messageType","id","className","density","maxContentWidth","paddingLeft","role","dismissed","dismissAction","children","rest","systemId","useId","generateSuffix","jsx","clsx","jsxs","style","maxWidth","MessageIcon","handleDismiss","DismissButton","label","buttonTitle","onClick","InfoSystemMessage","displayName","ErrorSystemMessage","WarningSystemMessage","SuccessSystemMessage"],"mappings":"sRAwBA,SAASA,EACLC,GA0DO,MAxD6C,EAChDC,GAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAC,cAAAA,EACAC,SAAAA,KACGC,MAEG,MAAAC,EAAWC,EAAAA,MAAMX,GAAM,qBAAsB,CAC/CY,gBAAiBZ,IAIjB,OAAAa,EAAAA,IAAC,MAAA,CACGR,KAAAA,KACII,EACJT,GAAIU,EACJT,UAAWa,EAAAA,KACP,qBACA,uBAAyBf,EACzBE,EACA,CACI,gCAAiCK,IAGzC,eAAcJ,EAEdM,SAAAO,EAAAA,KAAC,MAAA,CACGd,UAAU,8BACV,cAAY,yBACZ,aAAW,QACXe,MAAO,CACHC,SAAUd,EACVC,YAAAA,GAGJI,SAAA,CAAAK,MAACK,EAAAA,aAAYnB,YAAAA,IACZc,EAAAA,IAAA,OAAA,CAAKZ,UAAU,8BACXO,SAAAA,KAEJ,MAAAD,OAAA,EAAAA,EAAeY,gBACZN,EAAAA,IAACO,EAAAA,cAAA,CACG,gBAAeV,EACfT,UAAU,qCACVoB,MAAOd,EAAce,aAAe,OACpCC,QAAShB,EAAcY,oBAGnC,CAKhB,CAEa,MAAAK,EAAoB1B,EAAc,QAC/C0B,EAAkBC,YAAc,oBACnB,MAAAC,EAAqB5B,EAAc,SAChD4B,EAAmBD,YAAc,qBACpB,MAAAE,EAAuB7B,EAAc,WAClD6B,EAAqBF,YAAc,uBACtB,MAAAG,EAAuB9B,EAAc,WAClD8B,EAAqBH,YAAc"}

package/build/cjs/components/system-message/SystemMessage.d.cts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { Density, WithChildren } from '../../core/types.cjs';
-interface Props extends WithChildren {
+export interface SystemMessageProps extends WithChildren {
     id?: string;
     className?: string;
     density?: Density;
@@ -14,8 +14,7 @@ interface Props extends WithChildren {
         buttonTitle?: string;
     };
 }
-export declare const InfoSystemMessage: React.FC<Props>;
-export declare const ErrorSystemMessage: React.FC<Props>;
-export declare const WarningSystemMessage: React.FC<Props>;
-export declare const SuccessSystemMessage: React.FC<Props>;
-export {};
+export declare const InfoSystemMessage: React.FC<SystemMessageProps>;
+export declare const ErrorSystemMessage: React.FC<SystemMessageProps>;
+export declare const WarningSystemMessage: React.FC<SystemMessageProps>;
+export declare const SuccessSystemMessage: React.FC<SystemMessageProps>;

package/build/cjs/components/system-message/index.d.cts CHANGED Viewed

	@@ -1 +1 @@
1	- export { InfoSystemMessage, WarningSystemMessage, ErrorSystemMessage, SuccessSystemMessage, } from './SystemMessage.cjs';
1	+ export { InfoSystemMessage, WarningSystemMessage, ErrorSystemMessage, SuccessSystemMessage, type SystemMessageProps, } from './SystemMessage.cjs';

package/build/cjs/components/tabs/index.d.cts CHANGED Viewed

@@ -1,6 +1,6 @@
-export * from './NavTab.cjs';
-export * from './NavTabs.cjs';
-export * from './Tabs.cjs';
-export * from './TabList.cjs';
-export * from './Tab.cjs';
-export * from './TabPanel.cjs';
+export { NavTab, type NavTabProps } from './NavTab.cjs';
+export { NavTabs, type NavTabsProps } from './NavTabs.cjs';
+export { Tabs, type TabsProps } from './Tabs.cjs';
+export { TabList, type TabListProps } from './TabList.cjs';
+export { Tab, type TabProps } from './Tab.cjs';
+export { TabPanel, type TabPanelProps } from './TabPanel.cjs';

package/build/cjs/components/tag/index.d.cts CHANGED Viewed

@@ -1,3 +1 @@
-import { Tag, InfoTag, ErrorTag, WarningTag, SuccessTag } from './Tag.cjs';
-export type { TagProps } from './Tag.cjs';
-export { Tag, InfoTag, ErrorTag, WarningTag, SuccessTag };
+export { Tag, InfoTag, ErrorTag, WarningTag, SuccessTag, type TagProps, type DismissAction, } from './Tag.cjs';

package/build/cjs/components/text-input/BaseTextArea.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseTextArea.cjs","sources":["../../../../src/components/text-input/BaseTextArea.tsx"],"sourcesContent":["import React, {\n type FocusEvent,\n forwardRef,\n type RefObject,\n type TextareaHTMLAttributes,\n useRef,\n useState,\n useEffect,\n ChangeEvent,\n} from \"react\";\n\~~ntype~~ Counter = {\n /** Antall tegn før telleren når maksimum og vi viser en feilmelding /\n maxLength: number;\n /\n Med teller vises en progress-bar i bunnen av tekstfeltet som krymper\n * ned fra 100% (null tegn skrevet) til 0% (maks antall tegn skrevet).\n * Om du vil skjule den, sett denne propen til true.\n \n @default false\n /\n hideProgress?: boolean;\n};\n\nexport interface BaseTextAreaProps\n extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, \"children\"> {\n /\n Viser en teller i tekstfeltet når det har fokus.\n /\n counter?: Counter;\n /* Sett antall rader skjemafeltet ekspanderes til ved focus. Innholdet scroller om feltet fylles med mer innhold enn det er plass til. /\n rows?: number;\n inline?: boolean;\n startOpen?: boolean;\n /* Gjør så skjemafeltet ekspanderer seg til å vise alt innhold i stedet for å scrolle /\n autoExpand?: boolean;\n}\n\nexport const BaseTextArea = forwardRef<HTMLTextAreaElement, BaseTextAreaProps>(\n (props, ref) => {\n const {\n autoExpand,\n counter,\n onBlur,\n onFocus,\n rows = 7,\n placeholder = \" \", // This space intentionally left blank. Denne + rows trengs for å få den ekspanderende effekten.\n startOpen,\n style,\n value,\n \"aria-invalid\": ariaInvalid,\n onChange,\n ...rest\n } = props;\n\n const [counterCurrent, setCounterCurrent] = useState(() => {\n if (typeof value === \"undefined\") {\n return 0;\n } else if (typeof value === \"number\") {\n return String(value).length;\n } else {\n return value.length;\n }\n });\n const [textAreaFocused, setTextAreaFocused] = useState(false);\n const internalRef = useRef<HTMLTextAreaElement>(null);\n const textAreaRef =\n (ref as RefObject<HTMLTextAreaElement>) \|\| internalRef;\n\n useEffect(() => {\n const textAreaElement = textAreaRef.current;\n if (textAreaElement) {\n if (!autoExpand) {\n textAreaElement.style.height = \"\";\n return;\n }\n\n if (textAreaFocused \|\| value) {\n textAreaElement.style.height = \"auto\"; // Sett til auto før scrollhøyden leses, sånn at redusering av høyde ved sletting av tekst fungerer\n textAreaElement.style.height = `${textAreaElement.scrollHeight}px`;\n } else {\n textAreaElement.style.height = \"\";\n }\n }\n }, [autoExpand, textAreaRef, value, textAreaFocused]);\n\n function handleOnFocus(e: FocusEvent<HTMLTextAreaElement>) {\n setTextAreaFocused(true);\n if (onFocus) {\n onFocus(e);\n }\n }\n\n function handleOnBlur(e: FocusEvent<HTMLTextAreaElement>) {\n setTextAreaFocused(false);\n if (onBlur) {\n onBlur(e);\n }\n }\n\n function handleOnChange(e: ChangeEvent<HTMLTextAreaElement>) {\n setCounterCurrent(e.target.value.length);\n if (onChange) {\n onChange(e);\n }\n }\n\n const counterTotal: number = counter?.maxLength \|\| 0;\n const progressCurrent: number = counterTotal - counterCurrent;\n function calculatePercentage(current: number, total: number): number {\n if (current <= 0) {\n return 0;\n }\n return total === 0 ? 0 : (current 100) / total;\n }\n const counterLabel =\n counter && counterCurrent > counterTotal\n ? `Du har skrevet ${counterCurrent - counterTotal} tegn for mye`\n : undefined;\n\n const invalid = Boolean(ariaInvalid \|\| counterLabel);\n\n const overflowStyle = {\n overflowX: autoExpand ? \"hidden\" : undefined, // Must set overflowX hidden for Firefox https://stackoverflow.com/a/22700700\n } as React.CSSProperties;\n\n return (\n <div\n className=\"jkl-text-input-wrapper\"\n data-invalid={invalid}\n data-has-content={counterCurrent > 0}\n >\n <textarea\n aria-invalid={invalid}\n className={`jkl-text-area__text-area jkl-text-area__text-area--${rows}-rows`}\n onBlur={handleOnBlur}\n onFocus={handleOnFocus}\n onChange={handleOnChange}\n ref={textAreaRef}\n style={{ ...style, ...overflowStyle }}\n placeholder={placeholder}\n value={value}\n {...rest}\n />\n {counter && (\n <div className=\"jkl-text-area__counter\" aria-hidden=\"true\">\n <div className=\"jkl-text-area__counter-count\">\n {counterCurrent} / {counterTotal}\n </div>\n {!counter.hideProgress && (\n <div\n className=\"jkl-text-area__counter-progress\"\n style={{\n [\"--progress-width\" as string]: `${calculatePercentage(\n progressCurrent,\n counterTotal,\n )}%`,\n }}\n />\n )}\n </div>\n )}\n </div>\n );\n },\n);\nBaseTextArea.displayName = \"BaseTextArea\";\n"],"names":["BaseTextArea","forwardRef","props","ref","autoExpand","counter","onBlur","onFocus","rows","placeholder","startOpen","style","value","ariaInvalid","onChange","rest","counterCurrent","setCounterCurrent","useState","String","length","textAreaFocused","setTextAreaFocused","internalRef","useRef","textAreaRef","useEffect","textAreaElement","current","height","scrollHeight","counterTotal","maxLength","progressCurrent","invalid","overflowStyle","overflowX","jsxs","className","children","jsx","e","target","hideProgress","total","displayName"],"mappings":"wIAsCaA,EAAeC,EAAAA,YACxB,CAACC,EAAOC,KACE,MACFC,WAAAA,EACAC,QAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,KAAAA,EAAO,EACPC,YAAAA,EAAc,IACdC,UAAAA,EACAC,MAAAA,EACAC,MAAAA,EACA,eAAgBC,EAChBC,SAAAA,KACGC,GACHb,GAEGc,EAAgBC,GAAqBC,YAAS,WACtCN,EAAU,IACV,EACiB,iBAAVA,EACPO,OAAOP,GAAOQ,OAEdR,EAAMQ,UAGdC,EAAiBC,GAAsBJ,YAAS,GACjDK,EAAcC,SAA4B,MAC1CC,EACDtB,GAA0CoB,EAE/CG,EAAAA,WAAU,KACN,MAAMC,EAAkBF,EAAYG,QACpC,GAAID,EAAiB,CACjB,IAAKvB,EAED,YADAuB,EAAgBhB,MAAMkB,OAAS,IAI/BR,GAAmBT,GACnBe,EAAgBhB,MAAMkB,OAAS,OAC/BF,EAAgBhB,MAAMkB,OAAS,GAAGF,EAAgBG,kBAElDH,EAAgBhB,MAAMkB,OAAS,EAEvC,IACD,CAACzB,EAAYqB,EAAab,EAAOS,IAuB9B,MAAAU,GAAuB,MAAA1B,SAAAA,EAAS2B,YAAa,EAC7CC,EAA0BF,EAAef,EAO/C,MAKMkB,KAAkBrB,KAJpBR,GAAWW,EAAiBe,EACtB,kBAAkBf,EAAiBe,sBACnC,IAIJI,EAAgB,CAClBC,UAAWhC,EAAa,cAAW,GAInC,OAAAiC,EAAAA,KAAC,MAAA,CACGC,UAAU,yBACV,eAAcJ,EACd,mBAAkBlB,EAAiB,EAEnCuB,SAAA,CAAAC,EAAAA,IAAC,WAAA,CACG,eAAcN,EACdI,UAAW,sDAAsD9B,SACjEF,OA1CZ,SAAsBmC,GAClBnB,GAAmB,GACfhB,GACAA,EAAOmC,EAEf,EAsCYlC,QAlDZ,SAAuBkC,GACnBnB,GAAmB,GACff,GACAA,EAAQkC,EAEhB,EA8CY3B,SArCZ,SAAwB2B,GACFxB,EAAAwB,EAAEC,OAAO9B,MAAMQ,QAC7BN,GACAA,EAAS2B,EAEjB,EAiCYtC,IAAKsB,EACLd,MAAO,IAAKA,KAAUwB,GACtB1B,YAAAA,EACAG,MAAAA,KACIG,IAEPV,GACIgC,EAAAA,KAAA,MAAA,CAAIC,UAAU,yBAAyB,cAAY,OAChDC,SAAA,CAACF,EAAAA,KAAA,MAAA,CAAIC,UAAU,+BACVC,SAAA,CAAAvB,EAAe,MAAce,MAEhC1B,EAAQsC,cACNH,EAAAA,IAAC,MAAA,CACGF,UAAU,kCACV3B,MAAO,CACF,oBA5CAiB,EA6CGK,EA7CcW,EA8Cdb,EA7CxBH,GAAW,GAGE,IAAVgB,EAFI,EAEyB,IAAVhB,EAAiBgB,GAwCa,aA5CnD,IAAoBhB,EAAiBgB,CAmDlC,IAMpB5C,EAAa6C,YAAc"}
1	+ {"version":3,"file":"BaseTextArea.cjs","sources":["../../../../src/components/text-input/BaseTextArea.tsx"],"sourcesContent":["import React, {\n type FocusEvent,\n forwardRef,\n type RefObject,\n type TextareaHTMLAttributes,\n useRef,\n useState,\n useEffect,\n ChangeEvent,\n} from \"react\";\n\nexport type Counter = {\n /** Antall tegn før telleren når maksimum og vi viser en feilmelding /\n maxLength: number;\n /\n Med teller vises en progress-bar i bunnen av tekstfeltet som krymper\n * ned fra 100% (null tegn skrevet) til 0% (maks antall tegn skrevet).\n * Om du vil skjule den, sett denne propen til true.\n \n @default false\n /\n hideProgress?: boolean;\n};\n\nexport interface BaseTextAreaProps\n extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, \"children\"> {\n /\n Viser en teller i tekstfeltet når det har fokus.\n /\n counter?: Counter;\n /* Sett antall rader skjemafeltet ekspanderes til ved focus. Innholdet scroller om feltet fylles med mer innhold enn det er plass til. /\n rows?: number;\n inline?: boolean;\n startOpen?: boolean;\n /* Gjør så skjemafeltet ekspanderer seg til å vise alt innhold i stedet for å scrolle /\n autoExpand?: boolean;\n}\n\nexport const BaseTextArea = forwardRef<HTMLTextAreaElement, BaseTextAreaProps>(\n (props, ref) => {\n const {\n autoExpand,\n counter,\n onBlur,\n onFocus,\n rows = 7,\n placeholder = \" \", // This space intentionally left blank. Denne + rows trengs for å få den ekspanderende effekten.\n startOpen,\n style,\n value,\n \"aria-invalid\": ariaInvalid,\n onChange,\n ...rest\n } = props;\n\n const [counterCurrent, setCounterCurrent] = useState(() => {\n if (typeof value === \"undefined\") {\n return 0;\n } else if (typeof value === \"number\") {\n return String(value).length;\n } else {\n return value.length;\n }\n });\n const [textAreaFocused, setTextAreaFocused] = useState(false);\n const internalRef = useRef<HTMLTextAreaElement>(null);\n const textAreaRef =\n (ref as RefObject<HTMLTextAreaElement>) \|\| internalRef;\n\n useEffect(() => {\n const textAreaElement = textAreaRef.current;\n if (textAreaElement) {\n if (!autoExpand) {\n textAreaElement.style.height = \"\";\n return;\n }\n\n if (textAreaFocused \|\| value) {\n textAreaElement.style.height = \"auto\"; // Sett til auto før scrollhøyden leses, sånn at redusering av høyde ved sletting av tekst fungerer\n textAreaElement.style.height = `${textAreaElement.scrollHeight}px`;\n } else {\n textAreaElement.style.height = \"\";\n }\n }\n }, [autoExpand, textAreaRef, value, textAreaFocused]);\n\n function handleOnFocus(e: FocusEvent<HTMLTextAreaElement>) {\n setTextAreaFocused(true);\n if (onFocus) {\n onFocus(e);\n }\n }\n\n function handleOnBlur(e: FocusEvent<HTMLTextAreaElement>) {\n setTextAreaFocused(false);\n if (onBlur) {\n onBlur(e);\n }\n }\n\n function handleOnChange(e: ChangeEvent<HTMLTextAreaElement>) {\n setCounterCurrent(e.target.value.length);\n if (onChange) {\n onChange(e);\n }\n }\n\n const counterTotal: number = counter?.maxLength \|\| 0;\n const progressCurrent: number = counterTotal - counterCurrent;\n function calculatePercentage(current: number, total: number): number {\n if (current <= 0) {\n return 0;\n }\n return total === 0 ? 0 : (current 100) / total;\n }\n const counterLabel =\n counter && counterCurrent > counterTotal\n ? `Du har skrevet ${counterCurrent - counterTotal} tegn for mye`\n : undefined;\n\n const invalid = Boolean(ariaInvalid \|\| counterLabel);\n\n const overflowStyle = {\n overflowX: autoExpand ? \"hidden\" : undefined, // Must set overflowX hidden for Firefox https://stackoverflow.com/a/22700700\n } as React.CSSProperties;\n\n return (\n <div\n className=\"jkl-text-input-wrapper\"\n data-invalid={invalid}\n data-has-content={counterCurrent > 0}\n >\n <textarea\n aria-invalid={invalid}\n className={`jkl-text-area__text-area jkl-text-area__text-area--${rows}-rows`}\n onBlur={handleOnBlur}\n onFocus={handleOnFocus}\n onChange={handleOnChange}\n ref={textAreaRef}\n style={{ ...style, ...overflowStyle }}\n placeholder={placeholder}\n value={value}\n {...rest}\n />\n {counter && (\n <div className=\"jkl-text-area__counter\" aria-hidden=\"true\">\n <div className=\"jkl-text-area__counter-count\">\n {counterCurrent} / {counterTotal}\n </div>\n {!counter.hideProgress && (\n <div\n className=\"jkl-text-area__counter-progress\"\n style={{\n [\"--progress-width\" as string]: `${calculatePercentage(\n progressCurrent,\n counterTotal,\n )}%`,\n }}\n />\n )}\n </div>\n )}\n </div>\n );\n },\n);\nBaseTextArea.displayName = \"BaseTextArea\";\n"],"names":["BaseTextArea","forwardRef","props","ref","autoExpand","counter","onBlur","onFocus","rows","placeholder","startOpen","style","value","ariaInvalid","onChange","rest","counterCurrent","setCounterCurrent","useState","String","length","textAreaFocused","setTextAreaFocused","internalRef","useRef","textAreaRef","useEffect","textAreaElement","current","height","scrollHeight","counterTotal","maxLength","progressCurrent","invalid","overflowStyle","overflowX","jsxs","className","children","jsx","e","target","hideProgress","total","displayName"],"mappings":"wIAsCaA,EAAeC,EAAAA,YACxB,CAACC,EAAOC,KACE,MACFC,WAAAA,EACAC,QAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,KAAAA,EAAO,EACPC,YAAAA,EAAc,IACdC,UAAAA,EACAC,MAAAA,EACAC,MAAAA,EACA,eAAgBC,EAChBC,SAAAA,KACGC,GACHb,GAEGc,EAAgBC,GAAqBC,YAAS,WACtCN,EAAU,IACV,EACiB,iBAAVA,EACPO,OAAOP,GAAOQ,OAEdR,EAAMQ,UAGdC,EAAiBC,GAAsBJ,YAAS,GACjDK,EAAcC,SAA4B,MAC1CC,EACDtB,GAA0CoB,EAE/CG,EAAAA,WAAU,KACN,MAAMC,EAAkBF,EAAYG,QACpC,GAAID,EAAiB,CACjB,IAAKvB,EAED,YADAuB,EAAgBhB,MAAMkB,OAAS,IAI/BR,GAAmBT,GACnBe,EAAgBhB,MAAMkB,OAAS,OAC/BF,EAAgBhB,MAAMkB,OAAS,GAAGF,EAAgBG,kBAElDH,EAAgBhB,MAAMkB,OAAS,EAEvC,IACD,CAACzB,EAAYqB,EAAab,EAAOS,IAuB9B,MAAAU,GAAuB,MAAA1B,SAAAA,EAAS2B,YAAa,EAC7CC,EAA0BF,EAAef,EAO/C,MAKMkB,KAAkBrB,KAJpBR,GAAWW,EAAiBe,EACtB,kBAAkBf,EAAiBe,sBACnC,IAIJI,EAAgB,CAClBC,UAAWhC,EAAa,cAAW,GAInC,OAAAiC,EAAAA,KAAC,MAAA,CACGC,UAAU,yBACV,eAAcJ,EACd,mBAAkBlB,EAAiB,EAEnCuB,SAAA,CAAAC,EAAAA,IAAC,WAAA,CACG,eAAcN,EACdI,UAAW,sDAAsD9B,SACjEF,OA1CZ,SAAsBmC,GAClBnB,GAAmB,GACfhB,GACAA,EAAOmC,EAEf,EAsCYlC,QAlDZ,SAAuBkC,GACnBnB,GAAmB,GACff,GACAA,EAAQkC,EAEhB,EA8CY3B,SArCZ,SAAwB2B,GACFxB,EAAAwB,EAAEC,OAAO9B,MAAMQ,QAC7BN,GACAA,EAAS2B,EAEjB,EAiCYtC,IAAKsB,EACLd,MAAO,IAAKA,KAAUwB,GACtB1B,YAAAA,EACAG,MAAAA,KACIG,IAEPV,GACIgC,EAAAA,KAAA,MAAA,CAAIC,UAAU,yBAAyB,cAAY,OAChDC,SAAA,CAACF,EAAAA,KAAA,MAAA,CAAIC,UAAU,+BACVC,SAAA,CAAAvB,EAAe,MAAce,MAEhC1B,EAAQsC,cACNH,EAAAA,IAAC,MAAA,CACGF,UAAU,kCACV3B,MAAO,CACF,oBA5CAiB,EA6CGK,EA7CcW,EA8Cdb,EA7CxBH,GAAW,GAGE,IAAVgB,EAFI,EAEyB,IAAVhB,EAAiBgB,GAwCa,aA5CnD,IAAoBhB,EAAiBgB,CAmDlC,IAMpB5C,EAAa6C,YAAc"}

package/build/cjs/components/text-input/BaseTextArea.d.cts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { default as React, TextareaHTMLAttributes } from 'react';
-type Counter = {
+export type Counter = {
     /** Antall tegn før telleren når maksimum og vi viser en feilmelding */
     maxLength: number;
     /**
@@ -24,4 +24,3 @@ export interface BaseTextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextA
     autoExpand?: boolean;
 }
 export declare const BaseTextArea: React.ForwardRefExoticComponent<BaseTextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
-export {};

package/build/cjs/components/text-input/index.d.cts CHANGED Viewed

@@ -1,4 +1,4 @@
-export { BaseTextArea, type BaseTextAreaProps } from './BaseTextArea.cjs';
-export { BaseTextInput, type BaseTextInputProps } from './BaseTextInput.cjs';
+export { BaseTextArea, type BaseTextAreaProps, type Counter, } from './BaseTextArea.cjs';
+export { BaseTextInput, type BaseTextInputProps, type Action, } from './BaseTextInput.cjs';
 export { TextArea, type TextAreaProps } from './TextArea.cjs';
 export { TextInput, type TextInputProps } from './TextInput.cjs';

package/build/cjs/components/toast/index.d.cts CHANGED Viewed

@@ -1,2 +1,2 @@
 export { ToastProvider, useToast } from './toastContext.cjs';
-export { type ToastContent } from './types.cjs';
+export { type ToastContent, type ToastOptions, type ToastContext, } from './types.cjs';

package/build/cjs/components/toast/toastContext.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toastContext.cjs","sources":["../../../../src/components/toast/toastContext.tsx"],"sourcesContent":["import { ToastQueue } from \"@react-stately/toast\";\nimport React, { createContext, useContext, useState, type FC } from \"react\";\nimport { ~~type WithChildren } from \"../../core/types.js\";\nimport {~~ ToastRegion } from \"./ToastRegion.js\";\nimport { ToastContent, ToastOptions } from \"./types.js\";\n\ninterface ToastContextProviderProps extends WithChildren {\n maxVisibleToasts?: number;\n /*\n @default \"center\"\n */\n placement?: \"center\" \| \"left\";\n}\n\ntype ToastContext = {\n add: (toast: ToastContent, options?: ToastOptions) => string;\n};\n\nconst context = createContext<ToastContext>({\n add: () => {\n return \"missing-provider\";\n },\n});\n\nexport const useToast = (): ToastContext => useContext(context);\n\nexport const ToastProvider: FC<ToastContextProviderProps> = ({\n children,\n maxVisibleToasts = 5,\n placement = \"center\",\n}) => {\n const [queue] = useState(\n new ToastQueue<ToastContent>({\n maxVisibleToasts,\n hasExitAnimation: true,\n }),\n );\n\n return (\n <context.Provider\n value={{\n add: (toast: ToastContent, options?: ToastOptions) => {\n let timeout: number \| undefined = 5000;\n\n if (typeof options?.timeout === \"number\") {\n timeout = options.timeout as number;\n } else if (\n options?.timeout === null \|\|\n options?.timeout === \"off\"\n ) {\n timeout = undefined;\n }\n\n return queue.add(toast, {\n ...options,\n timeout,\n });\n },\n }}\n >\n {children}\n <ToastRegion queue={queue} placement={placement} />\n </context.Provider>\n );\n};\n"],"names":["context","createContext","add","children","maxVisibleToasts","placement","queue","useState","ToastQueue","hasExitAnimation","jsxs","Provider","value","toast","options","timeout","jsx","ToastRegion","useContext"],"mappings":"~~yMAkBMA~~,EAAUC,EAAAA,cAA4B,CACxCC,IAAK,IACM,2CAM6C,EACxDC,SAAAA,EACAC,iBAAAA,EAAmB,EACnBC,UAAAA,EAAY,aAEN,MAACC,GAASC,EAAAA,SACZ,IAAIC,aAAyB,CACzBJ,iBAAAA,EACAK,kBAAkB,KAKtB,OAAAC,EAAAA,KAACV,EAAQW,SAAR,CACGC,MAAO,CACHV,IAAK,CAACW,EAAqBC,KACvB,IAAIC,EAA8B,IAE9B,MAA4B,iBAArB,MAAAD,OAAA,EAAAA,EAASC,SAChBA,EAAUD,EAAQC,SAEG,QAArB,MAAAD,OAAAA,EAAAA,EAASC,UACY,SAArB,MAAAD,OAAAA,EAAAA,EAASC,YAECA,OAAA,GAGPT,EAAMJ,IAAIW,EAAO,IACjBC,EACHC,QAAAA,GACH,GAIRZ,SAAA,CAAAA,EACDa,EAAAA,IAACC,EAAYA,YAAA,CAAAX,MAAAA,EAAcD,UAAAA,MAAsB,mBArCrC,IAAoBa,EAAAA,WAAWlB"}
1	+ {"version":3,"file":"toastContext.cjs","sources":["../../../../src/components/toast/toastContext.tsx"],"sourcesContent":["import { ToastQueue } from \"@react-stately/toast\";\nimport React, { createContext, useContext, useState, type FC } from \"react\";\nimport { ToastRegion } from \"./ToastRegion.js\";\nimport {\n ToastContent,\n ToastContext,\n ToastContextProviderProps,\n ToastOptions,\n} from \"./types.js\";\n\nconst context = createContext<ToastContext>({\n add: () => {\n return \"missing-provider\";\n },\n});\n\nexport const useToast = (): ToastContext => useContext(context);\n\nexport const ToastProvider: FC<ToastContextProviderProps> = ({\n children,\n maxVisibleToasts = 5,\n placement = \"center\",\n}) => {\n const [queue] = useState(\n new ToastQueue<ToastContent>({\n maxVisibleToasts,\n hasExitAnimation: true,\n }),\n );\n\n return (\n <context.Provider\n value={{\n add: (toast: ToastContent, options?: ToastOptions) => {\n let timeout: number \| undefined = 5000;\n\n if (typeof options?.timeout === \"number\") {\n timeout = options.timeout as number;\n } else if (\n options?.timeout === null \|\|\n options?.timeout === \"off\"\n ) {\n timeout = undefined;\n }\n\n return queue.add(toast, {\n ...options,\n timeout,\n });\n },\n }}\n >\n {children}\n <ToastRegion queue={queue} placement={placement} />\n </context.Provider>\n );\n};\n"],"names":["context","createContext","add","children","maxVisibleToasts","placement","queue","useState","ToastQueue","hasExitAnimation","jsxs","Provider","value","toast","options","timeout","jsx","ToastRegion","useContext"],"mappings":"yMAUMA,EAAUC,EAAAA,cAA4B,CACxCC,IAAK,IACM,2CAM6C,EACxDC,SAAAA,EACAC,iBAAAA,EAAmB,EACnBC,UAAAA,EAAY,aAEN,MAACC,GAASC,EAAAA,SACZ,IAAIC,aAAyB,CACzBJ,iBAAAA,EACAK,kBAAkB,KAKtB,OAAAC,EAAAA,KAACV,EAAQW,SAAR,CACGC,MAAO,CACHV,IAAK,CAACW,EAAqBC,KACvB,IAAIC,EAA8B,IAE9B,MAA4B,iBAArB,MAAAD,OAAA,EAAAA,EAASC,SAChBA,EAAUD,EAAQC,SAEG,QAArB,MAAAD,OAAAA,EAAAA,EAASC,UACY,SAArB,MAAAD,OAAAA,EAAAA,EAASC,YAECA,OAAA,GAGPT,EAAMJ,IAAIW,EAAO,IACjBC,EACHC,QAAAA,GACH,GAIRZ,SAAA,CAAAA,EACDa,EAAAA,IAACC,EAAYA,YAAA,CAAAX,MAAAA,EAAcD,UAAAA,MAAsB,mBArCrC,IAAoBa,EAAAA,WAAWlB"}

package/build/cjs/components/toast/toastContext.d.cts CHANGED Viewed

@@ -1,16 +1,4 @@
 import { FC } from 'react';
-import { WithChildren } from '../../core/types.cjs';
-import { ToastContent, ToastOptions } from './types.cjs';
-interface ToastContextProviderProps extends WithChildren {
-    maxVisibleToasts?: number;
-    /**
-     * @default "center"
-     */
-    placement?: "center" | "left";
-}
-type ToastContext = {
-    add: (toast: ToastContent, options?: ToastOptions) => string;
-};
+import { ToastContext, ToastContextProviderProps } from './types.cjs';
 export declare const useToast: () => ToastContext;
 export declare const ToastProvider: FC<ToastContextProviderProps>;
-export {};

package/build/cjs/components/toast/types.d.cts CHANGED Viewed

@@ -1,5 +1,6 @@
 import { ToastOptions as StatelyToastOptions } from '@react-stately/toast';
 import { ReactNode } from 'react';
+import { WithChildren } from '../../core/types.cjs';
 export type ToastContent = {
     content: ReactNode;
     title?: string;
@@ -8,3 +9,13 @@ export type ToastOptions = Omit<StatelyToastOptions, "timeout"> & {
     variant?: "info" | "success" | "warning" | "error";
     timeout?: number | null | "off";
 };
+export type ToastContext = {
+    add: (toast: ToastContent, options?: ToastOptions) => string;
+};
+export type ToastContextProviderProps = WithChildren & {
+    maxVisibleToasts?: number;
+    /**
+     * @default "center"
+     */
+    placement?: "center" | "left";
+};

package/build/cjs/components/toggle-switch/ToggleSlider.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ToggleSlider.cjs","sources":["../../../../src/components/toggle-switch/ToggleSlider.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n FC,\n Fragment,\n MouseEventHandler,\n useRef,\n useState,\n} from \"react\";\nimport { Density, WithChildren } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useSwipeGesture } from \"../../hooks/useSwipeGesture/useSwipeGesture.js\";\nimport { ToggleChangeHandler } from \"./ToggleSwitch.js\";\nimport { usePillStyles } from \"./usePillStyles.js\";\n\~~ninterface~~ ~~Props~~ extends WithChildren {\n labels: [string, string];\n onToggle: (value: string) => void;\n defaultValue?: string;\n className?: string;\n hideLegend?: boolean;\n density?: Density;\n}\n\nexport const ToggleSlider: FC<~~Props~~> = ({\n children,\n labels,\n className = \"\",\n onToggle,\n defaultValue,\n hideLegend = false,\n density,\n ...rest\n}) => {\n const [currentLabel, setCurrentLabel] = useState(defaultValue \|\| labels[0]);\n const id = useId(\"jkl-toggle-slider\");\n const legendId = useId(\"jkl-toggle-slider-legend\");\n const activeRef = useRef<HTMLLabelElement>(null);\n\n const shouldTransform = currentLabel === labels[1];\n const pillStyles = usePillStyles(activeRef, shouldTransform, [density]);\n\n const handleChange: ToggleChangeHandler<HTMLElement> = (_, pressed) => {\n setCurrentLabel(pressed ? labels[1] : labels[0]);\n onToggle(pressed ? labels[1] : labels[0]);\n };\n\n const handleClick: MouseEventHandler<HTMLInputElement> = (event) => {\n const { value } = event.currentTarget;\n setCurrentLabel(value);\n onToggle(value);\n };\n\n const { gestureHandlers } = useSwipeGesture<HTMLDivElement>({\n onClick: handleClick,\n onChange: handleChange,\n });\n const { onClick, ...swipeHandlers } = gestureHandlers;\n\n if (process.env.NODE_ENV !== \"production\") {\n console.error(\n \"WARNING: ToggleSlider component has been deprecated and will be removed in some future version of the library\",\n );\n }\n\n return (\n <fieldset\n {...rest}\n className={clsx(\"jkl-toggle-slider\", className)}\n aria-labelledby={legendId}\n data-testid=\"jkl-toggle-slider\"\n data-density={density}\n >\n <div\n id={legendId}\n className={clsx(\"jkl-toggle-slider__legend\", {\n \"jkl-toggle-slider__legend--sr-only\": hideLegend,\n })}\n >\n {children}\n </div>\n <div className=\"jkl-toggle-slider__inputs\" {...swipeHandlers}>\n {labels.map((label) => (\n <Fragment key={label}>\n <input\n className=\"jkl-toggle-slider__input\"\n type=\"radio\"\n value={label}\n checked={label === currentLabel}\n name={id}\n id={`${label}-${id}`}\n onClick={onClick}\n onChange={() => {}}\n />\n <label\n className={clsx(\"jkl-toggle-slider__label\", {\n \"jkl-toggle-slider__label--selected\":\n label === currentLabel,\n })}\n ref={label === currentLabel ? activeRef : undefined}\n htmlFor={`${label}-${id}`}\n >\n {label}\n </label>\n </Fragment>\n ))}\n <span\n className=\"jkl-toggle-slider__pill\"\n style={pillStyles}\n aria-hidden\n />\n </div>\n </fieldset>\n );\n};\n"],"names":["children","labels","className","onToggle","defaultValue","hideLegend","density","rest","currentLabel","setCurrentLabel","useState","id","useId","legendId","activeRef","useRef","shouldTransform","pillStyles","usePillStyles","gestureHandlers","useSwipeGesture","onClick","event","value","currentTarget","onChange","_","pressed","swipeHandlers","process","env","NODE_ENV","console","error","jsxs","clsx","jsx","map","label","Fragment","type","checked","name","ref","htmlFor","style"],"mappings":"~~4UAuBuC~~,~~EACnCA~~,SAAAA,EACAC,OAAAA,EACAC,UAAAA,EAAY,GACZC,SAAAA,EACAC,aAAAA,EACAC,WAAAA,GAAa,EACbC,QAAAA,KACGC,MAEG,MAACC,EAAcC,GAAmBC,EAAAA,SAASN,GAAgBH,EAAO,IAClEU,EAAKC,QAAM,qBACXC,EAAWD,QAAM,4BACjBE,EAAYC,SAAyB,MAErCC,EAAkBR,IAAiBP,EAAO,GAC1CgB,EAAaC,EAAAA,cAAcJ,EAAWE,EAAiB,CAACV,KAatDa,gBAAAA,GAAoBC,kBAAgC,CACxDC,QAPsDC,IAChD,MAAEC,MAAAA,GAAUD,EAAME,cACxBf,EAAgBc,GAChBpB,EAASoB,EAAK,EAKdE,SAbmD,CAACC,EAAGC,KACvDlB,EAAgBkB,EAAU1B,EAAO,GAAKA,EAAO,IAC7CE,EAASwB,EAAU1B,EAAO,GAAKA,EAAO,GAAE,KAapCoB,QAAAA,KAAYO,GAAkBT,EAElC,MAAyB,eAAzBU,QAAQC,IAAIC,UACJC,QAAAC,MACJ,iHAKJC,EAAAA,KAAC,WAAA,IACO3B,EACJL,UAAWiC,EAAAA,KAAK,oBAAqBjC,GACrC,kBAAiBW,EACjB,cAAY,oBACZ,eAAcP,EAEdN,SAAA,CAAAoC,EAAAA,IAAC,MAAA,CACGzB,GAAIE,EACJX,UAAWiC,OAAK,4BAA6B,CACzC,qCAAsC9B,IAGzCL,SAAAA,IAEJkC,EAAAA,KAAA,MAAA,CAAIhC,UAAU,+BAAgC0B,EAC1C5B,SAAA,CAAAC,EAAOoC,KAAKC,GACTJ,EAAAA,KAACK,EAAAA,SACG,CAAAvC,SAAA,CAAAoC,EAAAA,IAAC,QAAA,CACGlC,UAAU,2BACVsC,KAAK,QACLjB,MAAOe,EACPG,QAASH,IAAU9B,EACnBkC,KAAM/B,EACNA,GAAI,GAAG2B,KAAS3B,IAChBU,QAAAA,EACAI,SAAU,SAEdW,EAAAA,IAAC,QAAA,CACGlC,UAAWiC,OAAK,2BAA4B,CACxC,qCACIG,IAAU9B,IAElBmC,IAAKL,IAAU9B,EAAeM,OAAY,EAC1C8B,QAAS,GAAGN,KAAS3B,IAEpBX,SAAAsC,MAnBMA,KAuBnBF,EAAAA,IAAC,OAAA,CACGlC,UAAU,0BACV2C,MAAO5B,EACP,eAAW,SAEnB"}
1	+ {"version":3,"file":"ToggleSlider.cjs","sources":["../../../../src/components/toggle-switch/ToggleSlider.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n FC,\n Fragment,\n MouseEventHandler,\n useRef,\n useState,\n} from \"react\";\nimport { Density, WithChildren } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useSwipeGesture } from \"../../hooks/useSwipeGesture/useSwipeGesture.js\";\nimport { ToggleChangeHandler } from \"./ToggleSwitch.js\";\nimport { usePillStyles } from \"./usePillStyles.js\";\n\nexport interface ToggleSliderProps extends WithChildren {\n labels: [string, string];\n onToggle: (value: string) => void;\n defaultValue?: string;\n className?: string;\n hideLegend?: boolean;\n density?: Density;\n}\n\nexport const ToggleSlider: FC<ToggleSliderProps> = ({\n children,\n labels,\n className = \"\",\n onToggle,\n defaultValue,\n hideLegend = false,\n density,\n ...rest\n}) => {\n const [currentLabel, setCurrentLabel] = useState(defaultValue \|\| labels[0]);\n const id = useId(\"jkl-toggle-slider\");\n const legendId = useId(\"jkl-toggle-slider-legend\");\n const activeRef = useRef<HTMLLabelElement>(null);\n\n const shouldTransform = currentLabel === labels[1];\n const pillStyles = usePillStyles(activeRef, shouldTransform, [density]);\n\n const handleChange: ToggleChangeHandler<HTMLElement> = (_, pressed) => {\n setCurrentLabel(pressed ? labels[1] : labels[0]);\n onToggle(pressed ? labels[1] : labels[0]);\n };\n\n const handleClick: MouseEventHandler<HTMLInputElement> = (event) => {\n const { value } = event.currentTarget;\n setCurrentLabel(value);\n onToggle(value);\n };\n\n const { gestureHandlers } = useSwipeGesture<HTMLDivElement>({\n onClick: handleClick,\n onChange: handleChange,\n });\n const { onClick, ...swipeHandlers } = gestureHandlers;\n\n if (process.env.NODE_ENV !== \"production\") {\n console.error(\n \"WARNING: ToggleSlider component has been deprecated and will be removed in some future version of the library\",\n );\n }\n\n return (\n <fieldset\n {...rest}\n className={clsx(\"jkl-toggle-slider\", className)}\n aria-labelledby={legendId}\n data-testid=\"jkl-toggle-slider\"\n data-density={density}\n >\n <div\n id={legendId}\n className={clsx(\"jkl-toggle-slider__legend\", {\n \"jkl-toggle-slider__legend--sr-only\": hideLegend,\n })}\n >\n {children}\n </div>\n <div className=\"jkl-toggle-slider__inputs\" {...swipeHandlers}>\n {labels.map((label) => (\n <Fragment key={label}>\n <input\n className=\"jkl-toggle-slider__input\"\n type=\"radio\"\n value={label}\n checked={label === currentLabel}\n name={id}\n id={`${label}-${id}`}\n onClick={onClick}\n onChange={() => {}}\n />\n <label\n className={clsx(\"jkl-toggle-slider__label\", {\n \"jkl-toggle-slider__label--selected\":\n label === currentLabel,\n })}\n ref={label === currentLabel ? activeRef : undefined}\n htmlFor={`${label}-${id}`}\n >\n {label}\n </label>\n </Fragment>\n ))}\n <span\n className=\"jkl-toggle-slider__pill\"\n style={pillStyles}\n aria-hidden\n />\n </div>\n </fieldset>\n );\n};\n"],"names":["children","labels","className","onToggle","defaultValue","hideLegend","density","rest","currentLabel","setCurrentLabel","useState","id","useId","legendId","activeRef","useRef","shouldTransform","pillStyles","usePillStyles","gestureHandlers","useSwipeGesture","onClick","event","value","currentTarget","onChange","_","pressed","swipeHandlers","process","env","NODE_ENV","console","error","jsxs","clsx","jsx","map","label","Fragment","type","checked","name","ref","htmlFor","style"],"mappings":"4UAuBmD,EAC/CA,SAAAA,EACAC,OAAAA,EACAC,UAAAA,EAAY,GACZC,SAAAA,EACAC,aAAAA,EACAC,WAAAA,GAAa,EACbC,QAAAA,KACGC,MAEG,MAACC,EAAcC,GAAmBC,EAAAA,SAASN,GAAgBH,EAAO,IAClEU,EAAKC,QAAM,qBACXC,EAAWD,QAAM,4BACjBE,EAAYC,SAAyB,MAErCC,EAAkBR,IAAiBP,EAAO,GAC1CgB,EAAaC,EAAAA,cAAcJ,EAAWE,EAAiB,CAACV,KAatDa,gBAAAA,GAAoBC,kBAAgC,CACxDC,QAPsDC,IAChD,MAAEC,MAAAA,GAAUD,EAAME,cACxBf,EAAgBc,GAChBpB,EAASoB,EAAK,EAKdE,SAbmD,CAACC,EAAGC,KACvDlB,EAAgBkB,EAAU1B,EAAO,GAAKA,EAAO,IAC7CE,EAASwB,EAAU1B,EAAO,GAAKA,EAAO,GAAE,KAapCoB,QAAAA,KAAYO,GAAkBT,EAElC,MAAyB,eAAzBU,QAAQC,IAAIC,UACJC,QAAAC,MACJ,iHAKJC,EAAAA,KAAC,WAAA,IACO3B,EACJL,UAAWiC,EAAAA,KAAK,oBAAqBjC,GACrC,kBAAiBW,EACjB,cAAY,oBACZ,eAAcP,EAEdN,SAAA,CAAAoC,EAAAA,IAAC,MAAA,CACGzB,GAAIE,EACJX,UAAWiC,OAAK,4BAA6B,CACzC,qCAAsC9B,IAGzCL,SAAAA,IAEJkC,EAAAA,KAAA,MAAA,CAAIhC,UAAU,+BAAgC0B,EAC1C5B,SAAA,CAAAC,EAAOoC,KAAKC,GACTJ,EAAAA,KAACK,EAAAA,SACG,CAAAvC,SAAA,CAAAoC,EAAAA,IAAC,QAAA,CACGlC,UAAU,2BACVsC,KAAK,QACLjB,MAAOe,EACPG,QAASH,IAAU9B,EACnBkC,KAAM/B,EACNA,GAAI,GAAG2B,KAAS3B,IAChBU,QAAAA,EACAI,SAAU,SAEdW,EAAAA,IAAC,QAAA,CACGlC,UAAWiC,OAAK,2BAA4B,CACxC,qCACIG,IAAU9B,IAElBmC,IAAKL,IAAU9B,EAAeM,OAAY,EAC1C8B,QAAS,GAAGN,KAAS3B,IAEpBX,SAAAsC,MAnBMA,KAuBnBF,EAAAA,IAAC,OAAA,CACGlC,UAAU,0BACV2C,MAAO5B,EACP,eAAW,SAEnB"}

package/build/cjs/components/toggle-switch/ToggleSlider.d.cts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { Density, WithChildren } from '../../core/types.cjs';
-interface Props extends WithChildren {
+export interface ToggleSliderProps extends WithChildren {
     labels: [string, string];
     onToggle: (value: string) => void;
     defaultValue?: string;
@@ -8,5 +8,4 @@ interface Props extends WithChildren {
     hideLegend?: boolean;
     density?: Density;
 }
-export declare const ToggleSlider: FC<Props>;
-export {};
+export declare const ToggleSlider: FC<ToggleSliderProps>;

package/build/cjs/components/toggle-switch/ToggleSwitch.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ToggleSwitch.cjs","sources":["../../../../src/components/toggle-switch/ToggleSwitch.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n type ButtonHTMLAttributes,\n type MouseEventHandler,\n forwardRef,\n} from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport {\n SwipeChangeHandler,\n useSwipeGesture,\n} from \"../../hooks/useSwipeGesture/useSwipeGesture.js\";\nimport { CheckIcon } from \"../icon/icons/CheckIcon.js\";\n\nexport type ToggleChangeHandler<T extends HTMLElement> = SwipeChangeHandler<T>;\n\nexport type ~~ToggleProps~~ = Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n \"onChange\"\n> & {\n density?: Density;\n /*\n Handler for å håndtere toggling av knappen. Tar inn en boolean som indikerer om knappen er er togglet på\n * eller ikke, samt en MouseEvent eller en PointerEvent avhengig av om togglingen skjedde via klikk eller swipe.\n * @example\n * ```js\n * function handleChange(event, pressed) {\n * console.log(`ToggleSwitch er ${pressed ? \"på\" : \"av\"}`);\n * }\n * ```\n */\n onChange?: ToggleChangeHandler<HTMLButtonElement>;\n};\n\nexport const ToggleSwitch = forwardRef<HTMLButtonElement, ~~ToggleProps~~>(\n (\n {\n \"aria-pressed\": ariaPressed = false,\n children,\n className,\n density,\n id,\n onChange,\n ...rest\n },\n ref,\n ) => {\n const uid = useId(id \|\| \"jkl-toggle-switch\", { generateSuffix: !id });\n const [pressed, setPressed] = React.useState(ariaPressed);\n React.useEffect(() => {\n setPressed(ariaPressed);\n }, [ariaPressed]);\n\n const {\n onClick,\n onPointerCancel,\n onPointerDown,\n onPointerMove,\n onPointerUp,\n ...buttonProps\n } = rest;\n\n const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n setPressed(!pressed);\n onChange?.(event, !pressed);\n onClick?.(event);\n };\n\n const handleChange: ToggleChangeHandler<HTMLButtonElement> = (\n event,\n toggleTo,\n ) => {\n if (toggleTo !== pressed) {\n setPressed(toggleTo);\n onChange?.(event, toggleTo);\n }\n };\n\n const { gestureHandlers } = useSwipeGesture({\n onClick: handleClick,\n onChange: handleChange,\n onPointerCancel,\n onPointerDown,\n onPointerMove,\n onPointerUp,\n });\n\n return (\n <button\n className={clsx(\"jkl-toggle-switch\", className)}\n id={uid}\n ref={ref}\n aria-pressed={pressed}\n data-density={density}\n {...buttonProps}\n {...(buttonProps.disabled ? {} : gestureHandlers)}\n >\n {children}\n <div aria-hidden className=\"jkl-toggle-switch-widget\">\n <div className=\"jkl-toggle-switch-widget__slider\">\n <div className=\"jkl-toggle-switch-widget__knob\" />\n <CheckIcon\n variant=\"small\"\n bold\n className=\"jkl-toggle-switch-widget__indicator\"\n />\n </div>\n </div>\n </button>\n );\n },\n);\nToggleSwitch.displayName = \"ToggleSwitch\";\n"],"names":["ToggleSwitch","forwardRef","ariaPressed","children","className","density","id","onChange","rest","ref","uid","useId","generateSuffix","pressed","setPressed","React","useState","useEffect","onClick","onPointerCancel","onPointerDown","onPointerMove","onPointerUp","buttonProps","gestureHandlers","useSwipeGesture","event","toggleTo","jsxs","clsx","disabled","jsx","CheckIcon","variant","bold","displayName"],"mappings":"+TAkCaA,EAAeC,EAAAA,YACxB,EAEQ,eAAgBC,GAAc,EAC9BC,SAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,GAAAA,EACAC,SAAAA,KACGC,GAEPC,KAEM,MAAAC,EAAMC,QAAML,GAAM,oBAAqB,CAAEM,gBAAiBN,KACzDO,EAASC,GAAcC,EAAMC,SAASd,GAC7Ca,EAAME,WAAU,KACZH,EAAWZ,EAAW,GACvB,CAACA,IAEE,MACFgB,QAAAA,EACAC,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,KACGC,GACHf,GAkBIgB,gBAAAA,GAAoBC,kBAAgB,CACxCP,QAjBuDQ,IACvDZ,GAAYD,GACD,MAAAN,GAAAA,EAAAmB,GAAQb,GACnB,MAAAK,GAAAA,EAAUQ,IAeVnB,SAZyD,CACzDmB,EACAC,KAEIA,IAAad,IACbC,EAAWa,GACX,MAAApB,GAAAA,EAAWmB,EAAOC,GACtB,EAMAR,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,IAIA,OAAAM,EAAAA,KAAC,SAAA,CACGxB,UAAWyB,EAAAA,KAAK,oBAAqBzB,GACrCE,GAAII,EACJD,IAAAA,EACA,eAAcI,EACd,eAAcR,KACVkB,KACCA,EAAYO,SAAW,CAAA,EAAKN,EAEhCrB,SAAA,CAAAA,EACD4B,EAAAA,IAAC,OAAI,eAAW,EAAC3B,UAAU,2BACvBD,SAAAyB,EAAAA,KAAC,MAAI,CAAAxB,UAAU,mCACXD,SAAA,CAAC4B,EAAAA,IAAA,MAAA,CAAI3B,UAAU,mCACf2B,EAAAA,IAACC,EAAAA,UAAA,CACGC,QAAQ,QACRC,MAAI,EACJ9B,UAAU,+CAGtB,IAKhBJ,EAAamC,YAAc"}
1	+ {"version":3,"file":"ToggleSwitch.cjs","sources":["../../../../src/components/toggle-switch/ToggleSwitch.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n type ButtonHTMLAttributes,\n type MouseEventHandler,\n forwardRef,\n} from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport {\n SwipeChangeHandler,\n useSwipeGesture,\n} from \"../../hooks/useSwipeGesture/useSwipeGesture.js\";\nimport { CheckIcon } from \"../icon/icons/CheckIcon.js\";\n\nexport type ToggleChangeHandler<T extends HTMLElement> = SwipeChangeHandler<T>;\n\nexport type ToggleSwitchProps = Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n \"onChange\"\n> & {\n density?: Density;\n /*\n Handler for å håndtere toggling av knappen. Tar inn en boolean som indikerer om knappen er er togglet på\n * eller ikke, samt en MouseEvent eller en PointerEvent avhengig av om togglingen skjedde via klikk eller swipe.\n * @example\n * ```js\n * function handleChange(event, pressed) {\n * console.log(`ToggleSwitch er ${pressed ? \"på\" : \"av\"}`);\n * }\n * ```\n */\n onChange?: ToggleChangeHandler<HTMLButtonElement>;\n};\n\nexport const ToggleSwitch = forwardRef<HTMLButtonElement, ToggleSwitchProps>(\n (\n {\n \"aria-pressed\": ariaPressed = false,\n children,\n className,\n density,\n id,\n onChange,\n ...rest\n },\n ref,\n ) => {\n const uid = useId(id \|\| \"jkl-toggle-switch\", { generateSuffix: !id });\n const [pressed, setPressed] = React.useState(ariaPressed);\n React.useEffect(() => {\n setPressed(ariaPressed);\n }, [ariaPressed]);\n\n const {\n onClick,\n onPointerCancel,\n onPointerDown,\n onPointerMove,\n onPointerUp,\n ...buttonProps\n } = rest;\n\n const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n setPressed(!pressed);\n onChange?.(event, !pressed);\n onClick?.(event);\n };\n\n const handleChange: ToggleChangeHandler<HTMLButtonElement> = (\n event,\n toggleTo,\n ) => {\n if (toggleTo !== pressed) {\n setPressed(toggleTo);\n onChange?.(event, toggleTo);\n }\n };\n\n const { gestureHandlers } = useSwipeGesture({\n onClick: handleClick,\n onChange: handleChange,\n onPointerCancel,\n onPointerDown,\n onPointerMove,\n onPointerUp,\n });\n\n return (\n <button\n className={clsx(\"jkl-toggle-switch\", className)}\n id={uid}\n ref={ref}\n aria-pressed={pressed}\n data-density={density}\n {...buttonProps}\n {...(buttonProps.disabled ? {} : gestureHandlers)}\n >\n {children}\n <div aria-hidden className=\"jkl-toggle-switch-widget\">\n <div className=\"jkl-toggle-switch-widget__slider\">\n <div className=\"jkl-toggle-switch-widget__knob\" />\n <CheckIcon\n variant=\"small\"\n bold\n className=\"jkl-toggle-switch-widget__indicator\"\n />\n </div>\n </div>\n </button>\n );\n },\n);\nToggleSwitch.displayName = \"ToggleSwitch\";\n"],"names":["ToggleSwitch","forwardRef","ariaPressed","children","className","density","id","onChange","rest","ref","uid","useId","generateSuffix","pressed","setPressed","React","useState","useEffect","onClick","onPointerCancel","onPointerDown","onPointerMove","onPointerUp","buttonProps","gestureHandlers","useSwipeGesture","event","toggleTo","jsxs","clsx","disabled","jsx","CheckIcon","variant","bold","displayName"],"mappings":"+TAkCaA,EAAeC,EAAAA,YACxB,EAEQ,eAAgBC,GAAc,EAC9BC,SAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,GAAAA,EACAC,SAAAA,KACGC,GAEPC,KAEM,MAAAC,EAAMC,QAAML,GAAM,oBAAqB,CAAEM,gBAAiBN,KACzDO,EAASC,GAAcC,EAAMC,SAASd,GAC7Ca,EAAME,WAAU,KACZH,EAAWZ,EAAW,GACvB,CAACA,IAEE,MACFgB,QAAAA,EACAC,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,KACGC,GACHf,GAkBIgB,gBAAAA,GAAoBC,kBAAgB,CACxCP,QAjBuDQ,IACvDZ,GAAYD,GACD,MAAAN,GAAAA,EAAAmB,GAAQb,GACnB,MAAAK,GAAAA,EAAUQ,IAeVnB,SAZyD,CACzDmB,EACAC,KAEIA,IAAad,IACbC,EAAWa,GACX,MAAApB,GAAAA,EAAWmB,EAAOC,GACtB,EAMAR,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,IAIA,OAAAM,EAAAA,KAAC,SAAA,CACGxB,UAAWyB,EAAAA,KAAK,oBAAqBzB,GACrCE,GAAII,EACJD,IAAAA,EACA,eAAcI,EACd,eAAcR,KACVkB,KACCA,EAAYO,SAAW,CAAA,EAAKN,EAEhCrB,SAAA,CAAAA,EACD4B,EAAAA,IAAC,OAAI,eAAW,EAAC3B,UAAU,2BACvBD,SAAAyB,EAAAA,KAAC,MAAI,CAAAxB,UAAU,mCACXD,SAAA,CAAC4B,EAAAA,IAAA,MAAA,CAAI3B,UAAU,mCACf2B,EAAAA,IAACC,EAAAA,UAAA,CACGC,QAAQ,QACRC,MAAI,EACJ9B,UAAU,+CAGtB,IAKhBJ,EAAamC,YAAc"}

package/build/cjs/components/toggle-switch/ToggleSwitch.d.cts CHANGED Viewed

@@ -2,7 +2,7 @@ import { default as React, ButtonHTMLAttributes } from 'react';
 import { Density } from '../../core/types.cjs';
 import { SwipeChangeHandler } from '../../hooks/useSwipeGesture/useSwipeGesture.cjs';
 export type ToggleChangeHandler<T extends HTMLElement> = SwipeChangeHandler<T>;
-export type ToggleProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> & {
+export type ToggleSwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> & {
     density?: Density;
     /**
      * Handler for å håndtere toggling av knappen. Tar inn en boolean som indikerer om knappen er er togglet på

package/build/cjs/components/toggle-switch/index.d.cts CHANGED Viewed

@@ -1,2 +1,2 @@
-export { ToggleSwitch, type ToggleChangeHandler } from './ToggleSwitch.cjs';
-export { ToggleSlider } from './ToggleSlider.cjs';
+export { ToggleSwitch, type ToggleChangeHandler, type ToggleSwitchProps, } from './ToggleSwitch.cjs';
+export { ToggleSlider, type ToggleSliderProps } from './ToggleSlider.cjs';

package/build/cjs/components/tooltip/Tooltip.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@floating-ui/react"),n=require("react"),o=({initialOpen:e=!1,placement:o="top",delay:r=250,triggerOn:i="hover"})=>{const[s,l]=n.useState(e),u=n.useRef(null),c=n.useRef(null),a=t.useFloating({open:s,onOpenChange:l,placement:o,whileElementsMounted:t.autoUpdate,middleware:[t.offset(16),t.flip(),t.shift({padding:16}),t.arrow({element:u,padding:20})]}),p=t.useRole(a.context,{role:"tooltip"}),d=t.useDismiss(a.context,{referencePress:!1}),x=t.useClick(a.context,{enabled:"click"===i&&!s}),f=t.useHover(a.context,{enabled:"hover"===i,delay:s?0:r}),g=t.useFocus(a.context,{enabled:"click"!==i||s}),m=t.useInteractions([d,g,p,x,f]);return{triggerOn:i,isOpen:s,setOpen:l,arrowElement:u,...a,refs:{...a.refs,description:c,setDescription:e=>c.current=e},...m}},r=n.createContext(null),i=r.Provider;exports.Tooltip=({children:t,...n})=>{const r=o(n);return e.jsx(i,{value:r,children:t})},exports.TooltipProvider=i,exports.useTooltip=o,exports.useTooltipContext=()=>{const e=n.useContext(r);if(null===e)throw new Error("Tooltip-komponentene kan kun brukes inne i <Tooltip />");return e};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@floating-ui/react"),n=require("react"),r=n.createContext(null),o=r.Provider;exports.Tooltip=({children:r,...i})=>{const s=(({initialOpen:e=!1,placement:r="top",delay:o=250,triggerOn:i="hover"})=>{const[s,l]=n.useState(e),u=n.useRef(null),c=n.useRef(null),a=t.useFloating({open:s,onOpenChange:l,placement:r,whileElementsMounted:t.autoUpdate,middleware:[t.offset(16),t.flip(),t.shift({padding:16}),t.arrow({element:u,padding:8})]}),p=t.useRole(a.context,{role:"tooltip"}),d=t.useDismiss(a.context,{referencePress:!1}),x=t.useClick(a.context,{enabled:"click"===i&&!s}),f=t.useHover(a.context,{enabled:"hover"===i,delay:s?0:o}),g=t.useFocus(a.context,{enabled:"click"!==i||s}),m=t.useInteractions([d,g,p,x,f]);return{triggerOn:i,isOpen:s,setOpen:l,arrowElement:u,...a,refs:{...a.refs,description:c,setDescription:e=>c.current=e},...m}})(i);return e.jsx(o,{value:s,children:r})},exports.TooltipProvider=o,exports.useTooltipContext=()=>{const e=n.useContext(r);if(null===e)throw new Error("Tooltip-komponentene kan kun brukes inne i <Tooltip />");return e};
 //# sourceMappingURL=Tooltip.cjs.map