@oslokommune/punkt-react 12.43.1 → 13.0.0

package/src/components/select/Select.tsx

@@ -1,19 +1,15 @@
 'use client'
 
-import React, {
-  ForwardRefExoticComponent,
-  ReactNode,
-  SelectHTMLAttributes,
-  ChangeEventHandler,
-  FocusEventHandler,
-  LegacyRef,
-  FC,
-  forwardRef,
-} from 'react'
-import { PktSelect as PktElSelect } from '@oslokommune/punkt-elements'
-import type { TSelectOption } from '@oslokommune/punkt-elements'
-import { createComponent, EventName } from '@lit/react'
-import { PktEventWithTarget } from '@/interfaces/IPktElements'
+import { ForwardedRef, forwardRef, ReactNode, SelectHTMLAttributes } from 'react'
+
+import { PktInputWrapper } from '../inputwrapper/InputWrapper'
+
+export type TSelectOption = {
+  value: string
+  label: string
+  selected?: boolean
+  disabled?: boolean
+}
 
 export interface IPktSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
   ariaDescribedby?: string
@@ -30,49 +26,72 @@ export interface IPktSelectProps extends SelectHTMLAttributes<HTMLSelectElement>
   fullwidth?: boolean
   label: string
   name?: string
-  options?: TSelectOption[]
   optionalTag?: boolean
   optionalText?: string
   requiredTag?: boolean
   requiredText?: string
-  ref?: LegacyRef<HTMLSelectElement>
-  onChange?: ChangeEventHandler<HTMLSelectElement>
-  onInput?: ChangeEventHandler<HTMLSelectElement>
-  onBlur?: FocusEventHandler<HTMLSelectElement>
-  onFocus?: FocusEventHandler<HTMLSelectElement>
-  onValueChange?: (e: CustomEvent) => void
-  onToggleHelpText?: (e: CustomEvent) => void
+  options?: Array<{ value: string; label: string; disabled?: boolean }>
 }
 
-export const LitComponent = createComponent({
-  tagName: 'pkt-select',
-  elementClass: PktElSelect,
-  react: React,
-  displayName: 'PktSelect',
-  events: {
-    onChange: 'change' as EventName<PktEventWithTarget>,
-    onInput: 'input' as EventName<PktEventWithTarget>,
-    onBlur: 'blur' as EventName<FocusEvent>,
-    onFocus: 'focus' as EventName<FocusEvent>,
-    onValueChange: 'valueChange' as EventName<CustomEvent>,
-    onToggleHelpText: 'toggleHelpText' as EventName<CustomEvent>,
+export const PktSelect = forwardRef(
+  (
+    {
+      ariaDescribedby,
+      ariaLabelledby,
+      children,
+      className,
+      disabled = false,
+      errorMessage,
+      hasError,
+      helptext,
+      helptextDropdown,
+      helptextDropdownButton,
+      id,
+      inline = false,
+      fullwidth = false,
+      label,
+      name,
+      optionalTag = false,
+      optionalText,
+      requiredTag = false,
+      requiredText,
+      ...props
+    }: IPktSelectProps,
+    ref: ForwardedRef<HTMLSelectElement>,
+  ) => {
+    const classNames = [className, 'pkt-select'].join(' ')
+    return (
+      <PktInputWrapper
+        className={classNames}
+        forId={`${id}-input`}
+        label={label}
+        helptext={helptext}
+        helptextDropdown={helptextDropdown}
+        helptextDropdownButton={helptextDropdownButton}
+        optionalTag={optionalTag}
+        optionalText={optionalText}
+        requiredTag={requiredTag}
+        requiredText={requiredText}
+        hasError={hasError}
+        errorMessage={errorMessage}
+        disabled={disabled}
+        inline={inline}
+        ariaDescribedby={ariaDescribedby}
+      >
+        <select
+          ref={ref}
+          className={`pkt-input ${fullwidth ? 'pkt-input--fullwidth' : ''}`}
+          aria-invalid={hasError}
+          aria-errormessage={`${id}-error`}
+          aria-labelledby={ariaLabelledby || undefined}
+          disabled={disabled}
+          id={`${id}-input`}
+          name={name || id}
+          {...props}
+        >
+          {children}
+        </select>
+      </PktInputWrapper>
+    )
   },
-}) as ForwardRefExoticComponent<IPktSelectProps>
-
-// Note:
-// helptext slot needs to be before children because of how React reactivity works.
-// Please do not change this.
-export const PktSelect: FC<IPktSelectProps> = forwardRef(({ children, helptext, ...props }: IPktSelectProps, ref) => {
-  return (
-    <LitComponent ref={ref} {...props}>
-      {helptext && (
-        <div slot="helptext" className="pkt-contents">
-          {helptext}
-        </div>
-      )}
-      {children}
-    </LitComponent>
-  )
-})
-
-PktSelect.displayName = 'PktSelect'
+)

package/src/components/textarea/Textarea.test.tsx

@@ -11,7 +11,6 @@ expect.extend(toHaveNoViolations)
 describe('PktTextarea', () => {
   test('renders input field with correct props', async () => {
     const { getByLabelText } = render(<PktTextarea label="Input Label" id="inputId" />)
-    await window.customElements.whenDefined('pkt-textarea')
 
     const inputElement = getByLabelText('Input Label')
     expect(inputElement).toBeInTheDocument()
@@ -21,11 +20,13 @@ describe('PktTextarea', () => {
 
   test('renders error message when hasError prop is true', async () => {
     const { getByText } = render(<PktTextarea label="Input Label" id="inputId" hasError errorMessage="Input error" />)
-    await window.customElements.whenDefined('pkt-textarea')
 
+    await window.customElements.whenDefined('pkt-alert')
     const errorMessage = getByText('Input error')
     expect(errorMessage).toBeInTheDocument()
-    expect(errorMessage.closest('.pkt-alert')).toHaveAttribute('id', 'inputId-input-error')
+    const alertContainer = errorMessage.closest('pkt-alert')
+
+    expect(alertContainer).toHaveAttribute('id', 'inputId-input-error')
   })
 
   describe('PktTextarea', () => {
@@ -33,7 +34,6 @@ describe('PktTextarea', () => {
       const { getByText, container } = render(
         <PktTextarea label="Input Label" id="inputId" helptext="Help Text" helptextDropdown="Help Text" />,
       )
-      await window.customElements.whenDefined('pkt-textarea')
 
       const expandButton = getByText('Les mer').closest('button') as HTMLButtonElement
       const helptextElement = container.querySelector('.pkt-inputwrapper__helptext-expandable-closed')

package/src/components/textarea/Textarea.tsx

@@ -1,23 +1,25 @@
 'use client'
 
-import React, {
-  ForwardRefExoticComponent,
-  ChangeEventHandler,
-  FocusEventHandler,
+import {
+  ChangeEvent,
+  ForwardedRef,
+  forwardRef,
   ReactNode,
   TextareaHTMLAttributes,
-  forwardRef,
-  ForwardedRef,
+  useEffect,
+  useRef,
+  useState,
 } from 'react'
-import { createComponent, EventName } from '@lit/react'
-import { PktTextarea as PktEl } from '@oslokommune/punkt-elements'
-import type { PktEventWithTarget } from '@/interfaces/IPktElements'
+
+import { PktInputWrapper } from '../inputwrapper/InputWrapper'
 
 export interface IPktTextarea extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  id: string
   ariaDescribedby?: string
   ariaLabelledby?: string
   counter?: boolean
   counterMaxLength?: number
+  disabled?: boolean
   errorMessage?: string | ReactNode | ReactNode[]
   hasError?: boolean
   helptext?: string | ReactNode | ReactNode[]
@@ -25,51 +27,128 @@ export interface IPktTextarea extends TextareaHTMLAttributes<HTMLTextAreaElement
   helptextDropdownButton?: string
   inline?: boolean
   fullwidth?: boolean
-  label?: string
+  label: string
+  name?: string
   optionalTag?: boolean
   optionalText?: string
   requiredTag?: boolean
   requiredText?: string
+  placeholder?: string
+  rows?: number
   useWrapper?: boolean
   value?: string
-  ref?: ForwardedRef<HTMLTextAreaElement | IPktTextarea>
-  onChange?: ChangeEventHandler<HTMLTextAreaElement>
-  onInput?: ChangeEventHandler<HTMLTextAreaElement>
-  onBlur?: FocusEventHandler<HTMLTextAreaElement>
-  onFocus?: FocusEventHandler<HTMLTextAreaElement>
-  onValueChange?: (e: CustomEvent) => void
-  onToggleHelpText?: (e: CustomEvent) => void
-  dataTestid?: string
+  autocomplete?: string
+  minLength?: number
+  maxLength?: number
+  readOnly?: boolean
+  required?: boolean
   skipForwardTestid?: boolean
+  onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void
 }
 
-export const LitComponent = createComponent({
-  tagName: 'pkt-textarea',
-  elementClass: PktEl,
-  react: React,
-  displayName: 'PktTextarea',
-  events: {
-    onChange: 'change' as EventName<PktEventWithTarget>,
-    onInput: 'input' as EventName<PktEventWithTarget>,
-    onBlur: 'blur' as EventName<FocusEvent>,
-    onFocus: 'focus' as EventName<FocusEvent>,
-    onValueChange: 'valueChange' as EventName<CustomEvent>,
-    onToggleHelpText: 'toggleHelpText' as EventName<CustomEvent>,
-  },
-}) as ForwardRefExoticComponent<IPktTextarea>
+export const PktTextarea = forwardRef(
+  (
+    {
+      id,
+      ariaDescribedby,
+      ariaLabelledby,
+      counter,
+      counterMaxLength,
+      className,
+      disabled,
+      errorMessage,
+      hasError,
+      helptext,
+      helptextDropdown,
+      helptextDropdownButton,
+      inline,
+      fullwidth = false,
+      label,
+      name,
+      optionalTag = false,
+      optionalText,
+      requiredTag = false,
+      requiredText,
+      placeholder,
+      rows,
+      useWrapper = true,
+      onChange,
+      value,
+      autoComplete = 'off',
+      minLength,
+      maxLength,
+      readOnly = false,
+      skipForwardTestid = false,
+      ...props
+    }: IPktTextarea,
+    ref: ForwardedRef<HTMLTextAreaElement>,
+  ) => {
+    const classNames = [className, 'pkt-textinput', 'pkt-textarea'].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)
+    const labelledBy = ariaLabelledby || labelId
+
+    const internalRef = useRef<HTMLTextAreaElement>(null)
+
+    const [counterCurrent, setCounterCurrent] = useState(0)
+
+    const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+      counter && setCounterCurrent(e.currentTarget?.value?.length || 0)
+      if (onChange) {
+        return onChange(e)
+      }
+    }
+
+    useEffect(() => {
+      typeof ref === 'function' && ref(internalRef.current)
+      counter && setCounterCurrent(internalRef?.current?.value?.length || 0)
+    }, [ref])
 
-export const PktTextarea = forwardRef<HTMLTextAreaElement | IPktTextarea, IPktTextarea>(
-  ({ helptext, ...props }, ref) => {
     return (
-      <LitComponent {...props} ref={ref}>
-        {helptext && (
-          <div slot="helptext" className="pkt-contents">
-            {helptext}
-          </div>
-        )}
-      </LitComponent>
+      <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}
+        useWrapper={useWrapper}
+        counter={counter}
+        counterCurrent={counterCurrent}
+        counterMaxLength={counterMaxLength}
+      >
+        <textarea
+          ref={internalRef}
+          className={`pkt-input ${fullwidth ? 'pkt-input--fullwidth' : ''} ${
+            counterMaxLength && counterCurrent > counterMaxLength ? 'pkt-input--counter-error' : ''
+          }`}
+          name={`${name || id}-input`}
+          id={inputId}
+          placeholder={placeholder}
+          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}
+          data-skip-forward-testid={skipForwardTestid ? 'true' : undefined}
+        />
+      </PktInputWrapper>
     )
   },
 )
-
-PktTextarea.displayName = 'PktTextarea'

package/src/components/textinput/Textinput.test.tsx

@@ -2,38 +2,39 @@ import '@testing-library/jest-dom'
 
 import { fireEvent, render } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
-import React from 'react'
 
 import { PktTextinput } from './Textinput'
 
 expect.extend(toHaveNoViolations)
 
+const inputId = 'inputId'
+const label = 'Input Label'
+
 describe('PktTextinput', () => {
   test('renders input field with correct props', async () => {
-    const { getByLabelText } = render(<PktTextinput label="Input Label" id="inputId" />)
-    await window.customElements.whenDefined('pkt-textinput')
+    const { getByLabelText } = render(<PktTextinput label={label} id={inputId} />)
 
     const inputElement = getByLabelText('Input Label')
     expect(inputElement).toBeInTheDocument()
     expect(inputElement.tagName).toBe('INPUT')
-    expect(inputElement.id).toBe('inputId-input')
+    expect(inputElement.id).toBe('inputId')
   })
 
   test('renders error message when hasError prop is true', async () => {
-    const { getByText } = render(<PktTextinput label="Input Label" id="inputId" hasError errorMessage="Input error" />)
-    await window.customElements.whenDefined('pkt-textinput')
+    const { getByText } = render(<PktTextinput label={label} id={inputId} hasError errorMessage="Input error" />)
 
     const errorMessage = getByText('Input error')
     expect(errorMessage).toBeInTheDocument()
-    expect(errorMessage.closest('.pkt-alert')).toHaveAttribute('id', 'inputId-input-error')
+    const alertContainer = errorMessage.closest('pkt-alert')
+    expect(alertContainer).not.toBeNull()
+    expect(alertContainer).toHaveAttribute('id', 'inputId-error')
   })
 
   describe('PktTextinput', () => {
     test('toggles helptext class', async () => {
       const { getByText, container } = render(
-        <PktTextinput label="Input Label" id="inputId" helptext="Help Text" helptextDropdown="Help Text" />,
+        <PktTextinput label={label} id={inputId} helptext="Help Text" helptextDropdown="Help Text" />,
       )
-      await window.customElements.whenDefined('pkt-textinput')
 
       const expandButton = getByText('Les mer').closest('button') as HTMLButtonElement
       const helptextElement = container.querySelector('.pkt-inputwrapper__helptext-expandable-closed')
@@ -48,8 +49,8 @@ describe('PktTextinput', () => {
 
   describe('accessibility', () => {
     it('renders with no wcag errors with axe', async () => {
-      const { container } = render(<PktTextinput label="Input Label" id="inputId" />)
-      await window.customElements.whenDefined('pkt-textinput')
+      const { container } = render(<PktTextinput label={label} id={inputId} />)
+
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })

package/src/components/textinput/Textinput.tsx

@@ -1,22 +1,27 @@
 'use client'
 
 import React, {
-  ForwardRefExoticComponent,
-  ChangeEventHandler,
-  FocusEventHandler,
-  ReactNode,
-  InputHTMLAttributes,
-  forwardRef,
   ForwardedRef,
+  forwardRef,
+  InputHTMLAttributes,
+  useRef,
+  useEffect,
+  useState,
+  ChangeEvent,
+  ReactNode,
 } from 'react'
-import { createComponent, EventName } from '@lit/react'
-import { PktTextinput as PktEl } from '@oslokommune/punkt-elements'
-import type { PktEventWithTarget } from '@/interfaces/IPktElements'
+
+import { PktIcon } from '../icon/Icon'
+import { PktInputWrapper } from '../inputwrapper/InputWrapper'
 
 export interface IPktTextinput extends InputHTMLAttributes<HTMLInputElement> {
+  id: string
+  ariaDescribedby?: string
   ariaLabelledby?: string
+  autocomplete?: string
   counter?: boolean
   counterMaxLength?: number
+  disabled?: boolean
   errorMessage?: string | ReactNode | ReactNode[]
   hasError?: boolean
   helptext?: string | ReactNode | ReactNode[]
@@ -25,52 +30,171 @@ export interface IPktTextinput extends InputHTMLAttributes<HTMLInputElement> {
   iconNameRight?: string
   inline?: boolean
   fullwidth?: boolean
-  label?: string
+  label: string
+  name?: string
   optionalTag?: boolean
   optionalText?: string
   requiredTag?: boolean
   requiredText?: string
+  placeholder?: string
   prefix?: string
   suffix?: string
+  type?: string
   useWrapper?: boolean
   value?: string
   omitSearchIcon?: boolean
-  ref?: ForwardedRef<HTMLInputElement>
-  onChange?: ChangeEventHandler<HTMLInputElement>
-  onInput?: ChangeEventHandler<HTMLInputElement>
-  onBlur?: FocusEventHandler<HTMLInputElement>
-  onFocus?: FocusEventHandler<HTMLInputElement>
-  onValueChange?: (e: CustomEvent) => void
-  onToggleHelpText?: (e: CustomEvent) => void
+  min?: number | string
+  max?: number | string
+  minLength?: number
+  maxLength?: number
+  step?: string
+  size?: number
+  readonly?: boolean
+  required?: boolean
   dataTestid?: string
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void
   skipForwardTestid?: boolean
 }
 
-export const LitComponent = createComponent({
-  tagName: 'pkt-textinput',
-  elementClass: PktEl,
-  react: React,
-  displayName: 'PktTextinput',
-  events: {
-    onChange: 'change' as EventName<PktEventWithTarget>,
-    onInput: 'input' as EventName<PktEventWithTarget>,
-    onBlur: 'blur' as EventName<FocusEvent>,
-    onFocus: 'focus' as EventName<FocusEvent>,
-    onValueChange: 'valueChange' as EventName<CustomEvent>,
-    onToggleHelpText: 'toggleHelpText' as EventName<CustomEvent>,
-  },
-}) as ForwardRefExoticComponent<IPktTextinput>
+export const PktTextinput = forwardRef(
+  (
+    {
+      id,
+      ariaDescribedby,
+      ariaLabelledby,
+      autocomplete = 'off',
+      counter,
+      counterMaxLength,
+      className,
+      disabled = false,
+      errorMessage,
+      hasError = false,
+      helptext,
+      helptextDropdown,
+      helptextDropdownButton,
+      iconNameRight,
+      inline = false,
+      fullwidth = false,
+      label,
+      name,
+      optionalTag = false,
+      optionalText,
+      requiredTag = false,
+      requiredText,
+      placeholder,
+      prefix,
+      suffix,
+      type = 'text',
+      useWrapper = true,
+      omitSearchIcon = false,
+      value,
+      minLength,
+      maxLength,
+      min,
+      max,
+      step,
+      size,
+      readonly,
+      required,
+      dataTestid,
+      onChange,
+      skipForwardTestid = false,
+      ...props
+    }: IPktTextinput,
+    ref: ForwardedRef<HTMLInputElement>,
+  ) => {
+    const classNames = [className, 'pkt-textinput'].join(' ')
 
-export const PktTextinput = forwardRef<HTMLInputElement, IPktTextinput>(({ helptext, ...props }, ref) => {
-  return (
-    <LitComponent {...props} ref={ref}>
-      {helptext && (
-        <div slot="helptext" className="pkt-contents">
-          {helptext}
-        </div>
-      )}
-    </LitComponent>
-  )
-})
+    const shouldShowSearchIcon = type === 'search' && !iconNameRight && !omitSearchIcon
+    const isoValue = type === 'date' && value ? value.slice(0, 10) : value
+
+    const [counterCurrent, setCounterCurrent] = useState(value?.length || 0)
+
+    const inputId = `${id}` // id til input element og sendes inn til htmlFor i InputWrapper
+    const labelId = `${inputId}-label` // id til label elementet og sendes inn til aria-labelledby i input (genereres i InputWrapper)
+    const labelledBy = ariaLabelledby || labelId
+
+    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+      const newValue = event.currentTarget.value
+      if (counter) {
+        setCounterCurrent(newValue?.length || 0)
+      }
+      if (onChange) {
+        onChange(event)
+      }
+    }
 
-PktTextinput.displayName = 'PktTextinput'
+    useEffect(() => {
+      if (value !== undefined) {
+        setCounterCurrent(value?.length || 0)
+      }
+    }, [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}
+        useWrapper={useWrapper}
+        counter={counter}
+        counterCurrent={counterCurrent}
+        counterMaxLength={counterMaxLength}
+      >
+        <div
+          className="pkt-input__container"
+          data-testid={dataTestid}
+          data-skip-forward-testid={skipForwardTestid ? 'true' : undefined}
+        >
+          {prefix && <div className="pkt-input-prefix">{prefix}</div>}
+          <input
+            {...props}
+            ref={ref}
+            className={`pkt-input ${fullwidth ? 'pkt-input--fullwidth' : ''} ${
+              counterMaxLength && counterCurrent > counterMaxLength ? 'pkt-input--counter-error' : ''
+            }`}
+            type={type}
+            name={`${name || id}`}
+            value={isoValue}
+            id={inputId}
+            placeholder={placeholder}
+            autoComplete={autocomplete}
+            disabled={disabled}
+            aria-invalid={hasError}
+            aria-errormessage={`${id}-error`}
+            aria-labelledby={labelledBy}
+            min={min}
+            max={max}
+            onChange={handleChange}
+            step={step}
+            minLength={minLength}
+            maxLength={maxLength}
+            size={size}
+            required={required}
+          />
+          {suffix && (
+            <p className="pkt-input-suffix">
+              {suffix}
+              {iconNameRight && <PktIcon className="pkt-input-suffix-icon" name={iconNameRight} />}
+              {shouldShowSearchIcon && <PktIcon className="pkt-input-suffix-icon" name="magnifying-glass-big" />}
+            </p>
+          )}
+
+          {!suffix && iconNameRight && <PktIcon className="pkt-input-icon" name={iconNameRight} />}
+          {!suffix && shouldShowSearchIcon && <PktIcon className="pkt-input-icon" name="magnifying-glass-big" />}
+        </div>
+      </PktInputWrapper>
+    )
+  },
+)