@norges-domstoler/dds-components 4.0.2 → 4.2.0

package/dist/types/BaseComponentProps.js

@@ -0,0 +1,72 @@
+import { __rest } from 'tslib';
+
+var joinClassNames = function joinClassNames() {
+  for (var _len = arguments.length, classNames = new Array(_len), _key = 0; _key < _len; _key++) {
+    classNames[_key] = arguments[_key];
+  }
+
+  return classNames.filter(Boolean).join(' ');
+};
+/**
+ * Slår sammen id, className, htmlProps og unknownProps til ett objekt
+ * som kan spreades som baseprops for en komponent. `unknownProps` er
+ * med for å sikre at aria- og data- attributter blir spreadet, alle
+ * komponenter må derfor ta hensyn til `...rest` når de leser props.
+ *
+ * Typisk bruk:
+ * ```
+ * const Props = BaseComponentProps<HTMLElement, {
+ *   propA: string,
+ *   propB: string,
+ * }>
+ *
+ * const MyComponent = (props: Props) => {
+ *   const { propA, propB, id, className, htmlProps, ...rest } = props;
+ *
+ *   const wrapperProps = getBaseHTMLProps(id, className, htmlProps, rest)
+ *
+ *   return <div {...wrapperProps}>innhold</div>
+ * }
+ * ```
+ * @param id id fra props til komponenten.
+ * @param className className for komponenten.
+ * @param htmlProps htmlProps fra komponenten.
+ * @param unknownProps andre ukjente props som skal spreades, kommer typisk fra `...rest` når man leser props til komponenten.
+ * @returns Objekt med alle argumentene som kan spreades.
+ *
+ * Kan også kalles uten `className`-parameteret. Oppførselen er lik.
+ */
+
+var getBaseHTMLProps = function getBaseHTMLProps(id, htmlPropsOrClassName, htmlPropsOrUnknownProps, unknownPropsOrUndefined) {
+  var _a, _b;
+
+  if (typeof htmlPropsOrClassName === 'string' || unknownPropsOrUndefined != undefined) {
+    var _c = (_a = htmlPropsOrUnknownProps) !== null && _a !== void 0 ? _a : {},
+        idFromHtmlProps = _c.id,
+        classNameFromHtmlProps = _c.className,
+        restHTMLProps = __rest(_c, ["id", "className"]);
+
+    var propId = id !== null && id !== void 0 ? id : idFromHtmlProps;
+    var propClassName = joinClassNames(htmlPropsOrClassName, classNameFromHtmlProps);
+    return Object.assign(Object.assign(Object.assign(Object.assign({}, unknownPropsOrUndefined), restHTMLProps), propClassName && {
+      className: propClassName
+    }), propId && {
+      id: propId
+    });
+  } else {
+    var _d = (_b = htmlPropsOrClassName) !== null && _b !== void 0 ? _b : {},
+        htmlPropsId = _d.id,
+        htmlPropsClassName = _d.className,
+        _restHTMLProps = __rest(_d, ["id", "className"]);
+
+    var _propId = id !== null && id !== void 0 ? id : htmlPropsId;
+
+    return Object.assign(Object.assign(Object.assign(Object.assign({}, htmlPropsOrUnknownProps), _restHTMLProps), htmlPropsClassName && {
+      className: htmlPropsClassName
+    }), _propId && {
+      id: _propId
+    });
+  }
+};
+
+export { getBaseHTMLProps, joinClassNames };

package/dist/utils/color.js

@@ -0,0 +1,9 @@
+var changeRGBAAlpha = function changeRGBAAlpha(value, alpha) {
+  if (value.slice(0, 5) !== 'rgba(' || value.slice(-1) !== ')') {
+    return '';
+  }
+
+  return value.replace(/[\d\.]+\)$/g, alpha.toString() + ')');
+};
+
+export { changeRGBAAlpha };

package/dist/utils/combineHandlers.js

@@ -0,0 +1,10 @@
+var combineHandlers = function combineHandlers(handler1, handler2) {
+  var callback = function callback(event) {
+    handler1 && handler1(event);
+    handler2 && handler2(event);
+  };
+
+  return callback;
+};
+
+export { combineHandlers };

package/dist/utils/idGenerator.d.ts

@@ -1,3 +1,3 @@
-export declare const derivativeIdGenerator: (prefix: string, suffix: string, value?: string | number) => string | undefined;
+export declare const derivativeIdGenerator: (prefix: string, suffix: string, value?: string | number | boolean) => string | undefined;
 export declare const idArrayGenerator: (values: (string | undefined)[]) => string[] | undefined;
 export declare const spaceSeparatedIdListGenerator: (values: (string | undefined)[]) => string | undefined;

package/dist/utils/idGenerator.js

@@ -0,0 +1,19 @@
+var derivativeIdGenerator = function derivativeIdGenerator(prefix, suffix, value) {
+  return value ? "".concat(prefix, "-").concat(suffix) : undefined;
+};
+var idArrayGenerator = function idArrayGenerator(values) {
+  var array = [];
+  values.forEach(function (e) {
+    if (e) {
+      array.push(e);
+    }
+  });
+  return array.length > 0 ? array : undefined;
+};
+var spaceSeparatedIdListGenerator = function spaceSeparatedIdListGenerator(values) {
+  var _a;
+
+  return (_a = idArrayGenerator(values)) === null || _a === void 0 ? void 0 : _a.join(' ');
+};
+
+export { derivativeIdGenerator, idArrayGenerator, spaceSeparatedIdListGenerator };

package/dist/utils/text.js

@@ -0,0 +1,5 @@
+var calculateHeightWithLineHeight = function calculateHeightWithLineHeight(lineHeight, fontSize) {
+  return lineHeight * 0.01 * fontSize;
+};
+
+export { calculateHeightWithLineHeight };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "4.0.2",
+  "version": "4.2.0",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",
@@ -8,13 +8,18 @@
     "type": "git",
     "url": "https://github.com/domstolene/designsystem"
   },
-  "main": "dist/index.js",
-  "module": "dist/index.es.js",
+  "sideEffects": [
+    "dist/index.js",
+    "*.css"
+  ],
+  "main": "dist/cjs/index.js",
+  "module": "dist/index.js",
   "files": [
     "dist"
   ],
   "homepage": "https://design.domstol.no",
   "scripts": {
+    "clean": "rm -r dist || :",
     "test": "jest --no-cache",
     "test:watch": "jest --no-cache --watch",
     "build": "rollup -c",
@@ -23,7 +28,8 @@
     "build-storybook": "build-storybook -o docs",
     "lint": "eslint --ext=jsx,ts,tsx src",
     "prettier": "prettier --write '**/*.{ts,tsx}'",
-    "check:types": "tsc --noEmit"
+    "check:types": "tsc --noEmit",
+    "build:clean": "npm run clean && npm run build"
   },
   "keywords": [
     "dds",
@@ -56,7 +62,7 @@
     "@testing-library/user-event": "^14.1.0",
     "@types/jest": "^27.4.1",
     "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.2",
+    "@types/react-dom": "^18.0.6",
     "@types/styled-components": "^5.1.9",
     "@typescript-eslint/eslint-plugin": "^5.19.0",
     "@typescript-eslint/parser": "^5.19.0",
@@ -74,14 +80,15 @@
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-import-css": "^3.0.3",
     "rollup-plugin-sass": "^1.2.12",
-    "rollup-plugin-typescript2": "^0.31.2",
+    "rollup-plugin-typescript2": "^0.32.1",
     "ts-jest": "^27.1.4",
-    "tslib": "^2.3.1",
     "typescript": "^4.6.3"
   },
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react": "^16 || ^17 || ^18",
+    "react-dom": "^16 || ^17 || ^18",
+    "styled-components": "^5",
+    "@norges-domstoler/dds-design-tokens": "^1"
   },
   "jest": {
     "preset": "ts-jest",
@@ -104,12 +111,11 @@
   "dependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@floating-ui/react-dom": "^0.6.3",
+    "@floating-ui/react-dom": "^0.7.2",
     "@mui/icons-material": "^5.6.2",
     "@mui/material": "^5.6.3",
-    "@norges-domstoler/dds-design-tokens": "^1.2.0",
     "focus-visible": "^5.2.0",
     "react-select": "^5.3.0",
-    "styled-components": "^5.3.5"
+    "tslib": "^2.4.0"
   }
 }