@norges-domstoler/dds-components 4.0.1 → 4.1.1

package/dist/components/Search/Search.js

@@ -0,0 +1,93 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';
+import { searchTokens } from './Search.tokens.js';
+import { Input as Input$1, OuterInputContainer, InputContainer } from '../../helpers/Input/Input.styles.js';
+import { derivativeIdGenerator, spaceSeparatedIdListGenerator } from '../../utils/idGenerator.js';
+import { InputMessage } from '../InputMessage/InputMessage.js';
+import { Button } from '../Button/Button.js';
+
+var Input = styled(Input$1).withConfig({
+  displayName: "Search__Input",
+  componentId: "sc-1ax3s9s-0"
+})(["&[type='search']::-webkit-search-decoration,&[type='search']::-webkit-search-cancel-button,&[type='search']::-webkit-search-results-button,&[type='search']::-webkit-search-results-decoration{-webkit-appearance:none;}", " ", ""], searchTokens.input.base, function (_ref) {
+  var componentSize = _ref.componentSize;
+  return css(["", ""], searchTokens.input[componentSize].base);
+});
+var IconWrapper = styled.span.withConfig({
+  displayName: "Search__IconWrapper",
+  componentId: "sc-1ax3s9s-1"
+})(["", " position:absolute;top:", ";left:", ";"], searchTokens.iconWrapper.base, searchTokens.icon.spaceTop, searchTokens.icon.spaceLeft);
+var Container = styled.div.withConfig({
+  displayName: "Search__Container",
+  componentId: "sc-1ax3s9s-2"
+})(["", ""], searchTokens.container.base);
+var ButtonWrapper = styled.div.withConfig({
+  displayName: "Search__ButtonWrapper",
+  componentId: "sc-1ax3s9s-3"
+})([""]);
+var nextUniqueId = 0;
+var Search = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _a$componentSize = _a.componentSize,
+      componentSize = _a$componentSize === void 0 ? 'medium' : _a$componentSize,
+      buttonProps = _a.buttonProps,
+      name = _a.name,
+      tip = _a.tip,
+      id = _a.id,
+      className = _a.className,
+      style = _a.style,
+      ariaDescribedby = _a['aria-describedby'],
+      rest = __rest(_a, ["componentSize", "buttonProps", "name", "tip", "id", "className", "style", 'aria-describedby']);
+
+  var _useState = useState(id !== null && id !== void 0 ? id : "searchInput-".concat(nextUniqueId++)),
+      _useState2 = _slicedToArray(_useState, 1),
+      uniqueId = _useState2[0];
+
+  var hasTip = !!tip;
+  var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
+  var containerProps = {
+    className: className,
+    style: style
+  };
+  var inputProps = Object.assign(Object.assign({
+    ref: ref
+  }, rest), {
+    componentSize: componentSize,
+    name: name,
+    type: 'search',
+    id: uniqueId,
+    'aria-describedby': spaceSeparatedIdListGenerator([tipId, ariaDescribedby])
+  });
+
+  var _b = buttonProps || {},
+      label = _b.label,
+      onClick = _b.onClick,
+      otherButtonProps = __rest(_b, ["label", "onClick"]);
+
+  return jsxs(Container, Object.assign({}, containerProps, {
+    children: [jsxs(OuterInputContainer, Object.assign({
+      width: "100%"
+    }, {
+      children: [jsxs(InputContainer, {
+        children: [jsx(IconWrapper, {
+          children: jsx(SearchOutlinedIcon, {})
+        }), jsx(Input, Object.assign({}, inputProps))]
+      }), hasTip && jsx(InputMessage, {
+        id: tipId,
+        messageType: "tip",
+        message: tip
+      })]
+    })), buttonProps && onClick && jsx(ButtonWrapper, {
+      children: jsx(Button, Object.assign({
+        size: componentSize,
+        label: label || 'Søk',
+        onClick: onClick
+      }, otherButtonProps))
+    })]
+  }));
+});
+
+export { Search };

package/dist/components/Search/Search.tokens.js

@@ -0,0 +1,55 @@
+import { ddsBaseTokens, ddsReferenceTokens } from '@norges-domstoler/dds-design-tokens';
+
+var spacing = ddsBaseTokens.spacing,
+    fontPackages = ddsBaseTokens.fontPackages;
+var textDefault = ddsReferenceTokens.textDefault;
+var inputBase = {
+  paddingRight: spacing.SizesDdsSpacingLocalX05,
+  paddingLeft: spacing.SizesDdsSpacingLocalX3
+};
+var smallBase = Object.assign(Object.assign({}, fontPackages.supportingStyle_inputtext_01.base), {
+  paddingTop: spacing.SizesDdsSpacingLocalX05,
+  paddingBottom: spacing.SizesDdsSpacingLocalX05
+});
+var mediumBase = Object.assign(Object.assign({}, fontPackages.supportingStyle_inputtext_02.base), {
+  paddingTop: spacing.SizesDdsSpacingLocalX075,
+  paddingBottom: spacing.SizesDdsSpacingLocalX075
+});
+var largeBase = Object.assign(Object.assign({}, fontPackages.supportingStyle_inputtext_03.base), {
+  paddingTop: spacing.SizesDdsSpacingLocalX1,
+  paddingBottom: spacing.SizesDdsSpacingLocalX1
+});
+var iconWrapperBase = {
+  color: textDefault.textColor
+};
+var containerBase = {
+  display: 'flex',
+  flexDirection: 'row',
+  gap: spacing.SizesDdsSpacingLocalX05
+};
+var searchTokens = {
+  input: {
+    base: inputBase,
+    small: {
+      base: smallBase
+    },
+    medium: {
+      base: mediumBase
+    },
+    large: {
+      base: largeBase
+    }
+  },
+  icon: {
+    spaceTop: "calc(50% - ".concat(spacing.SizesDdsSpacingLocalX15NumberPx / 2, "px)"),
+    spaceLeft: spacing.SizesDdsSpacingLocalX075
+  },
+  iconWrapper: {
+    base: iconWrapperBase
+  },
+  container: {
+    base: containerBase
+  }
+};
+
+export { searchTokens };

package/dist/components/Select/Select.js

@@ -0,0 +1,154 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import CheckOutlinedIcon from '@mui/icons-material/CheckOutlined';
+import React, { useState } from 'react';
+import ReactSelect, { components } from 'react-select';
+import { prefix, getCustomStyles, Wrapper, Container, Label, SelectedIconWrapper } from './Select.styles.js';
+import { selectTokens } from './Select.tokens.js';
+import { RequiredMarker } from '../../helpers/RequiredMarker/RequiredMarker.js';
+import { InputMessage } from '../InputMessage/InputMessage.js';
+import { derivativeIdGenerator, spaceSeparatedIdListGenerator } from '../../utils/idGenerator.js';
+
+var DdsOption = components.Option,
+    NoOptionsMessage = components.NoOptionsMessage,
+    Input = components.Input;
+var createSelectOptions = function createSelectOptions() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+
+  return args.map(function (v) {
+    return {
+      label: v,
+      value: v
+    };
+  });
+};
+
+var IconOption = function IconOption(props) {
+  return jsxs(DdsOption, Object.assign({}, props, {
+    children: [props.isSelected && jsx(SelectedIconWrapper, {
+      Icon: CheckOutlinedIcon,
+      iconSize: "inline"
+    }), props.children]
+  }));
+};
+
+var NoOptionsMessageCustom = function NoOptionsMessageCustom(props) {
+  return jsx(NoOptionsMessage, Object.assign({}, props, {
+    children: "Ingen treff"
+  }));
+};
+
+function escapeRegexCharacters(text) {
+  return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
+}
+
+function searchFilter(text, search) {
+  // Søkeordet er enten først i teksten, eller så har det mellomrom, bindestrek eller start-parentes før seg.
+  var searchFilterRegex = new RegExp("(?:^|[\\s-(])".concat(escapeRegexCharacters(search.toLowerCase())));
+  return searchFilterRegex.test(text.toLowerCase());
+}
+var nextUniqueId = 0;
+
+var SelectInner = function SelectInner(_a, ref) {
+  var id = _a.id,
+      label = _a.label,
+      errorMessage = _a.errorMessage,
+      tip = _a.tip,
+      required = _a.required,
+      readOnly = _a.readOnly,
+      options = _a.options,
+      isMulti = _a.isMulti,
+      value = _a.value,
+      defaultValue = _a.defaultValue,
+      _a$width = _a.width,
+      width = _a$width === void 0 ? selectTokens.container.defaultWidth : _a$width,
+      closeMenuOnSelect = _a.closeMenuOnSelect,
+      className = _a.className,
+      style = _a.style,
+      isDisabled = _a.isDisabled,
+      _a$isClearable = _a.isClearable,
+      isClearable = _a$isClearable === void 0 ? true : _a$isClearable,
+      _a$placeholder = _a.placeholder,
+      placeholder = _a$placeholder === void 0 ? '-- Velg fra listen --' : _a$placeholder,
+      rest = __rest(_a, ["id", "label", "errorMessage", "tip", "required", "readOnly", "options", "isMulti", "value", "defaultValue", "width", "closeMenuOnSelect", "className", "style", "isDisabled", "isClearable", "placeholder"]);
+
+  var _useState = useState(id !== null && id !== void 0 ? id : "select-".concat(nextUniqueId++)),
+      _useState2 = _slicedToArray(_useState, 1),
+      uniqueId = _useState2[0];
+
+  var hasLabel = !!label;
+  var hasErrorMessage = !!errorMessage;
+  var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
+  var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage', errorMessage);
+
+  var CustomInput = function CustomInput(props) {
+    return jsx(Input, Object.assign({}, props, {
+      "aria-describedby": spaceSeparatedIdListGenerator([tipId, errorMessageId])
+    }));
+  };
+
+  var wrapperProps = {
+    width: width
+  };
+  var containerProps = {
+    errorMessage: errorMessage,
+    isDisabled: isDisabled,
+    isMulti: isMulti,
+    readOnly: readOnly,
+    hasLabel: hasLabel,
+    className: className,
+    style: style
+  };
+  var reactSelectProps = Object.assign({
+    options: options,
+    value: value,
+    defaultValue: defaultValue,
+    isDisabled: isDisabled || readOnly,
+    isClearable: isClearable,
+    placeholder: placeholder,
+    closeMenuOnSelect: closeMenuOnSelect ? closeMenuOnSelect : isMulti ? false : true,
+    isMulti: isMulti,
+    inputId: uniqueId,
+    name: uniqueId,
+    classNamePrefix: prefix,
+    styles: getCustomStyles(),
+    filterOption: function filterOption(option, inputValue) {
+      var label = option.label;
+      return searchFilter(label, inputValue) || inputValue === '';
+    },
+    components: {
+      Option: IconOption,
+      NoOptionsMessage: NoOptionsMessageCustom,
+      Input: CustomInput
+    },
+    'aria-invalid': hasErrorMessage ? true : undefined
+  }, rest);
+  return jsxs(Wrapper, Object.assign({}, wrapperProps, {
+    children: [jsxs(Container, Object.assign({}, containerProps, {
+      children: [label && jsxs(Label, Object.assign({
+        htmlFor: uniqueId,
+        forwardedAs: "label",
+        typographyType: "supportingStyleLabel01"
+      }, {
+        children: [label, " ", required && jsx(RequiredMarker, {})]
+      })), jsx(ReactSelect, Object.assign({}, reactSelectProps, {
+        ref: ref
+      }))]
+    })), errorMessage && jsx(InputMessage, {
+      messageType: "error",
+      id: errorMessageId,
+      message: errorMessage
+    }), tip && !errorMessage && jsx(InputMessage, {
+      messageType: "tip",
+      id: tipId,
+      message: tip
+    })]
+  }));
+};
+
+var Select = /*#__PURE__*/React.forwardRef(SelectInner);
+
+export { Select, createSelectOptions, searchFilter };

package/dist/components/Select/Select.styles.js

@@ -0,0 +1,149 @@
+import styled, { css } from 'styled-components';
+import { typographyTokens } from '../Typography/Typography.tokens.js';
+import { selectTokens } from './Select.tokens.js';
+import { Typography } from '../Typography/Typography.js';
+import { scrollbarStyling } from '../../helpers/styling/scrollbarStyling.js';
+import { IconWrapper } from '../IconWrapper/IconWrapper.js';
+
+var prefix = 'dds-select';
+var Label = styled(Typography).withConfig({
+  displayName: "Selectstyles__Label",
+  componentId: "sc-19jkd5s-0"
+})(["display:block;", ""], selectTokens.label.base);
+var Container = styled.div.withConfig({
+  displayName: "Selectstyles__Container",
+  componentId: "sc-19jkd5s-1"
+})(["@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-color 0.2s,background-color 0.2s;}position:relative;", " ", " *::selection{", "}", " ", " &:hover{", " ", "{", "}}&:focus-within{", " ", "{", "}}", " .", "__menu-list{", "}&:hover .", "__dropdown-indicator,&:focus-within .", "__dropdown-indicator{", "}", " ", ""], selectTokens.container.base, scrollbarStyling, typographyTokens.selection.base, function (_ref) {
+  var isMulti = _ref.isMulti;
+  return isMulti && css([""]);
+}, function (_ref2) {
+  var hasLabel = _ref2.hasLabel,
+      isMulti = _ref2.isMulti;
+  return isMulti && hasLabel ? css([".", "__value-container{", "}.", "__indicators{", "}"], prefix, selectTokens.valueContainer.isMulti.withLabel.base, prefix, selectTokens.indicatorsContainer.isMulti.withLabel.base) : isMulti && !hasLabel ? css([".", "__control{", "}.", "__value-container{", "}.", "__indicators{", "}"], prefix, selectTokens.input.isMulti.noLabel.base, prefix, selectTokens.valueContainer.isMulti.noLabel.base, prefix, selectTokens.indicatorsContainer.isMulti.noLabel.base) : hasLabel ? css([".", "__value-container{", "}.", "__indicators{", "}"], prefix, selectTokens.valueContainer.withLabel.base, prefix, selectTokens.indicatorsContainer.withLabel.base) : css([".", "__control{", "}.", "__value-container{", "}.", "__indicators{", "}"], prefix, selectTokens.input.noLabel.base, prefix, selectTokens.valueContainer.noLabel.base, prefix, selectTokens.indicatorsContainer.noLabel.base);
+}, selectTokens.container.hover.base, Label, selectTokens.label.hover.base, selectTokens.container.focus.base, Label, selectTokens.label.focus.base, function (_ref3) {
+  var errorMessage = _ref3.errorMessage;
+  return errorMessage && css(["", " &:hover{", "}&:focus-within{", "}"], selectTokens.container.danger.base, selectTokens.container.danger.hover.base, selectTokens.container.danger.focus.base);
+}, prefix, scrollbarStyling, prefix, prefix, selectTokens.dropdownIndicator.hover.base, function (_ref4) {
+  var isDisabled = _ref4.isDisabled;
+  return isDisabled && css(["cursor:not-allowed;", " &:hover{box-shadow:none;", " ", "{", "}&:hover .", "__dropdown-indicator{", "}}"], selectTokens.container.disabled.base, selectTokens.container.disabled.base, Label, selectTokens.label.base, prefix, selectTokens.dropdownIndicator.base);
+}, function (_ref5) {
+  var readOnly = _ref5.readOnly;
+  return readOnly && css(["", " &:hover{box-shadow:none;", " ", "{", "}}.", "__dropdown-indicator,&:hover .", "__dropdown-indicator{", "}"], selectTokens.container.readOnly.base, selectTokens.container.readOnly.base, Label, selectTokens.label.base, prefix, prefix, selectTokens.dropdownIndicator.readOnly.base);
+});
+var Wrapper = styled.div.withConfig({
+  displayName: "Selectstyles__Wrapper",
+  componentId: "sc-19jkd5s-2"
+})(["margin:0;width:", ";"], function (_ref6) {
+  var width = _ref6.width;
+  return width;
+});
+var SelectedIconWrapper = styled(IconWrapper).withConfig({
+  displayName: "Selectstyles__SelectedIconWrapper",
+  componentId: "sc-19jkd5s-3"
+})(["margin:", ";"], selectTokens.option.selected.icon.margin);
+var getCustomStyles = function getCustomStyles() {
+  return {
+    control: function control() {
+      return Object.assign({
+        position: 'relative',
+        display: 'flex',
+        flexWrap: 'wrap'
+      }, selectTokens.input.base);
+    },
+    placeholder: function placeholder(provided) {
+      return Object.assign(Object.assign(Object.assign({}, provided), selectTokens.placeholder.base), {
+        margin: 0
+      });
+    },
+    input: function input(provided) {
+      return Object.assign(Object.assign({}, provided), {
+        margin: 0,
+        padding: 0
+      });
+    },
+    indicatorSeparator: function indicatorSeparator() {
+      return {};
+    },
+    dropdownIndicator: function dropdownIndicator(provided, state) {
+      return Object.assign({
+        display: 'inline-flex',
+        transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : '',
+        '@media (prefers-reduced-motion: no-preference)': {
+          transition: 'color 0.2s, transform 0.2s'
+        }
+      }, selectTokens.dropdownIndicator.base);
+    },
+    valueContainer: function valueContainer(provided, state) {
+      return Object.assign(Object.assign(Object.assign({}, provided), state.selectProps.isMulti ? selectTokens.valueContainer.isMulti.base : {}), {
+        padding: 0
+      });
+    },
+    singleValue: function singleValue(provided) {
+      return Object.assign(Object.assign({}, provided), {
+        margin: 0
+      });
+    },
+    multiValue: function multiValue(provided, state) {
+      return Object.assign(Object.assign(Object.assign({}, provided), selectTokens.multiValue.base), state.selectProps.isDisabled ? selectTokens.multiValue.disabled.base : selectTokens.multiValue.enabled.base);
+    },
+    multiValueLabel: function multiValueLabel(provided) {
+      return Object.assign(Object.assign({}, provided), selectTokens.multiValueLabel.base);
+    },
+    multiValueRemove: function multiValueRemove(provided, state) {
+      return state.selectProps.isDisabled ? {
+        display: 'none'
+      } : Object.assign(Object.assign(Object.assign(Object.assign({}, provided), {
+        '@media (prefers-reduced-motion: no-preference)': {
+          transition: 'color 0.2s, background-color 0.2s'
+        }
+      }), selectTokens.multiValueRemove.base), {
+        svg: Object.assign({}, selectTokens.multiValueRemove.icon.base),
+        '&:hover': Object.assign({}, selectTokens.multiValueRemove.hover.base),
+        '&:focus': {
+          backgroundColor: 'blue'
+        }
+      });
+    },
+    menu: function menu(provided) {
+      return Object.assign(Object.assign(Object.assign({}, provided), {
+        zIndex: 3,
+        transition: '0.2s',
+        width: 'calc(100% + 2px)',
+        transform: 'translate(-1px)',
+        boxShadow: "inset 0 0 0 1px ".concat(selectTokens.menu.base.borderColor)
+      }), selectTokens.menu.base);
+    },
+    menuList: function menuList(provided) {
+      return Object.assign(Object.assign({}, provided), {
+        paddingLeft: '1px',
+        paddingRight: '1px'
+      });
+    },
+    option: function option(provided, state) {
+      return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, provided), {
+        display: 'flex',
+        alignItems: 'center',
+        '@media (prefers-reduced-motion: no-preference)': {
+          transition: 'color 0.2s, background-color 0.2s'
+        }
+      }), selectTokens.option.base), {
+        '&:hover': Object.assign({}, selectTokens.option.hover.base)
+      }), state.isSelected || state.isFocused ? selectTokens.option.selected.base : {});
+    },
+    noOptionsMessage: function noOptionsMessage() {
+      return Object.assign({}, selectTokens.noOptionsMessage.base);
+    },
+    clearIndicator: function clearIndicator() {
+      return Object.assign(Object.assign({
+        display: 'inline-flex'
+      }, selectTokens.clearIndicator.base), {
+        '&:hover': Object.assign({}, selectTokens.clearIndicator.hover.base)
+      });
+    },
+    loadingIndicator: function loadingIndicator(provided) {
+      return Object.assign(Object.assign({}, provided), selectTokens.loadingIndicator.base);
+    }
+  };
+};
+
+export { Container, Label, SelectedIconWrapper, Wrapper, getCustomStyles, prefix };