@navikt/ds-react 4.6.1 → 4.7.0

package/src/form/combobox/customOptionsContext.tsx

@@ -0,0 +1,57 @@
+import React, { useState, useCallback, createContext, useContext } from "react";
+import { useInputContext } from "./Input/inputContext";
+
+type CustomOptionsContextType = {
+  customOptions: string[];
+  removeCustomOption: (option: string) => void;
+  addCustomOption: (option: string) => void;
+};
+
+const CustomOptionsContext = createContext<CustomOptionsContextType>(
+  {} as CustomOptionsContextType
+);
+
+export const CustomOptionsProvider = ({ children }) => {
+  const [customOptions, setCustomOptions] = useState<string[]>([]);
+  const { focusInput } = useInputContext();
+
+  const removeCustomOption = useCallback(
+    (option) => {
+      setCustomOptions((prevCustomOptions) =>
+        prevCustomOptions.filter((o) => o !== option)
+      );
+      focusInput();
+    },
+    [focusInput, setCustomOptions]
+  );
+
+  const addCustomOption = useCallback(
+    (option) => {
+      setCustomOptions((prevOptions) => [...prevOptions, option]);
+      focusInput();
+    },
+    [focusInput, setCustomOptions]
+  );
+
+  const customOptionsState = {
+    customOptions,
+    removeCustomOption,
+    addCustomOption,
+  };
+
+  return (
+    <CustomOptionsContext.Provider value={customOptionsState}>
+      {children}
+    </CustomOptionsContext.Provider>
+  );
+};
+
+export const useCustomOptionsContext = () => {
+  const context = useContext(CustomOptionsContext);
+  if (!context) {
+    throw new Error(
+      "useCustomOptionsContext must be used within a CustomOptionsProvider"
+    );
+  }
+  return context;
+};

package/src/form/combobox/index.ts

@@ -0,0 +1,2 @@
+export { default as Combobox } from "./ComboboxProvider";
+export { type ComboboxProps } from "./types";

package/src/form/combobox/types.ts

@@ -0,0 +1,122 @@
+import React, { ChangeEvent, InputHTMLAttributes } from "react";
+import { FormFieldProps } from "../useFormField";
+
+export interface ComboboxProps
+  extends FormFieldProps,
+    Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "value"> {
+  /**
+   * Combobox label
+   */
+  label: React.ReactNode;
+  /**
+   * List of options to use for autocompletion
+   */
+  options: string[];
+  /**
+   * If enabled, adds an option to add the value of the input as an option whenever there are no options matching the value.
+   */
+  allowNewValues?: boolean;
+  /**
+   * If "true" adds a button to clear the value in the input field
+   */
+  clearButton?: boolean;
+  /**
+   * Custom name for the clear button. Requires "clearButton" to be "true".
+   *
+   * @default "Tøm"
+   */
+  clearButtonLabel?: string;
+  /**
+   * A list of options to display in the dropdown list.
+   * If provided, this overrides the internal search logic in the component.
+   * Useful for e.g. searching on a server or when overriding the search algorithm to search for synonyms or similar.
+   */
+  filteredOptions?: string[];
+  /**
+   * Optionally hide the label visually.
+   * Not recommended, but can be considered for e.g. search fields in the top menu.
+   */
+  hideLabel?: boolean;
+  /**
+   * Custom class name for the input field.
+   *
+   * If used for styling, please consider using tokens instead.
+   */
+  inputClassName?: string | undefined;
+  /**
+   * Controlled open/closed state for the dropdown list
+   */
+  isListOpen?: boolean;
+  /**
+   * Set to "true" when doing an async search and waiting for new filteredOptions.
+   *
+   * Will show a spinner in the dropdown and announce to screen readers that it is loading.
+   */
+  isLoading?: boolean;
+  /**
+   * Set to "true" to allow multiple selections
+   *
+   * This will display selected values as a list of Chips in front of the input field, instead of a selection replacing the value of the input.
+   *
+   */
+  isMultiSelect?: boolean;
+  /**
+   * Callback function triggered whenever the value of the input field is triggered.
+   *
+   * @param event
+   * @returns
+   */
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  /**
+   * Callback function triggered whenever the input field is cleared
+   *
+   * @param event
+   * @returns
+   */
+  onClear?: (event: React.PointerEvent | React.KeyboardEvent) => void;
+  /**
+   * Callback function triggered whenever an option is selected or de-selected
+   *
+   * @param option
+   * @param isSelected
+   * @returns
+   */
+  onToggleSelected?: (option: string, isSelected: boolean) => void;
+  /**
+   * List of selected options.
+   *
+   * Use this prop when controlling the selected state outside for the component,
+   * e.g. for a filter, where options can be toggled elsewhere/programmatically.
+   */
+  selectedOptions?: string[];
+  /**
+   * Set to "true" to enable inline autocomplete.
+   *
+   * @default false
+   */
+  shouldAutocomplete?: boolean;
+  /**
+   * When set to "true" displays selected options as Chips before the input field
+   *
+   * @default true
+   */
+  shouldShowSelectedOptions?: boolean;
+  /**
+   * When set to "true" displays the toggle button for opening/closing the dropdown list
+   *
+   * @default true
+   */
+  toggleListButton?: boolean;
+  /**
+   * Custom name for the toggle list-button. Requires "toggleListButton" to be "true".
+   *
+   * @default "Alternativer"
+   */
+  toggleListButtonLabel?: string;
+  /**
+   * Set this to override the value of the input field.
+   *
+   * This converts the input to a controlled input, so you have to use onChange to update the value.
+   */
+  value?: string;
+}

package/src/form/index.ts

@@ -17,6 +17,7 @@ export {
   type RadioProps,
 } from "./radio";
 export { Search, type SearchClearEvent, type SearchProps } from "./search";
+export { Combobox as UNSAFE_Combobox, type ComboboxProps } from "./combobox";
 export { default as Select, type SelectProps } from "./Select";
 export { default as Switch, type SwitchProps } from "./Switch";
 export { Counter, default as Textarea, type TextareaProps } from "./Textarea";

package/src/form/useFormField.ts

@@ -35,10 +35,28 @@ export interface FormFieldProps {
   readOnly?: boolean;
 }
 
+export interface FormFieldType {
+  showErrorMsg: boolean;
+  hasError: boolean;
+  errorId: string;
+  inputDescriptionId: string;
+  size: "small" | "medium";
+  inputProps: {
+    id: string;
+    "aria-invalid"?: boolean;
+    "aria-describedby"?: string;
+    disabled?: boolean;
+  };
+  readOnly?: boolean;
+}
+
 /**
  * Handles props and their state for various form-fields in context with Fieldset
  */
-export const useFormField = (props: FormFieldProps, prefix: string) => {
+export const useFormField = (
+  props: FormFieldProps,
+  prefix: string
+): FormFieldType => {
   const { size, error, errorId: propErrorId } = props;
 
   const fieldset = useContext(FieldsetContext);

package/src/timeline/AxisLabels.tsx

@@ -19,13 +19,14 @@ import React from "react";
 import { useTimelineContext } from "./hooks/useTimelineContext";
 import { isVisible } from "./utils";
 import { horizontalPositionAndWidth } from "./utils/calc";
-import { AxisLabel } from "./utils/types.external";
+import { AxisLabel, AxisLabelTemplates } from "./utils/types.external";
 
 export const dayLabels = (
   start: Date,
   end: Date,
   totalDays: number,
-  direction: "left" | "right"
+  direction: "left" | "right",
+  template: string = "dd.MM"
 ): AxisLabel[] => {
   const increment = Math.ceil(totalDays / 10);
   const lastDay = startOfDay(end);
@@ -43,7 +44,7 @@ export const dayLabels = (
       return {
         direction: direction,
         horizontalPosition: horizontalPosition,
-        label: format(day, "dd.MM", { locale: nbLocale }),
+        label: format(day, template, { locale: nbLocale }),
         date: day,
         width: width,
       };
@@ -54,7 +55,8 @@ export const dayLabels = (
 export const monthLabels = (
   start: Date,
   end: Date,
-  direction: "left" | "right"
+  direction: "left" | "right",
+  template: string = "MMM yy"
 ): AxisLabel[] => {
   const startMonth = startOfMonth(start);
   const endMonth = endOfMonth(end);
@@ -70,7 +72,7 @@ export const monthLabels = (
     return {
       direction: direction,
       horizontalPosition: horizontalPosition,
-      label: format(month, "MMM yy", { locale: nbLocale }),
+      label: format(month, template, { locale: nbLocale }),
       date: month,
       width: width,
     };
@@ -80,7 +82,8 @@ export const monthLabels = (
 export const yearLabels = (
   start: Date,
   end: Date,
-  direction: "left" | "right"
+  direction: "left" | "right",
+  template: string = "yyyy"
 ): AxisLabel[] => {
   const firstYear = startOfYear(start);
   const lastYear = endOfYear(end);
@@ -96,7 +99,7 @@ export const yearLabels = (
     return {
       direction: direction,
       horizontalPosition: horizontalPosition,
-      label: year.getFullYear().toString(),
+      label: format(year, template, { locale: nbLocale }),
       date: year,
       width: width,
     };
@@ -106,21 +109,28 @@ export const yearLabels = (
 const axisLabels = (
   start: Date,
   end: Date,
-  direction: "left" | "right"
+  direction: "left" | "right",
+  templates?: AxisLabelTemplates
 ): AxisLabel[] => {
   const totalDays = differenceInDays(end, start);
   if (totalDays < 40) {
-    return dayLabels(start, end, totalDays, direction);
+    return dayLabels(start, end, totalDays, direction, templates?.day);
   } else if (totalDays < 370) {
-    return monthLabels(start, end, direction);
+    return monthLabels(start, end, direction, templates?.month);
   } else {
-    return yearLabels(start, end, direction);
+    return yearLabels(start, end, direction, templates?.year);
   }
 };
 
-export const AxisLabels = () => {
+export const AxisLabels = ({
+  templates,
+}: {
+  templates?: AxisLabelTemplates;
+}) => {
   const { endDate, startDate, direction } = useTimelineContext();
-  const labels = axisLabels(startDate, endDate, direction).filter(isVisible);
+  const labels = axisLabels(startDate, endDate, direction, templates).filter(
+    isVisible
+  );
 
   return (
     <div className="navds-timeline__axislabels" aria-hidden="true">

package/src/timeline/Timeline.tsx

@@ -13,6 +13,7 @@ import Pin, { PinType } from "./Pin";
 import TimelineRow, { TimelineRowType } from "./TimelineRow";
 import { parseRows } from "./utils/timeline";
 import Zoom, { ZoomType } from "./zoom";
+import { AxisLabelTemplates } from "./utils/types.external";
 
 export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
@@ -33,6 +34,11 @@ export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
    * @default "left"
    */
   direction?: "left" | "right";
+  /**
+   * Templates for label texts. The templates are passed to the date-fns `format` function.
+   * Defaults to { day: "dd.MM", month: "MMM yy", year: "yyyy" }.
+   */
+  axisLabelTemplates?: AxisLabelTemplates;
 }
 
 interface TimelineComponent
@@ -74,7 +80,17 @@ interface TimelineComponent
  * ```
  */
 export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
-  ({ children, startDate, endDate, direction = "left", ...rest }, ref) => {
+  (
+    {
+      children,
+      startDate,
+      endDate,
+      direction = "left",
+      axisLabelTemplates,
+      ...rest
+    },
+    ref
+  ) => {
     const isMultipleRows = Array.isArray(children);
 
     const firstFocusabled = useRef<
@@ -194,7 +210,7 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
       >
         <div {...rest} ref={ref}>
           <div className="navds-timeline">
-            <AxisLabels />
+            <AxisLabels templates={axisLabelTemplates} />
 
             {pins.map((pin) => {
               return pin;

package/src/timeline/utils/types.external.ts

@@ -65,3 +65,9 @@ export interface SimplePeriod {
    */
   end: Date;
 }
+
+export type AxisLabelTemplates = {
+  day?: string;
+  month?: string;
+  year?: string;
+};

package/src/util/usePrevious.ts

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from "react";
+
+/*
+ * usePrevious hook
+ * The ref object's "current" property is mutable and when changed wont re-render the component
+ * meaning it can be used to stay "one render behind" the current state
+ * https://usehooks.com/usePrevious/
+ * https://blog.logrocket.com/accessing-previous-props-state-react-hooks/
+ */
+
+const usePrevious = <T>(value: T): T | undefined => {
+  const ref = useRef<T>(value);
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+};
+
+export default usePrevious;