@navikt/ds-react 4.6.0 → 4.7.0

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;