@norges-domstoler/dds-components 10.1.0 → 10.1.1

package/dist/components/DescriptionList/DescriptionList.js

@@ -19,7 +19,7 @@ var DList = styled.dl.withConfig({
   componentId: "sc-1ob73hm-0"
 })(["margin:0;*::selection{", "}", " & > dt:first-of-type{margin-top:", ";}& > dd:last-child{margin-bottom:", ";}dd + dt{margin-top:", ";}"], selection, function (_ref) {
   var appearance = _ref.appearance;
-  return appearance && css(["dt{color:", ";", " ", ""], term.appearance[appearance].color, getFontStyling(termTypographyTypes[appearance]), appearance === 'bold' && css(["font-weight:600;"]));
+  return appearance && css(["dt{color:", ";", " ", "}"], term.appearance[appearance].color, getFontStyling(termTypographyTypes[appearance]), appearance === 'bold' && css(["font-weight:600;"]));
 }, term.firstOfType.marginTop, desc.lastChild.marginBottom, list.beforeNextTerm.marginTop);
 var DescriptionList = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$appearance = props.appearance,

package/dist/components/FileUploader/ErrorList.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { InputMessage } from '../InputMessage/InputMessage.js';
+import { errorsTokens } from './FileUploader.tokens.js';
+
+var MessageContainer = styled.div.withConfig({
+  displayName: "ErrorList__MessageContainer",
+  componentId: "sc-tndb6q-0"
+})(["display:flex;flex-direction:column;gap:", ";"], errorsTokens.gap);
+var ErrorList = function ErrorList(props) {
+  var errors = props.errors;
+  if (errors.length < 1) {
+    return null;
+  }
+  return jsx(MessageContainer, {
+    children: errors.map(function (_ref) {
+      var id = _ref.id,
+        message = _ref.message;
+      return jsx(InputMessage, {
+        id: id,
+        message: message,
+        messageType: "error"
+      }, id);
+    })
+  });
+};
+
+export { ErrorList, MessageContainer };

package/dist/components/FileUploader/File.js

@@ -0,0 +1,69 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import 'tslib';
+import '../../icons/utils/StyledSvg.js';
+import { CloseIcon } from '../../icons/tsx/close.js';
+import { derivativeIdGenerator, spaceSeparatedIdListGenerator } from '../../utils/idGenerator.js';
+import '../../utils/color.js';
+import { Button } from '../Button/Button.js';
+import { ErrorList } from './ErrorList.js';
+import { fileTokens } from './FileUploader.tokens.js';
+
+var FileWrapper = styled.li.withConfig({
+  displayName: "File__FileWrapper",
+  componentId: "sc-1mozy6v-0"
+})([""]);
+var FileNameWrapper = styled.span.withConfig({
+  displayName: "File__FileNameWrapper",
+  componentId: "sc-1mozy6v-1"
+})(["word-break:break-all;"]);
+var FileElement = styled.div.withConfig({
+  displayName: "File__FileElement",
+  componentId: "sc-1mozy6v-2"
+})(["border-width:2px;border-style:solid;border-color:", ";margin-top:", ";padding:", " ", ";background-color:", ";display:flex;justify-content:space-between;align-items:center;gap:", ";"], function (_ref) {
+  var isValid = _ref.isValid;
+  return isValid ? fileTokens.backgroundColor : fileTokens.invalid.borderColor;
+}, fileTokens.marginTop, fileTokens.paddingLeftRight, fileTokens.paddingTopBottom, fileTokens.backgroundColor, fileTokens.textToIconsGap);
+var RemoveFileButton = styled(Button).withConfig({
+  displayName: "File__RemoveFileButton",
+  componentId: "sc-1mozy6v-3"
+})(["padding:0;"]);
+var File = function File(props) {
+  var parentId = props.parentId,
+    index = props.index,
+    stateFile = props.file,
+    removeFile = props.removeFile,
+    isValid = props.isValid;
+  var errorsList = stateFile.errors.map(function (e, errorIndex) {
+    return {
+      id: derivativeIdGenerator(parentId, "file-".concat(index, "-error-").concat(errorIndex)),
+      message: e
+    };
+  });
+  return jsxs(FileWrapper, {
+    children: [jsxs(FileElement, Object.assign({}, props, {
+      children: [jsx(FileNameWrapper, {
+        children: stateFile.file.name
+      }), jsx(RemoveFileButton, {
+        size: "small",
+        appearance: "borderless",
+        purpose: "secondary",
+        type: "button",
+        onClick: removeFile,
+        icon: CloseIcon,
+        htmlProps: {
+          'aria-label': "Fjern fil, ".concat(stateFile.file.name),
+          'aria-invalid': !isValid ? true : undefined,
+          'aria-errormessage': !isValid ? 'Ugyldig fil' : undefined,
+          'aria-describedby': spaceSeparatedIdListGenerator(errorsList.map(function (e) {
+            return e.id;
+          }))
+        }
+      })]
+    })), jsx(ErrorList, {
+      errors: errorsList
+    })]
+  }, stateFile.file.name);
+};
+
+export { File };

package/dist/components/FileUploader/FileUploader.js

@@ -0,0 +1,153 @@
+import { toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useId, useEffect } from 'react';
+import styled from 'styled-components';
+import 'tslib';
+import '../../icons/utils/StyledSvg.js';
+import { UploadIcon } from '../../icons/tsx/upload.js';
+import { derivativeIdGenerator, spaceSeparatedIdListGenerator } from '../../utils/idGenerator.js';
+import '../../utils/color.js';
+import { Button } from '../Button/Button.js';
+import { InputMessage } from '../InputMessage/InputMessage.js';
+import '../Typography/Typography/Typography.js';
+import { Label } from '../Typography/Label/Label.js';
+import '../Typography/Link/Link.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
+import { ErrorList } from './ErrorList.js';
+import { File } from './File.js';
+import { rootTokens } from './FileUploader.tokens.js';
+import { useFileUploader } from './useFileUploader.js';
+
+var defaultWidth = '320px';
+var Wrapper = styled.div.withConfig({
+  displayName: "FileUploader__Wrapper",
+  componentId: "sc-pcnrgy-0"
+})(["width:", ";"], function (_ref) {
+  var width = _ref.width;
+  return width ? width : defaultWidth;
+});
+var Root = styled.div.withConfig({
+  displayName: "FileUploader__Root",
+  componentId: "sc-pcnrgy-1"
+})(["box-sizing:border-box;border-width:", ";border-style:dashed;border-color:", ";padding:", ";display:flex;flex-direction:column;gap:", ";background-color:", ";"], function (_ref2) {
+  var hasRootErrors = _ref2.hasRootErrors;
+  return hasRootErrors ? '2px' : '1px';
+}, function (_ref3) {
+  var isDragActive = _ref3.isDragActive,
+    hasRootErrors = _ref3.hasRootErrors;
+  return isDragActive ? rootTokens.dragActive.borderColor : hasRootErrors ? rootTokens.borderColorError : rootTokens.borderColor;
+}, function (_ref4) {
+  var hasRootErrors = _ref4.hasRootErrors;
+  return hasRootErrors ? "calc(".concat(rootTokens.paddingLeftRightTop, " - 1px) calc(").concat(rootTokens.paddingLeftRightTop, " - 1px) ").concat(rootTokens.paddingBottom) : "".concat(rootTokens.paddingLeftRightTop, " ").concat(rootTokens.paddingLeftRightTop, " ").concat(rootTokens.paddingBottom);
+}, rootTokens.gap, function (_ref5) {
+  var isDragActive = _ref5.isDragActive;
+  return isDragActive ? rootTokens.dragActive.backgroundColor : rootTokens.backgroundColor;
+});
+var FileUploaderInput = styled.input.withConfig({
+  displayName: "FileUploader__FileUploaderInput",
+  componentId: "sc-pcnrgy-2"
+})([""]);
+var FileListElement = styled.ul.withConfig({
+  displayName: "FileUploader__FileListElement",
+  componentId: "sc-pcnrgy-3"
+})(["margin:0;padding:0;list-style-type:none;"]);
+var FileUploader = function FileUploader(props) {
+  var id = props.id,
+    label = props.label,
+    tip = props.tip,
+    _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
+    initialFiles = props.initialFiles,
+    accept = props.accept,
+    maxFiles = props.maxFiles,
+    disabled = props.disabled,
+    onChange = props.onChange,
+    width = props.width;
+  var generatedId = useId();
+  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-fileUploader");
+  var _useFileUploader = useFileUploader({
+      id: id,
+      initialFiles: initialFiles,
+      accept: accept,
+      disabled: disabled,
+      maxFiles: maxFiles
+    }),
+    _useFileUploader$stat = _useFileUploader.state,
+    stateFiles = _useFileUploader$stat.files,
+    isDragActive = _useFileUploader$stat.isDragActive,
+    rootErrors = _useFileUploader$stat.rootErrors,
+    getRootProps = _useFileUploader.getRootProps,
+    getInputProps = _useFileUploader.getInputProps,
+    getButtonProps = _useFileUploader.getButtonProps,
+    _removeFile = _useFileUploader.removeFile;
+  useEffect(function () {
+    onChange(stateFiles.map(function (f) {
+      return f.file;
+    }));
+  }, [stateFiles]);
+  var hasLabel = label !== undefined;
+  var hasTip = tip !== undefined;
+  var hasRootErrors = rootErrors.length > 0;
+  var showRequiredMarker = required;
+  var tipId = derivativeIdGenerator(uniqueId, 'tip');
+  var fileListElements = stateFiles.map(function (stateFile, index) {
+    return jsx(File, {
+      parentId: uniqueId,
+      index: index,
+      file: stateFile,
+      isValid: stateFile.errors.length === 0,
+      removeFile: function removeFile() {
+        return _removeFile(stateFile);
+      }
+    }, stateFile.file.name);
+  });
+  var rootErrorsList = rootErrors.map(function (e, index) {
+    return {
+      id: derivativeIdGenerator(uniqueId, "error-".concat(index)),
+      message: e
+    };
+  });
+  return jsxs(Wrapper, Object.assign({
+    width: width
+  }, {
+    children: [hasLabel && jsx(Label, Object.assign({
+      showRequiredStyling: showRequiredMarker,
+      htmlFor: uniqueId
+    }, {
+      children: label
+    })), hasTip && jsx(InputMessage, {
+      id: tipId,
+      message: tip,
+      messageType: "tip"
+    }), jsxs(Root, Object.assign({}, getRootProps(), {
+      isDragActive: isDragActive,
+      hasRootErrors: rootErrors.length > 0
+    }, {
+      children: [jsx(FileUploaderInput, Object.assign({}, getInputProps())), "Dra og slipp filer her eller", ' ', jsx(VisuallyHidden, Object.assign({
+        as: "span"
+      }, {
+        children: "velg fil med p\xE5f\xF8lgende knapp"
+      })), jsx(Button, Object.assign({}, getButtonProps(), {
+        id: uniqueId,
+        size: "medium",
+        type: "button",
+        appearance: "filled",
+        purpose: "secondary",
+        label: "Velg fil",
+        icon: UploadIcon,
+        htmlProps: {
+          'aria-invalid': hasRootErrors ? true : undefined,
+          'aria-describedby': spaceSeparatedIdListGenerator([hasTip ? tipId : undefined].concat(_toConsumableArray(rootErrorsList.map(function (e) {
+            return e.id;
+          }))))
+        }
+      }))]
+    })), jsx(ErrorList, {
+      errors: rootErrorsList
+    }), jsx(FileListElement, {
+      children: fileListElements
+    })]
+  }));
+};
+
+export { FileUploader };

package/dist/components/FileUploader/FileUploader.tokens.js

@@ -0,0 +1,31 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var colors = ddsBaseTokens.colors,
+  spacing = ddsBaseTokens.spacing;
+var rootTokens = {
+  borderColor: colors.DdsColorNeutralsGray5,
+  borderColorError: colors.DdsColorDangerBase,
+  paddingLeftRightTop: spacing.SizesDdsSpacingLocalX15,
+  paddingBottom: spacing.SizesDdsSpacingLocalX2,
+  gap: spacing.SizesDdsSpacingLocalX1,
+  backgroundColor: colors.DdsColorNeutralsWhite,
+  dragActive: {
+    borderColor: colors.DdsColorInteractiveBase,
+    backgroundColor: colors.DdsColorInteractiveLightest
+  }
+};
+var fileTokens = {
+  marginTop: spacing.SizesDdsSpacingLocalX05,
+  paddingLeftRight: spacing.SizesDdsSpacingLocalX05,
+  paddingTopBottom: spacing.SizesDdsSpacingLayoutX1,
+  backgroundColor: colors.DdsColorNeutralsGray1,
+  textToIconsGap: spacing.SizesDdsSpacingLocalX075,
+  invalid: {
+    borderColor: colors.DdsColorDangerBase
+  }
+};
+var errorsTokens = {
+  gap: spacing.SizesDdsSpacingLocalX025
+};
+
+export { errorsTokens, fileTokens, rootTokens };

package/dist/components/FileUploader/fileUploaderReducer.js

@@ -0,0 +1,35 @@
+var fileUploaderReducer = function fileUploaderReducer(state, action) {
+  switch (action.type) {
+    case 'focus':
+      return Object.assign(Object.assign({}, state), {
+        isFocused: true
+      });
+    case 'blur':
+      return Object.assign(Object.assign({}, state), {
+        isFocused: false
+      });
+    case 'dragEnter':
+      return Object.assign(Object.assign({}, state), {
+        isDragActive: true
+      });
+    case 'dragLeave':
+      return Object.assign(Object.assign({}, state), {
+        isDragActive: false
+      });
+    case 'onSetFiles':
+      return Object.assign(Object.assign({}, state), {
+        isDragActive: false,
+        rootErrors: action.payload.rootErrors,
+        files: action.payload.files
+      });
+    case 'onRemoveFile':
+      return Object.assign(Object.assign({}, state), {
+        rootErrors: action.payload.rootErrors,
+        files: action.payload.files
+      });
+    default:
+      return state;
+  }
+};
+
+export { fileUploaderReducer };

package/dist/components/FileUploader/useFileUploader.js

@@ -0,0 +1,202 @@
+import { slicedToArray as _slicedToArray, regeneratorRuntime as _regeneratorRuntime, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { __awaiter } from 'tslib';
+import { useRef, useReducer, useCallback } from 'react';
+import { fileUploaderReducer } from './fileUploaderReducer.js';
+import { fromEvent } from 'file-selector';
+import { preventDefaults, isEventWithFiles, isFileAccepted, getInvalidFileTypeErrorMessage, getTooManyFilesErrorMessage } from './utils.js';
+
+var calcRootErrors = function calcRootErrors(files, maxFiles) {
+  var errors = [];
+  if (maxFiles && maxFiles >= 1 && files.length > maxFiles) {
+    errors.push(getTooManyFilesErrorMessage(maxFiles));
+  }
+  return errors;
+};
+var useFileUploader = function useFileUploader(props) {
+  var _props$initialFiles = props.initialFiles,
+    initialFiles = _props$initialFiles === void 0 ? [] : _props$initialFiles,
+    accept = props.accept,
+    maxFiles = props.maxFiles,
+    disabled = props.disabled;
+  var rootRef = useRef(null);
+  var inputRef = useRef(null);
+  var buttonRef = useRef(null);
+  var _useReducer = useReducer(fileUploaderReducer, {
+      files: initialFiles.map(function (f) {
+        return {
+          file: f,
+          errors: []
+        };
+      }),
+      isFocused: false,
+      isFileDialogActive: false,
+      isDragActive: false,
+      rootErrors: []
+    }),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  var stateFiles = state.files;
+  var onRootFocus = useCallback(function () {
+    return dispatch({
+      type: 'focus'
+    });
+  }, [dispatch]);
+  var onRootBlur = useCallback(function () {
+    return dispatch({
+      type: 'blur'
+    });
+  }, [dispatch]);
+  var onRootDragEnter = useCallback(function (evt) {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var files, fileCount;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              preventDefaults(evt);
+              if (!isEventWithFiles(evt)) {
+                _context.next = 9;
+                break;
+              }
+              _context.next = 4;
+              return fromEvent(evt);
+            case 4:
+              files = _context.sent;
+              fileCount = files.length;
+              if (!(fileCount === 0)) {
+                _context.next = 8;
+                break;
+              }
+              return _context.abrupt("return");
+            case 8:
+              dispatch({
+                type: 'dragEnter'
+              });
+            case 9:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+  }, [dispatch, accept, maxFiles]);
+  var onRootDragOver = useCallback(function (evt) {
+    preventDefaults(evt);
+    var hasFiles = isEventWithFiles(evt);
+    if (hasFiles && evt.dataTransfer) {
+      try {
+        evt.dataTransfer.dropEffect = 'copy';
+      } catch (_a) {} /* eslint-disable-line no-empty */
+    }
+  }, []);
+  var onRootDragLeave = useCallback(function (evt) {
+    preventDefaults(evt);
+    if (evt.currentTarget.contains(evt.relatedTarget)) return;
+    dispatch({
+      type: 'dragLeave'
+    });
+  }, [dispatch]);
+  var setFiles = useCallback(function (evt) {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+      var existingFileNames, filesFromEvent, newFiles, rootErrors;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              evt.preventDefault();
+              if (!isEventWithFiles(evt)) {
+                _context2.next = 9;
+                break;
+              }
+              existingFileNames = stateFiles.map(function (f) {
+                return f.file.name;
+              }); // TODO: Fiks cast her.
+              _context2.next = 5;
+              return fromEvent(evt);
+            case 5:
+              filesFromEvent = _context2.sent;
+              newFiles = filesFromEvent.filter(function (f) {
+                return !existingFileNames.includes(f.name);
+              }).map(function (file) {
+                var accepted = isFileAccepted(file, accept);
+                return {
+                  file: file,
+                  errors: accepted ? [] : [getInvalidFileTypeErrorMessage()]
+                };
+              }).concat(stateFiles);
+              rootErrors = calcRootErrors(newFiles, maxFiles);
+              dispatch({
+                type: 'onSetFiles',
+                payload: {
+                  rootErrors: rootErrors,
+                  files: newFiles
+                }
+              });
+            case 9:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+  }, [stateFiles, maxFiles, accept, dispatch]);
+  var openFileDialog = useCallback(function () {
+    if (inputRef.current) {
+      inputRef.current.value = '';
+      inputRef.current.click();
+    }
+  }, [inputRef]);
+  var removeFile = useCallback(function (file) {
+    var newFiles = _toConsumableArray(stateFiles);
+    newFiles.splice(stateFiles.indexOf(file), 1);
+    var rootErrors = calcRootErrors(newFiles, maxFiles);
+    dispatch({
+      type: 'onRemoveFile',
+      payload: {
+        rootErrors: rootErrors,
+        files: newFiles
+      }
+    });
+  }, [stateFiles, maxFiles]);
+  var getRootProps = useCallback(function () {
+    return {
+      onBlur: onRootBlur,
+      onFocus: onRootFocus,
+      onDragEnter: onRootDragEnter,
+      onDragOver: onRootDragOver,
+      onDragLeave: onRootDragLeave,
+      onDrop: setFiles,
+      ref: rootRef
+    };
+  }, [onRootBlur, onRootFocus, onRootDragEnter, onRootDragOver, setFiles, rootRef, disabled]);
+  var getButtonProps = useCallback(function () {
+    return {
+      onClick: openFileDialog,
+      ref: buttonRef
+    };
+  }, [openFileDialog, buttonRef]);
+  var getInputProps = useCallback(function () {
+    return Object.assign({
+      type: 'file',
+      style: {
+        display: 'none'
+      },
+      tabIndex: -1,
+      ref: inputRef,
+      onChange: setFiles,
+      multiple: !maxFiles || maxFiles > 1
+    }, accept ? {
+      accept: accept.join(',')
+    } : {});
+  }, [inputRef, setFiles, maxFiles, accept]);
+  return {
+    state: state,
+    getRootProps: getRootProps,
+    getInputProps: getInputProps,
+    getButtonProps: getButtonProps,
+    removeFile: removeFile
+  };
+};
+
+export { useFileUploader };

package/dist/components/FileUploader/utils.js

@@ -0,0 +1,32 @@
+import accepted from 'attr-accept';
+
+var preventDefaults = function preventDefaults(event) {
+  event.preventDefault();
+  event.stopPropagation();
+};
+var isDragEvent = function isDragEvent(event) {
+  var asDragEvent = event;
+  return asDragEvent.dataTransfer !== undefined;
+};
+var isEventWithFiles = function isEventWithFiles(event) {
+  if (!isDragEvent(event)) {
+    return event.target.files !== null && event.target.files !== undefined;
+  }
+  return event.dataTransfer.types.includes('Files') || event.dataTransfer.types.includes('application/x-moz-file');
+};
+var isFileAccepted = function isFileAccepted(file, accept) {
+  return accept !== undefined ? accepted(file, accept) : true;
+};
+// export const isFileSizeAccepted = (
+//   file: File,
+//   minSize: number | undefined,
+//   maxSize: number | undefined
+// ): boolean => {};
+var getTooManyFilesErrorMessage = function getTooManyFilesErrorMessage(maxFiles) {
+  return "For mange filer, maks ".concat(maxFiles, "stk");
+};
+var getInvalidFileTypeErrorMessage = function getInvalidFileTypeErrorMessage() {
+  return 'Ugyldig filtype';
+};
+
+export { getInvalidFileTypeErrorMessage, getTooManyFilesErrorMessage, isDragEvent, isEventWithFiles, isFileAccepted, preventDefaults };