@oslokommune/punkt-react 17.0.10 → 17.1.1

package/dist/shared-types/booleanish.d.ts

@@ -11,3 +11,14 @@ export declare const booleanishConverter: {
     fromAttribute(value: string | boolean | null): boolean;
     toAttribute(value: boolean): string | null;
 };
+/**
+ * Som booleanishConverter, men skiller «ikke satt» fra `false`.
+ *
+ * Brukes for props der komponenten skal utlede en fornuftig standard når
+ * forbrukeren ikke har sagt noe — for eksempel `counter`, som slås på av seg
+ * selv når det finnes noe å telle, men skal kunne skrus av eksplisitt.
+ */
+export declare const nullableBooleanishConverter: {
+    fromAttribute(value: string | boolean | null): boolean | null;
+    toAttribute(value: boolean | null): string | null;
+};

package/dist/shared-types/index.d.ts

@@ -1,5 +1,5 @@
 export type { Booleanish } from './booleanish';
-export { booleanishConverter } from './booleanish';
+export { booleanishConverter, nullableBooleanishConverter } from './booleanish';
 export type { TAriaBoolean, TAriaBooleanMixed, TAriaCurrent, TAriaHasPopup, TAriaInvalid, TAriaLive, TAriaRelevant, TAriaSort, TAriaAutoComplete, TAriaOrientation, IAriaAttributes, TAlertRole, } from './aria';
 export type { THeadingLevel, THeadingSize, THeadingWeight } from './heading';
 export type { User, Representing, UserMenuItem, InternalMenuItemBase, InternalMenuLink, InternalMenuButton, TInternalMenuItem, TSlotMenuVariant, THeaderMenu, TLogOutButtonPlacement, THeaderPosition, THeaderScrollBehavior, } from './header';

package/dist/shared-utils/forms/described-by.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Bygger `aria-describedby` for et skjemafelt.
+ *
+ * Beskrivelsen må ligge på selve kontrollen — `aria-describedby` på en `<label>`
+ * bidrar ikke til feltets tilgjengelige beskrivelse, og hjelpeteksten blir da
+ * aldri lest opp når fokus havner i feltet.
+ *
+ * Feilmeldingen er med vilje ikke med: den kobles gjennom `aria-errormessage`,
+ * som er den riktige kanalen, og ville ellers blitt lest opp to ganger.
+ */
+export declare const describedByIds: (options: {
+    /** Id-en feltet bruker (samme som wrapperens forId). */
+    id: string;
+    /** Om det finnes en hjelpetekst å beskrive feltet med. */
+    hasHelptext?: boolean;
+    /** Om telleren er aktiv. Statusregionen leses bare opp når grensa er brutt. */
+    hasCounter?: boolean;
+    /** Forbrukerens egen `ariaDescribedby`, hvis satt. */
+    ariaDescribedby?: string | null;
+}) => string | undefined;
+/** Id-en til den skjulte statusregionen som melder at tellergrensa er brutt. */
+export declare const counterStatusId: (id: string) => string;
+/** Om tellergrensa er brutt. */
+export declare const isCounterExceeded: (current: number | undefined, max: number | undefined) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "17.0.10",
+  "version": "17.1.1",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -45,7 +45,7 @@
     "@eslint/eslintrc": "^3.3.5",
     "@eslint/js": "^10.0.1",
     "@oslokommune/punkt-assets": "^17.0.3",
-    "@oslokommune/punkt-css": "^17.0.10",
+    "@oslokommune/punkt-css": "^17.1.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
@@ -101,5 +101,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "d7aa97ec38415ce31bd73314e4669ca2ba04a8cf"
+  "gitHead": "0e600db899cfda4ac87979c94724908424ba56c8"
 }

package/src/components/combobox/Combobox.tsx

@@ -28,7 +28,7 @@ export const PktCombobox = forwardRef<HTMLDivElement, IPktCombobox>((props, ref)
     <div className={outerClasses} ref={state.wrapperRef} id={state.id || undefined}>
       <PktInputWrapper
         forId={wrapperForId}
-        hasFieldset={!hasTextInput}
+        hasFieldset={props.hasFieldset ?? !hasTextInput}
         label={state.label || ''}
         helptext={state.helptext}
         helptextDropdown={state.helptextDropdown}
@@ -42,6 +42,7 @@ export const PktCombobox = forwardRef<HTMLDivElement, IPktCombobox>((props, ref)
         requiredText={state.requiredText}
         tagText={state.tagText}
         useWrapper={state.useWrapper}
+        inline={state.inline}
         size={props.inputSize ?? 'medium'}
         counter={state.hasCounter}
         counterCurrent={state.values.length}

package/src/components/combobox/types.ts

@@ -50,6 +50,9 @@ export interface IPktCombobox {
   optionalText?: string
   tagText?: string
   useWrapper?: boolean
+  inline?: boolean
+  counter?: boolean
+  hasFieldset?: boolean
   inputSize?: 'small' | 'medium' | 'xsmall'
 
   // Events
@@ -110,6 +113,7 @@ export interface IComboboxState {
   requiredText?: string
   tagText?: string
   useWrapper: boolean
+  inline: boolean
   inputSize: 'small' | 'medium' | 'xsmall'
   name?: string
   className?: string

package/src/components/combobox/useComboboxState.ts

@@ -72,6 +72,8 @@ export function useComboboxState(props: IPktCombobox, ref: React.ForwardedRef<HT
     requiredText,
     tagText,
     useWrapper = true,
+    inline = false,
+    counter,
     inputSize = 'medium',
     name,
     className,
@@ -184,7 +186,8 @@ export function useComboboxState(props: IPktCombobox, ref: React.ForwardedRef<HT
 
   // Derived state
   const maxIsReached = isMaxSelectionReached(values.length, maxlength ?? null)
-  const hasCounter = multiple && maxlength != null
+  // Telleren vises av seg selv når det er noe å telle, men kan slås av eksplisitt
+  const hasCounter = counter ?? (multiple && maxlength != null)
 
   // Filter options by search (typeahead uses fulltext filtering, includeSearch uses same)
   const filteredOptions = useMemo(() => {
@@ -1105,6 +1108,7 @@ export function useComboboxState(props: IPktCombobox, ref: React.ForwardedRef<HT
     requiredText,
     tagText,
     useWrapper,
+    inline,
     inputSize,
     name,
     className,

package/src/components/datepicker/Datepicker.tsx

@@ -12,7 +12,12 @@ export type { IPktDatepicker } from './types'
 export const PktDatepicker = forwardRef<HTMLDivElement, IPktDatepicker>((props, ref) => {
   const state = useDatepickerState(props, ref)
 
-  const outerClasses = ['pkt-datepicker', `pkt-datepicker--${state.inputSize}`, state.className]
+  const outerClasses = [
+    'pkt-datepicker',
+    `pkt-datepicker--${state.inputSize}`,
+    state.fullwidth ? 'pkt-datepicker--fullwidth' : '',
+    state.className,
+  ]
     .filter(Boolean)
     .join(' ')
 
@@ -20,6 +25,7 @@ export const PktDatepicker = forwardRef<HTMLDivElement, IPktDatepicker>((props,
     <div className={outerClasses} id={state.id || undefined}>
       <PktInputWrapper
         ref={state.wrapperRef}
+        ariaDescribedby={props.ariaDescribedby}
         forId={state.inputId}
         label={state.label}
         hasFieldset={state.hasFieldset}

package/src/components/datepicker/types.ts

@@ -5,6 +5,7 @@ import type { TPktInputSize } from 'shared-types/size'
 export interface IPktDatepicker extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
   id: string
   label: string
+  ariaDescribedby?: string
 
   // Datepicker-specific
   value?: string | string[]
@@ -27,6 +28,7 @@ export interface IPktDatepicker extends Omit<InputHTMLAttributes<HTMLInputElemen
   inputSize?: TPktInputSize
   hasFieldset?: boolean
   inline?: boolean
+  counter?: boolean
   helptext?: string | ReactNode
   helptextDropdown?: string | ReactNode
   helptextDropdownButton?: string

package/src/components/datepicker/useDatepickerState.ts

@@ -38,6 +38,7 @@ export function useDatepickerState(props: IPktDatepicker, ref: React.ForwardedRe
     fullwidth = false,
     inputSize = 'medium' as TPktInputSize,
     hasFieldset = false,
+    counter,
     inline = false,
     helptext,
     helptextDropdown,
@@ -152,7 +153,8 @@ export function useDatepickerState(props: IPktDatepicker, ref: React.ForwardedRe
   }, [currentmonth, maxStr])
 
   const isInputDisabled = disabled || (multiple && maxlength != null && values.length >= maxlength)
-  const hasCounter = multiple && maxlength != null
+  // Telleren vises av seg selv når det er noe å telle, men kan slås av eksplisitt
+  const hasCounter = counter ?? (multiple && maxlength != null)
   const inputId = `${id}-input`
   const formValue = values.join(',')
 

package/src/components/fileupload/FileUpload.tsx

@@ -421,27 +421,29 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
 
     if (label) {
       return (
-        <PktInputWrapper
-          forId={id}
-          label={label}
-          helptext={helptext}
-          helptextDropdown={helptextDropdown}
-          helptextDropdownButton={helptextDropdownButton}
-          disabled={disabled}
-          hasError={hasError}
-          optionalTag={optionalTag}
-          optionalText={optionalText}
-          requiredTag={requiredTag}
-          requiredText={requiredText}
-          tagText={tagText}
-          className={classNames('pkt-fileupload-wrapper', { 'pkt-fileupload-wrapper--full-width': fullwidth })}
-        >
-          {fileUploadContent}
-        </PktInputWrapper>
+        <div className="pkt-fileupload-component">
+          <PktInputWrapper
+            forId={id}
+            label={label}
+            helptext={helptext}
+            helptextDropdown={helptextDropdown}
+            helptextDropdownButton={helptextDropdownButton}
+            disabled={disabled}
+            hasError={hasError}
+            optionalTag={optionalTag}
+            optionalText={optionalText}
+            requiredTag={requiredTag}
+            requiredText={requiredText}
+            tagText={tagText}
+            className={classNames('pkt-fileupload-wrapper', { 'pkt-fileupload-wrapper--full-width': fullwidth })}
+          >
+            {fileUploadContent}
+          </PktInputWrapper>
+        </div>
       )
     }
 
-    return fileUploadContent
+    return <div className="pkt-fileupload-component">{fileUploadContent}</div>
   },
 )
 

package/src/components/helptext/Helptext.tsx

@@ -63,6 +63,8 @@ export const PktHelptext = forwardRef<HTMLDivElement, IPktHelptextProps>(functio
           <button
             type="button"
             className="pkt-link pkt-link--icon-right pkt-btn pkt-btn--small pkt-btn--tertiary pkt-btn--icon-right"
+            aria-expanded={isOpen}
+            aria-controls={`${forId}-helptext-expandable`}
             onClick={toggle}
           >
             <PktIcon
@@ -77,6 +79,7 @@ export const PktHelptext = forwardRef<HTMLDivElement, IPktHelptextProps>(functio
             />
           </button>
           <div
+            id={`${forId}-helptext-expandable`}
             className={classNames(
               'pkt-inputwrapper__helptext',
               isOpen

package/src/components/inputwrapper/InputWrapper.tsx

@@ -3,6 +3,7 @@
 import { ForwardedRef, forwardRef, type ReactNode, RefAttributes } from 'react'
 
 import { useFocusModality } from '../../hooks/useFocusModality'
+import { counterStatusId, isCounterExceeded } from 'shared-utils/forms/described-by'
 import { PktAlert } from '../alert/Alert'
 import { PktHelptext } from '../helptext/Helptext'
 
@@ -59,7 +60,7 @@ export const PktInputWrapper = forwardRef(
       children,
       className = '',
       hasFieldset = false,
-      role = 'group',
+      role,
       counterPosition = 'bottom',
       size = 'medium',
     }: IPktInputWrapper,
@@ -85,12 +86,18 @@ export const PktInputWrapper = forwardRef(
 
     const tagClasses = ['pkt-tag', 'pkt-tag--small', 'pkt-tag--thin-text'].join(' ')
 
+    const counterExceeded = isCounterExceeded(counterCurrent, counterMaxLength)
     const Counter = () =>
       showCounter ? (
-        <div className="pkt-input__counter" aria-live="polite" aria-atomic="true">
-          {counterCurrent}
-          {counterMaxLength ? `/${counterMaxLength}` : ''}
-        </div>
+        <>
+          <div className="pkt-input__counter" aria-hidden="true">
+            {counterCurrent}
+            {counterMaxLength ? `/${counterMaxLength}` : ''}
+          </div>
+          <div className="pkt-sr-only" id={counterStatusId(forId)} aria-live="polite">
+            {counterExceeded ? `Du har brukt ${counterCurrent} av ${counterMaxLength} tegn` : ''}
+          </div>
+        </>
       ) : null
 
     const renderTags = () => {
@@ -111,7 +118,7 @@ export const PktInputWrapper = forwardRef(
 
       if (!useWrapper) {
         return (
-          <label htmlFor={forId} className="pkt-sr-only" aria-describedby={describedBy} id={`${forId}-label`}>
+          <label htmlFor={forId} className="pkt-sr-only" id={`${forId}-label`}>
             {label}
           </label>
         )
@@ -126,7 +133,7 @@ export const PktInputWrapper = forwardRef(
       }
 
       return (
-        <label className="pkt-inputwrapper__label" htmlFor={forId} aria-describedby={describedBy} id={`${forId}-label`}>
+        <label className="pkt-inputwrapper__label" htmlFor={forId} id={`${forId}-label`}>
           {labelContent}
         </label>
       )
@@ -166,7 +173,12 @@ export const PktInputWrapper = forwardRef(
     )
 
     return (
-      <div className={wrapperClasses} role={role} {...focusModality}>
+      <div
+        className={wrapperClasses}
+        role={role}
+        aria-labelledby={role ? `${forId}-label` : undefined}
+        {...focusModality}
+      >
         {hasFieldset ? (
           <fieldset className="pkt-inputwrapper__fieldset" aria-describedby={describedBy}>
             {content}

package/src/components/select/Select.tsx

@@ -3,6 +3,7 @@
 import { ForwardedRef, forwardRef, ReactNode, SelectHTMLAttributes } from 'react'
 
 import { PktInputWrapper } from '../inputwrapper/InputWrapper'
+import { describedByIds } from 'shared-utils/forms/described-by'
 
 export type { IPktSelectOption, TSelectOption } from 'shared-types/select'
 
@@ -26,6 +27,8 @@ export interface IPktSelectProps extends SelectHTMLAttributes<HTMLSelectElement>
   requiredTag?: boolean
   requiredText?: string
   tagText?: string | null
+  useWrapper?: boolean
+  hasFieldset?: boolean
   inputSize?: 'small' | 'medium' | 'xsmall'
   /** @deprecated Var aldri implementert — bruk children med `<option>`-elementer. */
   options?: never
@@ -54,47 +57,58 @@ export const PktSelect = forwardRef(
       requiredTag = false,
       requiredText,
       tagText,
+      useWrapper = true,
+      hasFieldset,
       inputSize = 'medium',
       ...props
     }: IPktSelectProps,
     ref: ForwardedRef<HTMLSelectElement>,
   ) => {
-    const classNames = [className, 'pkt-select'].join(' ')
+    const outerClasses = [className, 'pkt-select'].filter(Boolean).join(' ')
 
     return (
-      <PktInputWrapper
-        className={classNames}
-        forId={`${id}-input`}
-        label={label}
-        helptext={helptext}
-        helptextDropdown={helptextDropdown}
-        helptextDropdownButton={helptextDropdownButton}
-        optionalTag={optionalTag}
-        optionalText={optionalText}
-        requiredTag={requiredTag}
-        requiredText={requiredText}
-        tagText={tagText}
-        hasError={hasError}
-        errorMessage={errorMessage}
-        disabled={disabled}
-        inline={inline}
-        ariaDescribedby={ariaDescribedby}
-        size={inputSize}
-      >
-        <select
-          ref={ref}
-          className={`pkt-input pkt-input--${inputSize} ${fullwidth ? 'pkt-input--fullwidth' : ''}`}
-          aria-invalid={hasError}
-          aria-errormessage={`${id}-error`}
-          aria-labelledby={ariaLabelledby || undefined}
+      <div className={outerClasses}>
+        <PktInputWrapper
+          forId={`${id}-input`}
+          label={label}
+          helptext={helptext}
+          helptextDropdown={helptextDropdown}
+          helptextDropdownButton={helptextDropdownButton}
+          optionalTag={optionalTag}
+          optionalText={optionalText}
+          requiredTag={requiredTag}
+          requiredText={requiredText}
+          tagText={tagText}
+          hasError={hasError}
+          errorMessage={errorMessage}
           disabled={disabled}
-          id={`${id}-input`}
-          name={name || id}
-          {...props}
+          inline={inline}
+          ariaDescribedby={ariaDescribedby}
+          useWrapper={useWrapper}
+          hasFieldset={hasFieldset ?? false}
+          size={inputSize}
         >
-          {children}
-        </select>
-      </PktInputWrapper>
+          <select
+            ref={ref}
+            className={`pkt-input pkt-input--${inputSize} ${fullwidth ? 'pkt-input--fullwidth' : ''}`}
+            aria-invalid={hasError}
+            aria-errormessage={hasError ? `${id}-error` : undefined}
+            aria-describedby={describedByIds({
+              id: `${id}-input`,
+              hasHelptext: !!helptext,
+              hasCounter: false,
+              ariaDescribedby,
+            })}
+            aria-labelledby={ariaLabelledby || undefined}
+            disabled={disabled}
+            id={`${id}-input`}
+            name={name || id}
+            {...props}
+          >
+            {children}
+          </select>
+        </PktInputWrapper>
+      </div>
     )
   },
 )

package/src/components/textarea/Textarea.tsx

@@ -13,12 +13,14 @@ import {
 
 import { PktInputWrapper } from '../inputwrapper/InputWrapper'
 import { TPktInputSize } from 'shared-types/size'
+import { describedByIds } from 'shared-utils/forms/described-by'
 
 export interface IPktTextarea extends TextareaHTMLAttributes<HTMLTextAreaElement> {
   id: string
   ariaDescribedby?: string
   ariaLabelledby?: string
   counter?: boolean
+  hasFieldset?: boolean
   counterMaxLength?: number
   disabled?: boolean
   errorMessage?: string | ReactNode | ReactNode[]
@@ -56,6 +58,7 @@ export const PktTextarea = forwardRef(
       ariaDescribedby,
       ariaLabelledby,
       counter,
+      hasFieldset,
       counterMaxLength,
       className,
       disabled,
@@ -88,7 +91,8 @@ export const PktTextarea = forwardRef(
     }: IPktTextarea,
     ref: ForwardedRef<HTMLTextAreaElement>,
   ) => {
-    const classNames = [className, 'pkt-textinput', 'pkt-textarea'].join(' ')
+    const showCounter = counter ?? (counterMaxLength ?? 0) > 0
+    const outerClasses = [className, 'pkt-textinput', 'pkt-textarea'].filter(Boolean).join(' ')
 
     const inputId = `${id}-input` // id til input element og sendes inn til htmlFor/forId i InputWrapper
     const labelId = `${inputId}-label` // id til label elementet og sendes inn til aria-labelledby i input (genereres i InputWrapper)
@@ -97,7 +101,7 @@ export const PktTextarea = forwardRef(
     const [counterCurrent, setCounterCurrent] = useState(0)
 
     const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
-      if (counter) {
+      if (showCounter) {
         setCounterCurrent(e.currentTarget?.value?.length || 0)
       }
       if (onChange) {
@@ -119,52 +123,60 @@ export const PktTextarea = forwardRef(
     }, [value])
 
     return (
-      <PktInputWrapper
-        ariaDescribedby={ariaDescribedby}
-        className={classNames}
-        disabled={disabled}
-        errorMessage={errorMessage}
-        forId={inputId}
-        hasError={hasError}
-        helptext={helptext}
-        helptextDropdown={helptextDropdown}
-        helptextDropdownButton={helptextDropdownButton}
-        inline={inline}
-        label={label}
-        optionalTag={optionalTag}
-        optionalText={optionalText}
-        requiredTag={requiredTag}
-        requiredText={requiredText}
-        tagText={tagText}
-        useWrapper={useWrapper}
-        counter={counter}
-        counterCurrent={counterCurrent}
-        counterMaxLength={counterMaxLength}
-        size={inputSize}
-      >
-        <textarea
-          ref={initRef}
-          className={`pkt-input pkt-input--${inputSize} ${fullwidth ? 'pkt-input--fullwidth' : ''} ${
-            counterMaxLength && counterCurrent > counterMaxLength ? 'pkt-input--counter-error' : ''
-          }`}
-          name={`${name || id}`}
-          id={inputId}
-          placeholder={placeholder}
+      <div className={outerClasses}>
+        <PktInputWrapper
+          ariaDescribedby={ariaDescribedby}
           disabled={disabled}
-          rows={rows}
-          aria-labelledby={labelledBy}
-          aria-invalid={hasError}
-          aria-errormessage={`${id}-error`}
-          {...props}
-          onChange={handleChange}
-          value={value}
-          autoComplete={autoComplete}
-          minLength={minLength}
-          maxLength={maxLength}
-          readOnly={readOnly}
-          data-skip-forward-testid={skipForwardTestid ? 'true' : undefined}
-        />
-      </PktInputWrapper>
+          errorMessage={errorMessage}
+          forId={inputId}
+          hasError={hasError}
+          helptext={helptext}
+          helptextDropdown={helptextDropdown}
+          helptextDropdownButton={helptextDropdownButton}
+          inline={inline}
+          label={label}
+          optionalTag={optionalTag}
+          optionalText={optionalText}
+          requiredTag={requiredTag}
+          requiredText={requiredText}
+          tagText={tagText}
+          useWrapper={useWrapper}
+          counter={showCounter}
+          counterCurrent={counterCurrent}
+          counterMaxLength={counterMaxLength}
+          hasFieldset={hasFieldset ?? false}
+          size={inputSize}
+        >
+          <textarea
+            ref={initRef}
+            className={`pkt-input pkt-input--${inputSize} ${fullwidth ? 'pkt-input--fullwidth' : ''} ${
+              counterMaxLength && counterCurrent > counterMaxLength ? 'pkt-input--counter-error' : ''
+            }`}
+            name={`${name || id}`}
+            id={inputId}
+            placeholder={placeholder}
+            disabled={disabled}
+            rows={rows}
+            aria-labelledby={labelledBy}
+            aria-invalid={hasError}
+            aria-errormessage={hasError ? `${id}-error` : undefined}
+            aria-describedby={describedByIds({
+              id: inputId,
+              hasHelptext: !!helptext,
+              hasCounter: showCounter,
+              ariaDescribedby,
+            })}
+            {...props}
+            onChange={handleChange}
+            value={value}
+            autoComplete={autoComplete}
+            minLength={minLength}
+            maxLength={maxLength}
+            readOnly={readOnly}
+            data-skip-forward-testid={skipForwardTestid ? 'true' : undefined}
+          />
+        </PktInputWrapper>
+      </div>
     )
   },
 )