@oslokommune/punkt-react 15.4.6 → 16.0.0

package/src/components/combobox/ComboboxInput.tsx

@@ -0,0 +1,140 @@
+'use client'
+
+import { findOptionByValue, findOptionIndex } from 'shared-utils/combobox'
+import { PktIcon } from '../icon/Icon'
+import { ComboboxTags, SingleValueDisplay } from './ComboboxTags'
+import type { IComboboxState } from './types'
+
+interface IComboboxInputProps {
+  state: IComboboxState
+}
+
+export const ComboboxInput = ({ state }: IComboboxInputProps) => {
+  const {
+    id,
+    inputId,
+    listboxId,
+    values,
+    options,
+    isOpen,
+    multiple,
+    typeahead,
+    allowUserInput,
+    tagPlacement,
+    placeholder,
+    disabled,
+    fullwidth,
+    hasError,
+    label,
+    inputFocus,
+    inputRef,
+    triggerRef,
+    handleInputChange,
+    handleInputKeydown,
+    handleInputFocus,
+    handleInputBlur,
+    handleInputClick,
+    handlePlaceholderClick,
+    handleSelectOnlyKeydown,
+    name,
+  } = state
+
+  const inputClasses = [
+    'pkt-combobox__input',
+    fullwidth && 'pkt-combobox__input--fullwidth',
+    isOpen && 'pkt-combobox__input--open',
+    hasError && 'pkt-combobox__input--error',
+    disabled && 'pkt-combobox__input--disabled',
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  const arrowIconClasses = ['pkt-combobox__arrow-icon', isOpen && 'pkt-combobox__arrow-icon--open']
+    .filter(Boolean)
+    .join(' ')
+
+  const hasTextInput = typeahead || allowUserInput
+  const showPlaceholder =
+    !hasTextInput && placeholder && (!values.length || (multiple && tagPlacement === 'outside')) && !inputFocus
+
+  const showInlineValues = tagPlacement !== 'outside'
+
+  // Compute aria-activedescendant for select-only mode
+  const activeDescendant =
+    values[0] && findOptionByValue(options, values[0])
+      ? `${listboxId}-${findOptionIndex(options, values[0])}`
+      : undefined
+
+  // Build selection description for screen readers
+  const selectionDescription = multiple && values.length > 0 ? `${values.length} valgt` : undefined
+
+  // Select-only ARIA props (applied to the container div)
+  const selectOnlyProps = !hasTextInput
+    ? {
+        id: `${id}-combobox`,
+        role: 'combobox' as const,
+        'aria-expanded': isOpen ? ('true' as const) : ('false' as const),
+        'aria-controls': listboxId,
+        'aria-haspopup': 'listbox' as const,
+        'aria-labelledby': `${id}-combobox-label`,
+        'aria-activedescendant': activeDescendant,
+        'aria-description': selectionDescription,
+        tabIndex: disabled ? -1 : 0,
+        onKeyDown: handleSelectOnlyKeydown,
+      }
+    : {
+        tabIndex: -1,
+      }
+
+  return (
+    <div ref={triggerRef} className={inputClasses} onClick={handleInputClick} {...selectOnlyProps}>
+      {showPlaceholder ? (
+        <span className="pkt-combobox__placeholder" onClick={handlePlaceholderClick}>
+          {placeholder}
+        </span>
+      ) : showInlineValues ? (
+        multiple ? (
+          <ComboboxTags state={state} />
+        ) : !hasTextInput ? (
+          <SingleValueDisplay state={state} />
+        ) : null
+      ) : null}
+
+      {hasTextInput ? (
+        <div className="pkt-combobox__input-div combobox__input">
+          <input
+            ref={inputRef}
+            type="text"
+            id={inputId}
+            name={`${name || id}-input`}
+            onChange={handleInputChange}
+            onKeyDown={handleInputKeydown}
+            onFocus={handleInputFocus}
+            onBlur={handleInputBlur}
+            placeholder={!values.length || (multiple && tagPlacement === 'outside') ? placeholder : undefined}
+            autoComplete="off"
+            role="combobox"
+            aria-expanded={isOpen ? 'true' : 'false'}
+            aria-label={label}
+            aria-autocomplete={typeahead ? 'both' : allowUserInput ? 'list' : 'none'}
+            aria-controls={listboxId}
+            aria-activedescendant={activeDescendant}
+            aria-description={selectionDescription}
+            disabled={disabled}
+          />
+        </div>
+      ) : (
+        <input
+          ref={inputRef}
+          type="hidden"
+          id={inputId}
+          name={`${name || id}-input`}
+          value={values.join(',')}
+          readOnly
+        />
+      )}
+
+      <PktIcon className={arrowIconClasses} name="chevron-thin-down" aria-hidden="true" />
+    </div>
+  )
+}

package/src/components/combobox/ComboboxTags.tsx

@@ -0,0 +1,110 @@
+'use client'
+
+import { useEffect, useRef, type MouseEvent, type KeyboardEvent } from 'react'
+import { findOptionByValue, getOptionDisplayText } from 'shared-utils/combobox'
+import type { TPktComboboxDisplayValue } from 'shared-types/combobox'
+import { PktTag } from '../tag/Tag'
+import type { IComboboxState } from './types'
+
+interface IComboboxTagsProps {
+  state: IComboboxState
+  outside?: boolean
+}
+
+export const ComboboxTags = ({ state, outside = false }: IComboboxTagsProps) => {
+  const { values, options, disabled, displayValueAs, handleTagRemove, handleTagKeydown, focusedTagIndex } = state
+  const tagRefs = useRef<(HTMLButtonElement | null)[]>([])
+
+  useEffect(() => {
+    if (!outside && focusedTagIndex >= 0 && focusedTagIndex < values.length) {
+      tagRefs.current[focusedTagIndex]?.focus()
+    }
+  }, [outside, focusedTagIndex, values.length])
+
+  if (values.length === 0) return null
+
+  const renderTag = (val: string, index: number) => {
+    const option = findOptionByValue(options, val)
+    const tagSkinColor = option?.tagSkinColor
+    const displayText = option ? getOptionDisplayText(option, displayValueAs) : val
+
+    if (disabled) {
+      return (
+        <li key={val} role="listitem">
+          <PktTag skin={tagSkinColor || 'blue-dark'}>
+            <span className="pkt-combobox__value">{displayText}</span>
+          </PktTag>
+        </li>
+      )
+    }
+
+    // Outside tags: normal tabbable buttons, no roving tabindex
+    if (outside) {
+      return (
+        <li key={val} role="listitem">
+          <PktTag skin={tagSkinColor || 'blue-dark'} closeTag onClose={() => handleTagRemove(val)}>
+            <span className="pkt-combobox__value">{displayText}</span>
+          </PktTag>
+        </li>
+      )
+    }
+
+    // Inside tags: roving tabindex, arrow key navigation
+    return (
+      <li
+        key={val}
+        role="listitem"
+        onClick={(e: MouseEvent) => e.stopPropagation()}
+        onMouseDown={(e: MouseEvent) => e.preventDefault()}
+      >
+        <PktTag
+          ref={(el: HTMLButtonElement | null) => {
+            tagRefs.current[index] = el
+          }}
+          skin={tagSkinColor || 'blue-dark'}
+          closeTag
+          tabIndex={focusedTagIndex === index ? 0 : -1}
+          onClose={() => handleTagRemove(val)}
+          onKeyDown={(e: KeyboardEvent) => handleTagKeydown(e, index)}
+        >
+          <span className="pkt-combobox__value">{displayText}</span>
+        </PktTag>
+      </li>
+    )
+  }
+
+  const tags = values.map(renderTag)
+
+  if (outside) {
+    return (
+      <div className="pkt-combobox__tags-outside">
+        <ul role="list" className="pkt-combobox__tag-list">
+          {tags}
+        </ul>
+      </div>
+    )
+  }
+
+  return (
+    <ul role="list" className="pkt-combobox__tag-list">
+      {tags}
+    </ul>
+  )
+}
+
+interface ISingleValueDisplayProps {
+  state: IComboboxState
+}
+
+export const SingleValueDisplay = ({ state }: ISingleValueDisplayProps) => {
+  const { values, options, editingSingleValue, displayValueAs } = state
+
+  if (editingSingleValue || values.length === 0) return null
+
+  const option = findOptionByValue(options, values[0])
+  if (!option) return null
+
+  const displayText = getOptionDisplayText(option, displayValueAs as TPktComboboxDisplayValue)
+
+  return <span className="pkt-combobox__value">{displayText}</span>
+}

package/src/components/combobox/Listbox.tsx

@@ -0,0 +1,172 @@
+'use client'
+
+import type { IComboboxState } from './types'
+import { PktIcon } from '../icon/Icon'
+
+interface IListboxProps {
+  state: IComboboxState
+}
+
+export const Listbox = ({ state }: IListboxProps) => {
+  const {
+    listboxId,
+    label,
+    isOpen,
+    options,
+    filteredOptions,
+    multiple,
+    disabled,
+    maxIsReached,
+    maxlength,
+    includeSearch,
+    allowUserInput,
+    addValueText,
+    userInfoMessage,
+    searchPlaceholder,
+    searchValue,
+    handleOptionClick,
+    handleOptionKeydown,
+    handleSearchInput,
+    handleSearchKeydown,
+    handleNewOptionClick,
+    handleNewOptionKeydown,
+    listboxRef,
+  } = state
+
+  const selectedCount = filteredOptions.filter((opt) => opt.selected).length
+  const showMaxBanner = multiple && selectedCount > 0 && maxlength != null && maxlength > 0
+  const showNewOptionBanner = allowUserInput && addValueText && !maxIsReached
+  const showUserMessage = !!userInfoMessage
+
+  const listboxClasses = ['pkt-listbox', isOpen && 'pkt-listbox__open', 'pkt-txt-16-light'].filter(Boolean).join(' ')
+
+  return (
+    <>
+      <div
+        ref={listboxRef}
+        id={listboxId}
+        className={listboxClasses}
+        role={filteredOptions.length > 0 ? 'listbox' : undefined}
+        aria-label={filteredOptions.length > 0 ? `Liste: ${label || ''}` : undefined}
+        aria-multiselectable={filteredOptions.length > 0 && multiple ? 'true' : undefined}
+      >
+        <div className="pkt-listbox__banners">
+          {includeSearch && (
+            <div className="pkt-listbox__search">
+              <span className="pkt-listbox__search-icon">
+                <PktIcon name="magnifying-glass-small" />
+              </span>
+              <input
+                className="pkt-txt-16-light"
+                type="text"
+                aria-label="Søk i listen"
+                form=""
+                placeholder={searchPlaceholder || 'Søk...'}
+                onChange={handleSearchInput}
+                onKeyDown={handleSearchKeydown}
+                value={searchValue}
+                data-type="searchbox"
+                disabled={disabled}
+                readOnly={disabled}
+                role="searchbox"
+              />
+            </div>
+          )}
+          {showMaxBanner && (
+            <div className="pkt-listbox__banner pkt-listbox__banner--maximum-reached">
+              {selectedCount} av maks {maxlength} mulige er valgt.
+            </div>
+          )}
+
+          {showUserMessage && (
+            <div className="pkt-listbox__banner pkt-listbox__banner--user-message">
+              <PktIcon className="pkt-listbox__banner-icon" name="exclamation-mark-circle" />
+              {userInfoMessage}
+            </div>
+          )}
+
+          {showNewOptionBanner && (
+            <div
+              className="pkt-listbox__banner pkt-listbox__banner--new-option pkt-listbox__option"
+              data-type="new-option"
+              data-value={addValueText}
+              data-selected="false"
+              tabIndex={0}
+              onClick={() => handleNewOptionClick(addValueText)}
+              onKeyDown={handleNewOptionKeydown}
+            >
+              <PktIcon className="pkt-listbox__banner-icon" name="plus-sign" />
+              Legg til &quot;{addValueText}&quot;
+            </div>
+          )}
+
+          {options.length === 0 && filteredOptions.length === 0 && !showUserMessage && (
+            <div className="pkt-listbox__banner pkt-listbox__banner--empty">
+              <PktIcon className="pkt-listbox__banner-icon" name="exclamation-mark-circle" />
+              Tom liste
+            </div>
+          )}
+        </div>
+
+        <ul className="pkt-listbox__options" role="presentation">
+          {filteredOptions.map((option, index) => {
+            const optionClasses = [
+              'pkt-listbox__option',
+              !multiple && option.selected && 'pkt-listbox__option--selected',
+              multiple && 'pkt-listbox__option--checkBox',
+            ]
+              .filter(Boolean)
+              .join(' ')
+
+            const isOptionDisabled = disabled || option.disabled || (maxIsReached && !option.selected)
+
+            return (
+              <li
+                key={`${option.value}-${index}`}
+                className={optionClasses}
+                onClick={() => handleOptionClick(option.value)}
+                onKeyDown={(e) => handleOptionKeydown(e, option.value)}
+                aria-selected={option.selected ? 'true' : 'false'}
+                tabIndex={isOptionDisabled ? -1 : 0}
+                data-index={index}
+                data-value={option.value}
+                data-selected={option.selected ? 'true' : 'false'}
+                data-disabled={isOptionDisabled || undefined}
+                aria-disabled={isOptionDisabled ? 'true' : 'false'}
+                role="option"
+                id={`${listboxId}-${index}`}
+              >
+                {multiple ? (
+                  <input
+                    className="pkt-input-check__input-checkbox"
+                    type="checkbox"
+                    tabIndex={-1}
+                    value={option.value}
+                    checked={option.selected || false}
+                    readOnly
+                    aria-hidden="true"
+                    disabled={isOptionDisabled}
+                  />
+                ) : option.selected ? (
+                  <PktIcon name="check-big" />
+                ) : null}
+
+                <span className="pkt-listbox__option-label" id={`${listboxId}-option-label-${index}`}>
+                  {option.prefix && <span className="pkt-listbox__option-prefix">{option.prefix}</span>}
+                  {option.label || option.value}
+                </span>
+
+                {option.description && (
+                  <span className="pkt-listbox__option-description pkt-txt-14-light">{option.description}</span>
+                )}
+              </li>
+            )
+          })}
+        </ul>
+      </div>
+      <div aria-live="polite" className="pkt-visually-hidden">
+        {userInfoMessage}
+      </div>
+    </>
+  )
+}

package/src/components/combobox/types.ts

@@ -0,0 +1,145 @@
+'use client'
+
+import type {
+  ChangeEvent,
+  ChangeEventHandler,
+  FocusEvent,
+  KeyboardEvent,
+  MouseEvent as ReactMouseEvent,
+  KeyboardEvent as ReactKeyboardEvent,
+  ReactNode,
+  RefObject,
+} from 'react'
+import type { IPktComboboxOption, TPktComboboxDisplayValue, TPktComboboxTagPlacement } from 'shared-types/combobox'
+
+export interface IPktCombobox {
+  // Values & options
+  value?: string | string[]
+  defaultValue?: string | string[]
+  options?: IPktComboboxOption[]
+  defaultOptions?: IPktComboboxOption[]
+
+  // Behavior
+  multiple?: boolean
+  maxlength?: number
+  typeahead?: boolean
+  includeSearch?: boolean
+  allowUserInput?: boolean
+  displayValueAs?: TPktComboboxDisplayValue
+  tagPlacement?: TPktComboboxTagPlacement
+  searchPlaceholder?: string
+
+  // Form
+  name?: string
+  id?: string
+  disabled?: boolean
+  required?: boolean
+  placeholder?: string
+
+  // InputWrapper props
+  label?: string
+  helptext?: string | ReactNode
+  helptextDropdown?: string | ReactNode
+  helptextDropdownButton?: string
+  hasError?: boolean
+  errorMessage?: string | ReactNode
+  fullwidth?: boolean
+  requiredTag?: boolean
+  requiredText?: string
+  optionalTag?: boolean
+  optionalText?: string
+  tagText?: string
+  useWrapper?: boolean
+
+  // Events
+  onChange?: ChangeEventHandler<HTMLInputElement>
+  onValueChange?: (values: string[]) => void
+
+  // React
+  className?: string
+  children?: ReactNode
+}
+
+export interface IComboboxState {
+  // Identity
+  id: string
+  inputId: string
+  listboxId: string
+
+  // Values
+  values: string[]
+  inputValue: string
+  searchValue: string
+
+  // Options
+  options: IPktComboboxOption[]
+  filteredOptions: IPktComboboxOption[]
+
+  // UI state
+  isOpen: boolean
+  userInfoMessage: string
+  addValueText: string | null
+  maxIsReached: boolean
+  editingSingleValue: boolean
+  inputFocus: boolean
+  focusedTagIndex: number
+
+  // Props passthrough
+  label?: string
+  multiple: boolean
+  maxlength?: number
+  typeahead: boolean
+  includeSearch: boolean
+  allowUserInput: boolean
+  displayValueAs: TPktComboboxDisplayValue
+  tagPlacement?: TPktComboboxTagPlacement
+  searchPlaceholder?: string
+  placeholder?: string
+  disabled: boolean
+  required: boolean
+  fullwidth: boolean
+  hasError: boolean
+  errorMessage?: string | ReactNode
+  helptext?: string | ReactNode
+  helptextDropdown?: string | ReactNode
+  helptextDropdownButton?: string
+  optionalTag: boolean
+  optionalText?: string
+  requiredTag: boolean
+  requiredText?: string
+  tagText?: string
+  useWrapper: boolean
+  name?: string
+  className?: string
+
+  // Derived state
+  hasCounter: boolean
+
+  // Refs
+  inputRef: RefObject<HTMLInputElement>
+  changeInputRef: RefObject<HTMLInputElement>
+  triggerRef: RefObject<HTMLDivElement>
+  listboxRef: RefObject<HTMLDivElement>
+  wrapperRef: RefObject<HTMLDivElement>
+
+  // Event handlers
+  handleInputChange: (e: ChangeEvent<HTMLInputElement>) => void
+  handleInputKeydown: (e: KeyboardEvent<HTMLInputElement>) => void
+  handleInputFocus: () => void
+  handleInputBlur: () => void
+  handleFocusOut: (e: FocusEvent) => void
+  handleInputClick: (e: ReactMouseEvent) => void
+  handlePlaceholderClick: (e: ReactMouseEvent) => void
+  handleSelectOnlyKeydown: (e: ReactKeyboardEvent) => void
+  handleOptionClick: (value: string) => void
+  handleOptionKeydown: (e: KeyboardEvent<HTMLLIElement>, value: string) => void
+  handleTagRemove: (value: string) => void
+  handleTagKeydown: (e: ReactKeyboardEvent, index: number) => void
+  handleSearchInput: (e: ChangeEvent<HTMLInputElement>) => void
+  handleSearchKeydown: (e: KeyboardEvent<HTMLInputElement>) => void
+  handleNewOptionClick: (value: string) => void
+  handleNewOptionKeydown: (e: KeyboardEvent<HTMLDivElement>) => void
+
+  // Form integration
+  onChange?: ChangeEventHandler<HTMLInputElement>
+}