@fremtind/jokul 0.9.0 → 0.10.1

package/src/components/text-input/styles/text-input.scss

@@ -0,0 +1,389 @@
+@charset "UTF-8";
+@use "sass:color";
+@use "../../../core/jkl";
+@use "../../../core/jkl/colors";
+
+$_text-input-height: jkl.rem(48px);
+$_text-input-height--mobile: jkl.rem(44px);
+$_text-input-height--compact: jkl.rem(32px);
+$_text-input-vertical-padding: jkl.$spacing-xs;
+$_text-input-vertical-padding--compact: jkl.$spacing-2xs;
+$_text-input-horizontal-padding: jkl.$spacing-s;
+$_text-input-horizontal-padding--compact: jkl.$spacing-xs;
+
+$_action-button-size: jkl.rem(48px);
+$_action-button-size--mobile: jkl.rem(44px);
+$_action-button-size--compact: jkl.rem(32px);
+$_action-button-icon-size: jkl.rem(20px);
+$_action-button-icon-size--compact: jkl.rem(18px);
+$_action-button-padding: jkl.$spacing-xs 0;
+$_action-button-padding--compact: 0;
+$_action-button-focus-position: jkl.rem(8px);
+$_action-button-focus-position--compact: 0;
+
+$_text-input-focus-color: jkl.$color-granitt;
+$_text-input-selection-color: color.scale(
+    $color: $_text-input-focus-color,
+    $alpha: -80%,
+);
+
+$_text-input-focus-color--inverted: jkl.$color-snohvit;
+$_text-input-selection-color--inverted: color.scale(
+    $color: $_text-input-focus-color--inverted,
+    $alpha: -75%,
+);
+
+@include jkl.light-mode-variables {
+    --jkl-text-input-border-color: #{jkl.$color-stein};
+    --jkl-text-input-text-color: #{jkl.$color-granitt};
+    --jkl-text-input-placeholder-color: #{jkl.$color-stein};
+    --jkl-text-input-unit-color: #{jkl.$color-granitt};
+    --jkl-text-input-background-color: #{jkl.$color-hvit};
+    --jkl-text-input-focus-color: #{$_text-input-focus-color};
+    --jkl-text-input-error-background-color: #{jkl.$color-feil};
+    --jkl-text-input-error-text-color: #{jkl.$color-granitt};
+    --jkl-text-input-error-placeholder-color: #{jkl.$color-stein};
+    --jkl-text-input-selection-color: #{$_text-input-selection-color};
+    --jkl-text-input-error-selection-color: #{$_text-input-selection-color};
+    --jkl-text-area-counter-count-color: #{jkl.$color-stein};
+}
+
+@include jkl.dark-mode-variables {
+    --jkl-text-input-border-color: #{jkl.$color-svaberg};
+    --jkl-text-input-text-color: #{jkl.$color-snohvit};
+    --jkl-text-input-placeholder-color: #{jkl.$color-svaberg};
+    --jkl-text-input-unit-color: #{jkl.$color-snohvit};
+    --jkl-text-input-background-color: #{jkl.$color-skifer};
+    --jkl-text-input-focus-color: #{$_text-input-focus-color--inverted};
+    --jkl-text-input-selection-color: #{$_text-input-selection-color--inverted};
+    --jkl-text-input-error-background-color: #{jkl.$color-feil};
+    --jkl-text-input-error-text-color: #{jkl.$color-granitt};
+    --jkl-text-input-error-placeholder-color: #{jkl.$color-stein};
+    --jkl-text-input-error-selection-color: #{$_text-input-selection-color};
+    --jkl-text-area-counter-count-color: #{jkl.$color-svaberg};
+}
+
+@include jkl.comfortable-density-variables {
+    @include jkl.declare-font-variables("jkl-text-input", "body");
+
+    --jkl-text-input-height: #{$_text-input-height};
+    --jkl-text-input-vertical-padding: #{$_text-input-vertical-padding};
+    --jkl-text-input-horizontal-padding: #{$_text-input-horizontal-padding};
+    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);
+    --jkl-text-input-action-button-size: #{$_action-button-size};
+    --jkl-text-input-action-button-icon-size: #{$_action-button-icon-size};
+    --jkl-text-input-action-button-padding: #{$_action-button-padding};
+    --jkl-text-input-action-button-focus-position: #{$_action-button-focus-position};
+
+    @include jkl.small-device {
+        --jkl-text-input-height: #{$_text-input-height--mobile};
+        --jkl-text-input-action-button-size: #{$_action-button-size--mobile};
+    }
+}
+
+@include jkl.compact-density-variables {
+    @include jkl.declare-font-variables("jkl-text-input", "small");
+
+    --jkl-text-input-height: #{$_text-input-height--compact};
+    --jkl-text-input-vertical-padding: #{$_text-input-vertical-padding--compact};
+    --jkl-text-input-horizontal-padding: #{$_text-input-horizontal-padding--compact};
+    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);
+    --jkl-text-input-action-button-size: #{$_action-button-size--compact};
+    --jkl-text-input-action-button-icon-size: #{$_action-button-icon-size--compact};
+    --jkl-text-input-action-button-padding: #{$_action-button-padding--compact};
+    --jkl-text-input-action-button-focus-position: #{$_action-button-focus-position--compact};
+}
+
+@mixin _shared-input-styles {
+    background: none;
+    -webkit-appearance: none;
+    color: var(--jkl-color);
+
+    @include jkl.use-font-variables("jkl-text-input");
+    @include jkl.reset-outline;
+    @include jkl.remove-inner-outer-button;
+
+    // Placeholder text style
+    &::placeholder {
+        opacity: 1;
+        color: var(--jkl-text-input-placeholder-color);
+    }
+
+    // Color of text selection
+    &::selection {
+        background-color: var(--jkl-text-input-selection-color);
+
+        [data-theme="dark"] & {
+            background-color: var(--jkl-text-input-selection-color);
+        }
+    }
+
+    //  Invalid state
+    &[aria-invalid="true"] {
+        color: var(--jkl-text-input-error-text-color);
+
+        &::placeholder {
+            color: var(--jkl-text-input-error-placeholder-color);
+        }
+
+        // Color of text selection
+        &::selection {
+            background-color: var(--jkl-text-input-error-selection-color);
+        }
+
+        & ~ .jkl-text-input-action-button {
+            color: var(--jkl-text-input-error-placeholder-color);
+
+            &:hover {
+                color: var(--jkl-text-input-error-text-color);
+            }
+
+            &:focus {
+                @include jkl.keyboard-navigation {
+                    &::after {
+                        box-shadow: inset 0 0 0 jkl.rem(2px) var(--jkl-text-input-error-text-color);
+                    }
+                }
+            }
+        }
+
+        & ~ .jkl-text-input__unit {
+            color: var(--jkl-text-input-error-text-color);
+        }
+    }
+}
+
+.jkl-text-input-action-button {
+    flex-shrink: 0;
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+    cursor: pointer;
+    padding: var(--jkl-text-input-action-button-padding);
+    height: var(--jkl-text-input-action-button-size);
+    width: var(--jkl-text-input-action-button-size);
+    color: var(--jkl-text-input-border-color);
+
+    // Unngå for langt mellomrom mellom ikon og teksten i feltet
+    margin-inline-start: calc(var(--jkl-text-input-horizontal-padding) * -1);
+
+    @include jkl.reset-outline;
+
+    .jkl-icon-button__icon {
+        height: var(--jkl-text-input-action-button-icon-size);
+        width: var(--jkl-text-input-action-button-icon-size);
+    }
+
+    &:hover {
+        color: var(--jkl-text-input-focus-color);
+
+        @include jkl.forced-colors-mode {
+            border: jkl.rem(2px) inset ButtonText;
+        }
+    }
+
+    &:focus {
+        @include jkl.keyboard-navigation {
+            position: relative;
+
+            &::after {
+                content: "";
+                position: absolute;
+                inset: var(--jkl-text-input-action-button-focus-position)
+                    var(--jkl-text-input-action-button-focus-position)
+                    var(--jkl-text-input-action-button-focus-position)
+                    var(--jkl-text-input-action-button-focus-position);
+                box-shadow: inset 0 0 0 jkl.rem(2px) var(--jkl-text-input-focus-color);
+            }
+        }
+    }
+
+    @include jkl.forced-colors-mode {
+        border: revert;
+        background-color: revert;
+    }
+
+    @include jkl.forced-colors-svg-fallback($stroke: ButtonText);
+}
+
+.jkl-text-input-wrapper {
+    border-radius: jkl.rem(3px);
+    box-sizing: border-box;
+    max-width: 100%;
+
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: var(--jkl-text-input-height);
+
+    @include jkl.use-font-variables("jkl-text-input");
+    @include jkl.motion;
+    transition-property: color, box-shadow, background-color;
+
+    color: var(--jkl-text-input-text-color);
+    box-shadow: inset 0 0 0 jkl.rem(1px) var(--jkl-text-input-border-color), 0 0 0 jkl.rem(1px) transparent;
+    background-color: transparent;
+
+    &:hover {
+        box-shadow: inset 0 0 0 jkl.rem(1px) var(--jkl-text-input-focus-color),
+            0 0 0 jkl.rem(1px) var(--jkl-text-input-focus-color);
+        border-color: var(--jkl-text-input-focus-color);
+    }
+
+    &:focus-within {
+        background-color: var(--jkl-text-input-background-color);
+        box-shadow: inset 0 0 0 jkl.rem(1px) var(--jkl-text-input-focus-color),
+            0 0 0 jkl.rem(1px) var(--jkl-text-input-focus-color);
+        border-color: var(--jkl-text-input-focus-color);
+    }
+
+    &[data-invalid="true"] {
+        background-color: var(--jkl-text-input-error-background-color);
+        color: var(--jkl-text-input-error-text-color);
+    }
+}
+
+.jkl-text-input {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    &__input {
+        padding: var(--jkl-text-input-padding);
+        width: 100%;
+        @include _shared-input-styles;
+
+        &--align-right {
+            text-align: right;
+        }
+    }
+
+    &__unit {
+        padding-inline-end: var(--jkl-text-input-horizontal-padding);
+        padding-block: var(--jkl-text-input-vertical-padding);
+        color: var(--jkl-text-input-unit-color);
+    }
+
+    &__action-button {
+        margin-inline-start: calc(var(--jkl-text-input-horizontal-padding) * -1);
+    }
+
+    &--inline {
+        display: inline-block;
+        vertical-align: middle;
+        margin: jkl.rem(-2px) jkl.rem(4px);
+    }
+}
+
+.jkl-text-area {
+    height: auto;
+    width: 100%;
+
+    &__text-area {
+        scrollbar-color: var(--jkl-color) transparent; // Unngå at scrollbar ligger oppå rammen
+        box-sizing: border-box;
+        resize: none; // Fjern mulighet for resizing av feltet
+        width: 100%;
+        padding: var(--jkl-text-input-padding);
+        max-height: var(--jkl-text-input-height);
+        height: var(--jkl-text-input-height);
+        min-height: var(--jkl-text-input-height);
+
+        @include jkl.motion;
+        transition-property: height, min-height, max-height, padding;
+        @include _shared-input-styles;
+    }
+
+    .jkl-text-input-wrapper {
+        height: auto;
+        max-height: 100%;
+    }
+
+    &--start-open {
+        .jkl-text-input-wrapper {
+            max-height: 100%;
+        }
+    }
+
+    &--auto-expand {
+        .jkl-text-area__text-area {
+            overflow: hidden; // Skjul scrollbar når høyden autojusteres
+        }
+    }
+
+    &:has(.jkl-text-area__counter) {
+        $progress-bar-height: jkl.rem(4px);
+
+        .jkl-text-input-wrapper {
+            position: relative;
+
+            &[data-has-content="true"],
+            &:focus-within {
+                padding-bottom: calc(var(--jkl-text-input-height) + #{$progress-bar-height});
+            }
+        }
+
+        .jkl-text-area__counter {
+            @include jkl.motion;
+            transition-property: opacity;
+            opacity: 0;
+
+            pointer-events: none; // La brukeren klikke gjennom telleren når feltet er kollapset
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+
+            &-count {
+                padding: var(--jkl-text-input-padding);
+                color: var(--jkl-text-area-counter-count-color);
+                @include jkl.text-style("small");
+            }
+
+            &-progress {
+                background-color: transparent;
+                height: $progress-bar-height;
+                width: 100%;
+                overflow: hidden;
+
+                &::after {
+                    content: "";
+                    width: var(--progress-width, 100%);
+                    display: block;
+                    height: $progress-bar-height;
+                    background-color: var(--jkl-color);
+                    transition-property: width;
+                    @include jkl.motion("standard", "lazy");
+                }
+            }
+        }
+
+        &:focus-within .jkl-text-area__counter {
+            opacity: 1;
+            transition-delay: jkl.timing("productive"); // Vent med å fade inn til feltet er ekspandert
+        }
+
+        [aria-invalid="true"] ~ .jkl-text-area__counter {
+            color: var(--jkl-text-input-error-text-color);
+        }
+    }
+}
+
+// Nytteklasser for tekstfelt med $num antall rader
+@for $num from 3 through 10 {
+    .jkl-text-area__text-area--#{$num}-rows:focus,
+    .jkl-text-area__text-area--#{$num}-rows:not(:placeholder-shown),
+    .jkl-text-area--start-open .jkl-text-area__text-area--#{$num}-rows {
+        --height: calc(var(--jkl-text-input-line-height) * #{$num});
+        --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
+
+        // (#2751) Ekspanderende får inline style med height auto,
+        //         som gir et "hopp" dersom det er en teller og vi
+        //         ikke har en minimumshøyde.
+        min-height: calc(var(--height) + var(--vertical-padding)); // (#2751)
+        height: calc(var(--height) + var(--vertical-padding));
+        max-height: 100%;
+    }
+}

package/build/NativeSelect-DOSP8-ZQ.js

@@ -1,2 +0,0 @@
-import{jsxs as e,Fragment as o,jsx as n}from"react/jsx-runtime";import{c as t}from"./clsx-BeLtu-UY.js";import{forwardRef as s,useState as i,useCallback as r,useMemo as c,useRef as a,useEffect as l}from"react";import"./es/hooks/useScreen/useScreen.js";import{useId as p}from"./es/hooks/useId/useId.js";import"./es/components/icon/Icon.js";import{ArrowVerticalAnimated as u}from"./es/components/icon/icons/animated/ArrowVerticalAnimated.js";import"./es/components/icon/icons/animated/ArrowHorizontalAnimated.js";import"./es/components/icon/icons/animated/PlusRemoveAnimated.js";import"./es/components/icon/icons/ArrowDownIcon.js";import"./es/components/icon/icons/ArrowLeftIcon.js";import"./es/components/icon/icons/ArrowNorthEastIcon.js";import"./es/components/icon/icons/ArrowRightIcon.js";import"./es/components/icon/icons/ArrowUpIcon.js";import"./es/components/icon/icons/CalendarIcon.js";import"./es/components/icon/icons/CheckIcon.js";import"./es/components/icon/icons/ChevronDownIcon.js";import"./es/components/icon/icons/ChevronLeftIcon.js";import"./es/components/icon/icons/ChevronRightIcon.js";import"./es/components/icon/icons/ChevronUpIcon.js";import"./es/components/icon/icons/CloseIcon.js";import"./es/components/icon/icons/CopyIcon.js";import"./es/components/icon/icons/DotsIcon.js";import"./es/components/icon/icons/DragIcon.js";import"./es/components/icon/icons/ErrorIcon.js";import"./es/components/icon/icons/GreenCheckIcon.js";import"./es/components/icon/icons/HamburgerIcon.js";import"./es/components/icon/icons/InfoIcon.js";import"./es/components/icon/icons/LinkIcon.js";import"./es/components/icon/icons/PlusIcon.js";import"./es/components/icon/icons/QuestionIcon.js";import"./es/components/icon/icons/RedCrossIcon.js";import"./es/components/icon/icons/SearchIcon.js";import"./es/components/icon/icons/SuccessIcon.js";import"./es/components/icon/icons/WarningIcon.js";import"./es/components/icon/icons/MinusIcon.js";import"./es/components/icon/icons/ThumbDownIcon.js";import"./es/components/icon/icons/ThumbUpIcon.js";import"./es/components/icon/icons/TrashCanIcon.js";import"./es/components/icon/icons/PenIcon.js";import"./es/components/button/Button.js";import"./es/components/card/Card.js";import"./es/components/card/CardImage.js";import"./es/components/card/NavCard.js";import"./es/components/checkbox/Checkbox.js";import"./es/components/combobox/Combobox.js";import"./es/components/cookie-consent/CookieConsentContext.js";import"react-dom";import"./es/components/modal/Modal.js";import"react-a11y-dialog";import"./es/components/list/List.js";import"./es/components/list/ListItem.js";import"./es/components/icon-button/IconButton.js";import"./es/components/tooltip/Tooltip.js";import"./es/components/tooltip/TooltipContent.js";import"./es/components/tooltip/TooltipTrigger.js";import{InputGroup as m}from"./es/components/input-group/InputGroup.js";import"./es/components/link/Link.js";import"./es/components/link/NavLink.js";import"./es/components/link-list/LinkList.js";import"./es/components/radio-button/RadioButton.js";import"./es/components/radio-button/radioGroupContext.js";import"./es/components/radio-button/BaseRadioButton.js";import{useAnimatedHeight as d}from"./es/hooks/useAnimatedHeight/useAnimatedHeight.js";import{usePreviousValue as j}from"./es/hooks/usePreviousValue/usePreviousValue.js";import{useListNavigation as v}from"./es/hooks/useListNavigation/useListNavigation.js";import"./es/components/tag/Tag.js";import"./es/utilities/polymorphism/SlotComponent.js";import{getValuePair as b}from"./es/utilities/valuePair.js";import{focusSelected as f,toLower as h}from"./es/components/select/select-utils.js";const k=()=>{},g=s(((s,g)=>{const{id:w,name:y,items:I,value:_,label:C,labelProps:L,onChange:N,onBlur:P,onFocus:D,className:x,helpLabel:A,errorLabel:E,invalid:T,searchable:S=!1,inline:$=!1,defaultPrompt:V="Velg",density:B,width:R,maxShownOptions:F=5,style:H,...K}=s,M=p(w||"jkl-select",{generateSuffix:!w}),G=`${M}_label`,U=`${M}_button`,O=`${M}_search-input`,[q,z]=i(!1),Q=r((()=>{z((e=>!e))}),[]),W=!!S,J=W&&q,[X,Y]=i(""),Z=r((e=>!!e.label.toLowerCase().includes(X.toLowerCase())||"function"==typeof S&&S(X,e)),[S,X]),ee=c((()=>I.map(b).map((e=>{const o=!W||""===X||Z(e);return{...e,visible:o}}))),[I,W,X,Z]),oe=c((()=>!(typeof _>"u")&&I.some((e=>"string"==typeof e?e===_:e.value===_))),[_,I]),[ne,te]=i(oe&&void 0!==_?_:""),se=""!==ne,ie=c((()=>{var e;return(null==(e=ee.find((e=>e.value===ne)))?void 0:e.label)||V}),[ee,ne,V]),re=a(null),ce=r((e=>{re.current=e,g&&("function"==typeof g?g(e):g.current=e),e&&te(e.value)}),[re,g]),ae=j(_);l((()=>{_!==ae&&te(typeof _>"u"||!oe?"":_)}),[te,_,ae,oe]);const le=r((e=>{const o=e.value;Y(""),te(o),Q()}),[Y,te,Q]),pe=j(ne);l((()=>{typeof pe>"u"||pe===ne||ne===_||(N&&N({type:"change",target:{name:y,value:ne}}),re.current&&re.current.dispatchEvent(new Event("change",{bubbles:!0})))}),[N,y,_,ne,pe]);const ue=a(null),me=a(!1),de=a(null),je=a(null),ve=r(((e,o)=>{if(e&&!W){const e=o.current;e&&f(e,ne)}else e?de.current&&de.current.focus():me.current&&je.current&&je.current.focus()}),[W,ne]),[be]=d(q,{onFirstVisible:ve,onTransitionEnd:ve});v({ref:be});const fe=r((e=>{var o;const n=ue.current;n&&n.contains(e.relatedTarget)||(W&&Y(""),P&&(P({type:"blur",target:{name:y,value:ne}}),null==(o=re.current)||o.dispatchEvent(new Event("focusout",{bubbles:!0}))),me.current=!1,z(!1))}),[P,W,y,ne]),he=r((()=>{me.current||(D&&D({type:"change",target:{name:y,value:ne}}),me.current=!0)}),[D,ne,y]),ke=r((e=>{e.target.focus({preventScroll:!0})}),[]);l((()=>{const e=re.current,o=de.current,n=je.current,t=ue.current;return null==e||e.addEventListener("focus",(()=>{J?null==o||o.focus():null==n||n.focus()})),null==e||e.addEventListener("blur",(function(e){t&&t.contains(e.relatedTarget)&&e.preventDefault()})),()=>{null==e||e.removeEventListener("focus",(()=>{J?null==o||o.focus():null==n||n.focus()})),null==e||e.removeEventListener("blur",(function(e){t&&t.contains(e.relatedTarget)&&e.preventDefault()}))}}),[J]);const ge=r((e=>{"ArrowDown"!==e.key&&" "!==e.key||q?"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),z(!1)):(e.preventDefault(),e.stopPropagation(),z(!0))}),[z,q]),we=r((e=>{if("ArrowDown"===e.key){e.preventDefault(),e.stopPropagation();const o=be.current;o&&f(o,W?void 0:ne)}else if("Escape"===e.key)e.preventDefault(),e.stopPropagation(),z(!1);else if("Tab"!==e.key||e.shiftKey)"Enter"===e.key&&q&&(e.preventDefault(),e.stopPropagation());else{const o=be.current;o&&(e.preventDefault(),e.stopPropagation(),f(o,ne))}}),[z,be,ne,W,q]),ye=r((e=>{if("Tab"===e.key)e.preventDefault(),e.stopPropagation(),e.shiftKey&&de.current?de.current.focus():je.current&&(te(e.currentTarget.value),z(!1),je.current.focus());else if("ArrowUp"===e.key&&be.current&&de.current){const o=be.current.querySelector('[role="option"]:not([hidden])');e.currentTarget.id===(null==o?void 0:o.id)&&de.current&&de.current.focus()}}),[z,be]);return l((()=>{const e=e=>{"Escape"===e.key&&q&&z(!1)};return typeof window<"u"&&q&&window.addEventListener("keydown",e),()=>{typeof window<"u"&&window.removeEventListener("keydown",e)}}),[z,q]),e(o,{children:[e("select",{name:y,tabIndex:-1,"data-testid":"jkl-native-select",className:"jkl-sr-only","aria-hidden":!0,ref:ce,value:ne,onChange:k,children:[n("option",{value:""})," ",ee.map((e=>n("option",{hidden:!e.visible,value:e.value,children:e.label},`${M}-opt-${e.value}`)))]}),n(m,{ref:ue,"data-testid":"jkl-select",className:t("jkl-select",x,{"jkl-select--inline":$,"jkl-select--open":q&&ee.some((e=>e.visible)),"jkl-select--no-value":!se,"jkl-select--invalid":!!E||T}),...K,id:W?O:U,style:{"--jkl-select-max-shown-options":F,...H},density:B,label:C,labelProps:{id:G,srOnly:$,...L,htmlFor:W?O:U},helpLabel:A,errorLabel:E,render:o=>e("div",{className:"jkl-select__outer-wrapper",style:{width:R},children:[W&&n("input",{...o,id:O,hidden:!J,ref:de,placeholder:"Søk",value:X,onChange:e=>Y(e.target.value),"data-testid":"jkl-select__search-input",className:"jkl-select__search-input","aria-autocomplete":"list","aria-activedescendant":se?`${M}__${h(ne)}`:void 0,"aria-controls":M,"aria-expanded":q,role:"combobox",onKeyDown:we,onBlur:fe,onFocus:he,onClick:e=>{e.stopPropagation()}}),n("button",{...o,id:U,ref:je,hidden:J,type:"button",name:`${y}-btn`,className:t("jkl-select__button",{"jkl-select__button--active-value":!!ne}),"data-testid":"jkl-select__button","aria-label":`${ie||"Velg"},${C}`,"aria-expanded":q,"aria-controls":M,onBlur:fe,onFocus:he,onKeyDown:ge,onClick:Q,onMouseDown:e=>{var o;e.preventDefault(),null==(o=je.current)||o.focus()},children:ie}),n("div",{id:M,ref:be,role:"listbox",className:"jkl-select__options-menu",hidden:!q||ee.every((e=>!e.visible)),"aria-labelledby":G,tabIndex:-1,"data-focus":"controlled",children:ee.map(((o,t)=>o.visible?e("button",{hidden:!o.visible,type:"button",id:`${M}__${h(o.value)}`,className:"jkl-select__option","data-testid":"jkl-select__option","aria-selected":o.value===ne,role:"option",value:o.value,"data-testautoid":`jkl-select__option-${t}`,onBlur:fe,onFocus:he,onKeyDown:ye,onClick:e=>{e.preventDefault(),le(o)},onMouseOver:ke,children:[o.label,o.description?n("span",{className:"jkl-select__option-description",children:o.description}):null]},`${M}-${o.value}`):null))}),n(u,{variant:"medium",pointingDown:!q,className:"jkl-select__arrow"})]})})]})}));g.displayName="Select";const w=s(((o,s)=>{const{label:i,className:r,density:c,errorLabel:a,helpLabel:l,inline:p,invalid:d,items:j,labelProps:v,placeholder:f="Velg",selectClassName:h,supportLabelProps:k,tooltipProps:g,value:w,width:y,...I}=o;return n(m,{label:i,density:c,errorLabel:a,helpLabel:l,labelProps:v,inline:p,supportLabelProps:k,tooltipProps:g,"data-testid":"jkl-select",className:t("jkl-select",r,{"jkl-select--inline":p,"jkl-select--invalid":!!a||d}),render:o=>e("div",{className:"jkl-select__outer-wrapper",style:{width:y},children:[e("select",{ref:s,className:t("jkl-select__button",h,{"jkl-select__button--active-value":!!w}),defaultValue:w?void 0:"",value:w,...o,...I,children:[f&&!w&&n("option",{disabled:!0,value:"",children:f}),j.map(b).map((e=>n("option",{"data-testid":"jkl-select__option",className:"jkl-select__option",value:e.value,children:e.label},e.value)))]}),n(u,{variant:"medium",pointingDown:!0,className:"jkl-select__arrow"})]})})}));w.displayName="NativeSelect";export{w as N,g as S};
-//# sourceMappingURL=NativeSelect-DOSP8-ZQ.js.map

package/build/NativeSelect-gBndJVSb.cjs

@@ -1,2 +0,0 @@
-"use strict";const e=require("react/jsx-runtime"),o=require("./clsx-E3yX_9sL.cjs"),n=require("react");require("./cjs/hooks/useScreen/useScreen.js");const s=require("./cjs/hooks/useId/useId.js");require("./cjs/components/icon/Icon.js");const t=require("./cjs/components/icon/icons/animated/ArrowVerticalAnimated.js");require("./cjs/components/icon/icons/animated/ArrowHorizontalAnimated.js"),require("./cjs/components/icon/icons/animated/PlusRemoveAnimated.js"),require("./cjs/components/icon/icons/ArrowDownIcon.js"),require("./cjs/components/icon/icons/ArrowLeftIcon.js"),require("./cjs/components/icon/icons/ArrowNorthEastIcon.js"),require("./cjs/components/icon/icons/ArrowRightIcon.js"),require("./cjs/components/icon/icons/ArrowUpIcon.js"),require("./cjs/components/icon/icons/CalendarIcon.js"),require("./cjs/components/icon/icons/CheckIcon.js"),require("./cjs/components/icon/icons/ChevronDownIcon.js"),require("./cjs/components/icon/icons/ChevronLeftIcon.js"),require("./cjs/components/icon/icons/ChevronRightIcon.js"),require("./cjs/components/icon/icons/ChevronUpIcon.js"),require("./cjs/components/icon/icons/CloseIcon.js"),require("./cjs/components/icon/icons/CopyIcon.js"),require("./cjs/components/icon/icons/DotsIcon.js"),require("./cjs/components/icon/icons/DragIcon.js"),require("./cjs/components/icon/icons/ErrorIcon.js"),require("./cjs/components/icon/icons/GreenCheckIcon.js"),require("./cjs/components/icon/icons/HamburgerIcon.js"),require("./cjs/components/icon/icons/InfoIcon.js"),require("./cjs/components/icon/icons/LinkIcon.js"),require("./cjs/components/icon/icons/PlusIcon.js"),require("./cjs/components/icon/icons/QuestionIcon.js"),require("./cjs/components/icon/icons/RedCrossIcon.js"),require("./cjs/components/icon/icons/SearchIcon.js"),require("./cjs/components/icon/icons/SuccessIcon.js"),require("./cjs/components/icon/icons/WarningIcon.js"),require("./cjs/components/icon/icons/MinusIcon.js"),require("./cjs/components/icon/icons/ThumbDownIcon.js"),require("./cjs/components/icon/icons/ThumbUpIcon.js"),require("./cjs/components/icon/icons/TrashCanIcon.js"),require("./cjs/components/icon/icons/PenIcon.js"),require("./cjs/components/button/Button.js"),require("./cjs/components/card/Card.js"),require("./cjs/components/card/CardImage.js"),require("./cjs/components/card/NavCard.js"),require("./cjs/components/checkbox/Checkbox.js"),require("./cjs/components/combobox/Combobox.js"),require("./cjs/components/cookie-consent/CookieConsentContext.js"),require("react-dom"),require("./cjs/components/modal/Modal.js"),require("react-a11y-dialog"),require("./cjs/components/list/List.js"),require("./cjs/components/list/ListItem.js"),require("./cjs/components/icon-button/IconButton.js"),require("./cjs/components/tooltip/Tooltip.js"),require("./cjs/components/tooltip/TooltipContent.js"),require("./cjs/components/tooltip/TooltipTrigger.js");const c=require("./cjs/components/input-group/InputGroup.js");require("./cjs/components/link/Link.js"),require("./cjs/components/link/NavLink.js"),require("./cjs/components/link-list/LinkList.js"),require("./cjs/components/radio-button/RadioButton.js"),require("./cjs/components/radio-button/radioGroupContext.js"),require("./cjs/components/radio-button/BaseRadioButton.js");const r=require("./cjs/hooks/useAnimatedHeight/useAnimatedHeight.js"),i=require("./cjs/hooks/usePreviousValue/usePreviousValue.js"),l=require("./cjs/hooks/useListNavigation/useListNavigation.js");require("./cjs/components/tag/Tag.js"),require("./cjs/utilities/polymorphism/SlotComponent.js");const a=require("./cjs/utilities/valuePair.js"),u=require("./cjs/components/select/select-utils.js"),p=()=>{},j=n.forwardRef(((j,d)=>{const{id:m,name:v,items:b,value:f,label:k,labelProps:q,onChange:h,onBlur:g,onFocus:w,className:y,helpLabel:I,errorLabel:_,invalid:C,searchable:x=!1,inline:L=!1,defaultPrompt:N="Velg",density:P,width:D,maxShownOptions:E=5,style:S,...A}=j,T=s.useId(m||"jkl-select",{generateSuffix:!m}),$=`${T}_label`,V=`${T}_button`,R=`${T}_search-input`,[B,F]=n.useState(!1),M=n.useCallback((()=>{F((e=>!e))}),[]),G=!!x,H=G&&B,[K,U]=n.useState(""),O=n.useCallback((e=>!!e.label.toLowerCase().includes(K.toLowerCase())||"function"==typeof x&&x(K,e)),[x,K]),z=n.useMemo((()=>b.map(a.getValuePair).map((e=>{const o=!G||""===K||O(e);return{...e,visible:o}}))),[b,G,K,O]),Q=n.useMemo((()=>!(typeof f>"u")&&b.some((e=>"string"==typeof e?e===f:e.value===f))),[f,b]),[W,J]=n.useState(Q&&void 0!==f?f:""),X=""!==W,Y=n.useMemo((()=>{var e;return(null==(e=z.find((e=>e.value===W)))?void 0:e.label)||N}),[z,W,N]),Z=n.useRef(null),ee=n.useCallback((e=>{Z.current=e,d&&("function"==typeof d?d(e):d.current=e),e&&J(e.value)}),[Z,d]),oe=i.usePreviousValue(f);n.useEffect((()=>{f!==oe&&J(typeof f>"u"||!Q?"":f)}),[J,f,oe,Q]);const ne=n.useCallback((e=>{const o=e.value;U(""),J(o),M()}),[U,J,M]),se=i.usePreviousValue(W);n.useEffect((()=>{typeof se>"u"||se===W||W===f||(h&&h({type:"change",target:{name:v,value:W}}),Z.current&&Z.current.dispatchEvent(new Event("change",{bubbles:!0})))}),[h,v,f,W,se]);const te=n.useRef(null),ce=n.useRef(!1),re=n.useRef(null),ie=n.useRef(null),le=n.useCallback(((e,o)=>{if(e&&!G){const e=o.current;e&&u.focusSelected(e,W)}else e?re.current&&re.current.focus():ce.current&&ie.current&&ie.current.focus()}),[G,W]),[ae]=r.useAnimatedHeight(B,{onFirstVisible:le,onTransitionEnd:le});l.useListNavigation({ref:ae});const ue=n.useCallback((e=>{var o;const n=te.current;n&&n.contains(e.relatedTarget)||(G&&U(""),g&&(g({type:"blur",target:{name:v,value:W}}),null==(o=Z.current)||o.dispatchEvent(new Event("focusout",{bubbles:!0}))),ce.current=!1,F(!1))}),[g,G,v,W]),pe=n.useCallback((()=>{ce.current||(w&&w({type:"change",target:{name:v,value:W}}),ce.current=!0)}),[w,W,v]),je=n.useCallback((e=>{e.target.focus({preventScroll:!0})}),[]);n.useEffect((()=>{const e=Z.current,o=re.current,n=ie.current,s=te.current;return null==e||e.addEventListener("focus",(()=>{H?null==o||o.focus():null==n||n.focus()})),null==e||e.addEventListener("blur",(function(e){s&&s.contains(e.relatedTarget)&&e.preventDefault()})),()=>{null==e||e.removeEventListener("focus",(()=>{H?null==o||o.focus():null==n||n.focus()})),null==e||e.removeEventListener("blur",(function(e){s&&s.contains(e.relatedTarget)&&e.preventDefault()}))}}),[H]);const de=n.useCallback((e=>{"ArrowDown"!==e.key&&" "!==e.key||B?"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),F(!1)):(e.preventDefault(),e.stopPropagation(),F(!0))}),[F,B]),me=n.useCallback((e=>{if("ArrowDown"===e.key){e.preventDefault(),e.stopPropagation();const o=ae.current;o&&(G?u.focusSelected(o,void 0):u.focusSelected(o,W))}else if("Escape"===e.key)e.preventDefault(),e.stopPropagation(),F(!1);else if("Tab"!==e.key||e.shiftKey)"Enter"===e.key&&B&&(e.preventDefault(),e.stopPropagation());else{const o=ae.current;o&&(e.preventDefault(),e.stopPropagation(),u.focusSelected(o,W))}}),[F,ae,W,G,B]),ve=n.useCallback((e=>{if("Tab"===e.key)e.preventDefault(),e.stopPropagation(),e.shiftKey&&re.current?re.current.focus():ie.current&&(J(e.currentTarget.value),F(!1),ie.current.focus());else if("ArrowUp"===e.key&&ae.current&&re.current){const o=ae.current.querySelector('[role="option"]:not([hidden])');e.currentTarget.id===(null==o?void 0:o.id)&&re.current&&re.current.focus()}}),[F,ae]);return n.useEffect((()=>{const e=e=>{"Escape"===e.key&&B&&F(!1)};return typeof window<"u"&&B&&window.addEventListener("keydown",e),()=>{typeof window<"u"&&window.removeEventListener("keydown",e)}}),[F,B]),e.jsxs(e.Fragment,{children:[e.jsxs("select",{name:v,tabIndex:-1,"data-testid":"jkl-native-select",className:"jkl-sr-only","aria-hidden":!0,ref:ee,value:W,onChange:p,children:[e.jsx("option",{value:""})," ",z.map((o=>e.jsx("option",{hidden:!o.visible,value:o.value,children:o.label},`${T}-opt-${o.value}`)))]}),e.jsx(c.InputGroup,{ref:te,"data-testid":"jkl-select",className:o.clsx("jkl-select",y,{"jkl-select--inline":L,"jkl-select--open":B&&z.some((e=>e.visible)),"jkl-select--no-value":!X,"jkl-select--invalid":!!_||C}),...A,id:G?R:V,style:{"--jkl-select-max-shown-options":E,...S},density:P,label:k,labelProps:{id:$,srOnly:L,...q,htmlFor:G?R:V},helpLabel:I,errorLabel:_,render:n=>e.jsxs("div",{className:"jkl-select__outer-wrapper",style:{width:D},children:[G&&e.jsx("input",{...n,id:R,hidden:!H,ref:re,placeholder:"Søk",value:K,onChange:e=>U(e.target.value),"data-testid":"jkl-select__search-input",className:"jkl-select__search-input","aria-autocomplete":"list","aria-activedescendant":X?`${T}__${u.toLower(W)}`:void 0,"aria-controls":T,"aria-expanded":B,role:"combobox",onKeyDown:me,onBlur:ue,onFocus:pe,onClick:e=>{e.stopPropagation()}}),e.jsx("button",{...n,id:V,ref:ie,hidden:H,type:"button",name:`${v}-btn`,className:o.clsx("jkl-select__button",{"jkl-select__button--active-value":!!W}),"data-testid":"jkl-select__button","aria-label":`${Y||"Velg"},${k}`,"aria-expanded":B,"aria-controls":T,onBlur:ue,onFocus:pe,onKeyDown:de,onClick:M,onMouseDown:e=>{var o;e.preventDefault(),null==(o=ie.current)||o.focus()},children:Y}),e.jsx("div",{id:T,ref:ae,role:"listbox",className:"jkl-select__options-menu",hidden:!B||z.every((e=>!e.visible)),"aria-labelledby":$,tabIndex:-1,"data-focus":"controlled",children:z.map(((o,n)=>o.visible?e.jsxs("button",{hidden:!o.visible,type:"button",id:`${T}__${u.toLower(o.value)}`,className:"jkl-select__option","data-testid":"jkl-select__option","aria-selected":o.value===W,role:"option",value:o.value,"data-testautoid":`jkl-select__option-${n}`,onBlur:ue,onFocus:pe,onKeyDown:ve,onClick:e=>{e.preventDefault(),ne(o)},onMouseOver:je,children:[o.label,o.description?e.jsx("span",{className:"jkl-select__option-description",children:o.description}):null]},`${T}-${o.value}`):null))}),e.jsx(t.ArrowVerticalAnimated,{variant:"medium",pointingDown:!B,className:"jkl-select__arrow"})]})})]})}));j.displayName="Select";const d=n.forwardRef(((n,s)=>{const{label:r,className:i,density:l,errorLabel:u,helpLabel:p,inline:j,invalid:d,items:m,labelProps:v,placeholder:b="Velg",selectClassName:f,supportLabelProps:k,tooltipProps:q,value:h,width:g,...w}=n,y={label:r,density:l,errorLabel:u,helpLabel:p,labelProps:v,inline:j,supportLabelProps:k,tooltipProps:q};return e.jsx(c.InputGroup,{...y,"data-testid":"jkl-select",className:o.clsx("jkl-select",i,{"jkl-select--inline":j,"jkl-select--invalid":!!u||d}),render:n=>e.jsxs("div",{className:"jkl-select__outer-wrapper",style:{width:g},children:[e.jsxs("select",{ref:s,className:o.clsx("jkl-select__button",f,{"jkl-select__button--active-value":!!h}),defaultValue:h?void 0:"",value:h,...n,...w,children:[b&&!h&&e.jsx("option",{disabled:!0,value:"",children:b}),m.map(a.getValuePair).map((o=>e.jsx("option",{"data-testid":"jkl-select__option",className:"jkl-select__option",value:o.value,children:o.label},o.value)))]}),e.jsx(t.ArrowVerticalAnimated,{variant:"medium",pointingDown:!0,className:"jkl-select__arrow"})]})})}));d.displayName="NativeSelect",exports.NativeSelect=d,exports.Select=j;
-//# sourceMappingURL=NativeSelect-gBndJVSb.cjs.map