@helsenorge/designsystem-react 10.0.2 → 10.2.0

package/utils/accessibility.d.ts

@@ -2,6 +2,7 @@ import { AriaAttributes } from 'react';
 interface AriaLabelAttributesConfig {
     label?: string;
     id?: string;
+    fallbackId?: string;
     prefer?: 'id' | 'label';
 }
 export type AriaLabelAttributes = Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'>;

package/utils/accessibility.js

@@ -1,5 +1,5 @@
 const getAriaLabelAttributes = (config) => {
-  const { label, id, prefer = "id" } = config;
+  const { label, id, fallbackId, prefer = "id" } = config;
   if (id && prefer === "id") {
     return {
       "aria-labelledby": id
@@ -15,6 +15,11 @@ const getAriaLabelAttributes = (config) => {
       "aria-labelledby": id
     };
   }
+  if (fallbackId) {
+    return {
+      "aria-labelledby": fallbackId
+    };
+  }
 };
 const getAriaDescribedBy = (props, errorTextUuid) => {
   const ariaDescribedBy = props["aria-describedby"];

package/utils/accessibility.js.map

@@ -1 +1 @@
-{"version":3,"file":"accessibility.js","sources":["../../src/utils/accessibility.ts"],"sourcesContent":["import { AriaAttributes } from 'react';\n\ninterface AriaLabelAttributesConfig {\n  label?: string;\n  id?: string;\n  prefer?: 'id' | 'label';\n}\n\nexport type AriaLabelAttributes = Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'>;\n\nexport const getAriaLabelAttributes = (config: AriaLabelAttributesConfig): AriaLabelAttributes | undefined => {\n  const { label, id, prefer = 'id' } = config;\n\n  if (id && prefer === 'id') {\n    return {\n      'aria-labelledby': id,\n    };\n  }\n\n  if (label) {\n    return {\n      'aria-label': label,\n    };\n  }\n\n  if (id) {\n    return {\n      'aria-labelledby': id,\n    };\n  }\n};\n\nexport interface ErrorAriaProps {\n  error?: boolean;\n  'aria-describedby'?: string;\n  errorText?: string;\n  errorTextId?: string;\n}\n\n/**\n * Get IDs to be used with aria-describedby in form components like <Input />\n * @param props Props from form component\n * @param errorTextUuid Unique ID of the form component's error text\n * @returns Element IDs or undefined if there is no aria-description\n */\nexport const getAriaDescribedBy = (props: ErrorAriaProps, errorTextUuid: string): string | undefined => {\n  const ariaDescribedBy: string | undefined = props['aria-describedby'];\n  const hasErrorText: boolean = !!(props.errorText || (props.error && props.errorTextId));\n  const errorTextId: string | undefined = hasErrorText ? errorTextUuid : undefined;\n\n  if (ariaDescribedBy && !errorTextId) {\n    return ariaDescribedBy;\n  } else if (!ariaDescribedBy && errorTextId) {\n    return errorTextId;\n  } else if (ariaDescribedBy && errorTextId) {\n    return ariaDescribedBy + ' ' + errorTextId;\n  }\n};\n"],"names":[],"mappings":"AAUa,MAAA,yBAAyB,CAAC,WAAuE;AAC5G,QAAM,EAAE,OAAO,IAAI,SAAS,KAAS,IAAA;AAEjC,MAAA,MAAM,WAAW,MAAM;AAClB,WAAA;AAAA,MACL,mBAAmB;AAAA,IACrB;AAAA,EAAA;AAGF,MAAI,OAAO;AACF,WAAA;AAAA,MACL,cAAc;AAAA,IAChB;AAAA,EAAA;AAGF,MAAI,IAAI;AACC,WAAA;AAAA,MACL,mBAAmB;AAAA,IACrB;AAAA,EAAA;AAEJ;AAea,MAAA,qBAAqB,CAAC,OAAuB,kBAA8C;AAChG,QAAA,kBAAsC,MAAM,kBAAkB;AACpE,QAAM,eAAwB,CAAC,EAAE,MAAM,aAAc,MAAM,SAAS,MAAM;AACpE,QAAA,cAAkC,eAAe,gBAAgB;AAEnE,MAAA,mBAAmB,CAAC,aAAa;AAC5B,WAAA;AAAA,EAAA,WACE,CAAC,mBAAmB,aAAa;AACnC,WAAA;AAAA,EAAA,WACE,mBAAmB,aAAa;AACzC,WAAO,kBAAkB,MAAM;AAAA,EAAA;AAEnC;"}
+{"version":3,"file":"accessibility.js","sources":["../../src/utils/accessibility.ts"],"sourcesContent":["import { AriaAttributes } from 'react';\n\ninterface AriaLabelAttributesConfig {\n  label?: string;\n  id?: string;\n  fallbackId?: string;\n  prefer?: 'id' | 'label';\n}\n\nexport type AriaLabelAttributes = Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'>;\n\nexport const getAriaLabelAttributes = (config: AriaLabelAttributesConfig): AriaLabelAttributes | undefined => {\n  const { label, id, fallbackId, prefer = 'id' } = config;\n\n  if (id && prefer === 'id') {\n    return {\n      'aria-labelledby': id,\n    };\n  }\n\n  if (label) {\n    return {\n      'aria-label': label,\n    };\n  }\n\n  if (id) {\n    return {\n      'aria-labelledby': id,\n    };\n  }\n\n  if (fallbackId) {\n    return {\n      'aria-labelledby': fallbackId,\n    };\n  }\n};\n\nexport interface ErrorAriaProps {\n  error?: boolean;\n  'aria-describedby'?: string;\n  errorText?: string;\n  errorTextId?: string;\n}\n\n/**\n * Get IDs to be used with aria-describedby in form components like <Input />\n * @param props Props from form component\n * @param errorTextUuid Unique ID of the form component's error text\n * @returns Element IDs or undefined if there is no aria-description\n */\nexport const getAriaDescribedBy = (props: ErrorAriaProps, errorTextUuid: string): string | undefined => {\n  const ariaDescribedBy: string | undefined = props['aria-describedby'];\n  const hasErrorText: boolean = !!(props.errorText || (props.error && props.errorTextId));\n  const errorTextId: string | undefined = hasErrorText ? errorTextUuid : undefined;\n\n  if (ariaDescribedBy && !errorTextId) {\n    return ariaDescribedBy;\n  } else if (!ariaDescribedBy && errorTextId) {\n    return errorTextId;\n  } else if (ariaDescribedBy && errorTextId) {\n    return ariaDescribedBy + ' ' + errorTextId;\n  }\n};\n"],"names":[],"mappings":"AAWa,MAAA,yBAAyB,CAAC,WAAuE;AAC5G,QAAM,EAAE,OAAO,IAAI,YAAY,SAAS,SAAS;AAE7C,MAAA,MAAM,WAAW,MAAM;AAClB,WAAA;AAAA,MACL,mBAAmB;AAAA,IACrB;AAAA,EAAA;AAGF,MAAI,OAAO;AACF,WAAA;AAAA,MACL,cAAc;AAAA,IAChB;AAAA,EAAA;AAGF,MAAI,IAAI;AACC,WAAA;AAAA,MACL,mBAAmB;AAAA,IACrB;AAAA,EAAA;AAGF,MAAI,YAAY;AACP,WAAA;AAAA,MACL,mBAAmB;AAAA,IACrB;AAAA,EAAA;AAEJ;AAea,MAAA,qBAAqB,CAAC,OAAuB,kBAA8C;AAChG,QAAA,kBAAsC,MAAM,kBAAkB;AACpE,QAAM,eAAwB,CAAC,EAAE,MAAM,aAAc,MAAM,SAAS,MAAM;AACpE,QAAA,cAAkC,eAAe,gBAAgB;AAEnE,MAAA,mBAAmB,CAAC,aAAa;AAC5B,WAAA;AAAA,EAAA,WACE,CAAC,mBAAmB,aAAa;AACnC,WAAA;AAAA,EAAA,WACE,mBAAmB,aAAa;AACzC,WAAO,kBAAkB,MAAM;AAAA,EAAA;AAEnC;"}

package/utils/component.js

@@ -1,8 +1,8 @@
-import React from "react";
-const isComponent = (element, type) => React.isValidElement(element) && element.type === type;
-const isComponentWithChildren = (element) => React.isValidElement(element);
+import React__default from "react";
+const isComponent = (element, type) => React__default.isValidElement(element) && element.type === type;
+const isComponentWithChildren = (element) => React__default.isValidElement(element);
 function isComponentWithDisplayName(element, displayName) {
-  if (!React.isValidElement(element) || typeof element.type === "string") {
+  if (!React__default.isValidElement(element) || typeof element.type === "string") {
     return false;
   }
   const componentType = element.type;

package/utils/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../src/utils/component.ts"],"sourcesContent":["import React, { PropsWithChildren } from 'react';\n\nexport const isComponent = <T>(\n  element: {} | null | undefined,\n  type: React.ForwardRefExoticComponent<T> | React.FunctionComponent<T>\n): element is React.ReactElement<T> => React.isValidElement<T>(element) && (element as React.ReactElement).type === type;\n\nexport const isComponentWithChildren = <T>(element: {} | null | undefined): element is React.ReactElement<PropsWithChildren<T>> =>\n  React.isValidElement<PropsWithChildren<T>>(element);\n\nexport function isComponentWithDisplayName<T>(element: React.ReactNode, displayName: string): element is React.ReactElement<T> {\n  if (!React.isValidElement(element) || typeof element.type === 'string') {\n    return false;\n  }\n\n  const componentType = element.type as React.ComponentType<T> & { displayName?: string };\n\n  return componentType.displayName === displayName;\n}\n"],"names":[],"mappings":";AAEa,MAAA,cAAc,CACzB,SACA,SACqC,MAAM,eAAkB,OAAO,KAAM,QAA+B,SAAS;AAE7G,MAAM,0BAA0B,CAAI,YACzC,MAAM,eAAqC,OAAO;AAEpC,SAAA,2BAA8B,SAA0B,aAAuD;AACzH,MAAA,CAAC,MAAM,eAAe,OAAO,KAAK,OAAO,QAAQ,SAAS,UAAU;AAC/D,WAAA;AAAA,EAAA;AAGT,QAAM,gBAAgB,QAAQ;AAE9B,SAAO,cAAc,gBAAgB;AACvC;"}
+{"version":3,"file":"component.js","sources":["../../src/utils/component.ts"],"sourcesContent":["import React, { PropsWithChildren } from 'react';\n\nexport const isComponent = <T>(\n  element: {} | null | undefined,\n  type: React.ForwardRefExoticComponent<T> | React.FunctionComponent<T>\n): element is React.ReactElement<T> => React.isValidElement<T>(element) && (element as React.ReactElement).type === type;\n\nexport const isComponentWithChildren = <T>(element: {} | null | undefined): element is React.ReactElement<PropsWithChildren<T>> =>\n  React.isValidElement<PropsWithChildren<T>>(element);\n\nexport function isComponentWithDisplayName<T>(element: React.ReactNode, displayName: string): element is React.ReactElement<T> {\n  if (!React.isValidElement(element) || typeof element.type === 'string') {\n    return false;\n  }\n\n  const componentType = element.type as React.ComponentType<T> & { displayName?: string };\n\n  return componentType.displayName === displayName;\n}\n"],"names":["React"],"mappings":";AAEa,MAAA,cAAc,CACzB,SACA,SACqCA,eAAM,eAAkB,OAAO,KAAM,QAA+B,SAAS;AAE7G,MAAM,0BAA0B,CAAI,YACzCA,eAAM,eAAqC,OAAO;AAEpC,SAAA,2BAA8B,SAA0B,aAAuD;AACzH,MAAA,CAACA,eAAM,eAAe,OAAO,KAAK,OAAO,QAAQ,SAAS,UAAU;AAC/D,WAAA;AAAA,EAAA;AAGT,QAAM,gBAAgB,QAAQ;AAE9B,SAAO,cAAc,gBAAgB;AACvC;"}