@norges-domstoler/dds-components 5.5.0 → 7.0.0

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

@@ -1,86 +1,106 @@
 import styled, { css } from 'styled-components';
 import { focusVisibleLink } from '../../helpers/styling/focusVisible.js';
-import '../../helpers/styling/hover.js';
-import '../../helpers/styling/focus.js';
-import '../../helpers/styling/danger.js';
+import { hoverDangerInputfield, hoverInputfield } from '../../helpers/styling/hover.js';
+import { focusInputfield } from '../../helpers/styling/focus.js';
+import { dangerInputfield } from '../../helpers/styling/danger.js';
 import { selection } from '../../helpers/styling/selection.js';
 import '../ScrollableContainer/Scrollbar.js';
 import '../ScrollableContainer/ScrollableContainer.js';
 import { scrollbarStyling } from '../ScrollableContainer/scrollbarStyling.js';
-import { Typography } from '../Typography/Typography/Typography.js';
-import 'tslib';
-import 'react/jsx-runtime';
-import 'react';
-import '../Typography/Link/Link.js';
 import { selectTokens } from './Select.tokens.js';
+import { Icon } from '../Icon/Icon.js';
 
+var _control = selectTokens.control,
+    _menu = selectTokens.menu,
+    _groupHeading = selectTokens.groupHeading,
+    _option = selectTokens.option,
+    _dropdownIndicator = selectTokens.dropdownIndicator,
+    _loadingIndicator = selectTokens.loadingIndicator,
+    _clearIndicator = selectTokens.clearIndicator,
+    _multiValue = selectTokens.multiValue,
+    _multiValueLabel = selectTokens.multiValueLabel,
+    _multiValueRemove = selectTokens.multiValueRemove,
+    _noOptionsMessage = selectTokens.noOptionsMessage,
+    _placeholder = selectTokens.placeholder,
+    icon = selectTokens.icon,
+    _valueContainer = selectTokens.valueContainer,
+    inputContainer = selectTokens.inputContainer;
 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, selection, function (_ref) {
-  var hasLabel = _ref.hasLabel,
-      isMulti = _ref.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 (_ref2) {
-  var errorMessage = _ref2.errorMessage;
-  return errorMessage && css(["", " &:hover{", "}&:focus-within{", "}"], selectTokens.container.danger.base, selectTokens.container.danger.hover.base, selectTokens.container.danger.focus.base);
-}, prefix, scrollbarStyling.webkit, scrollbarStyling.firefox, prefix, prefix, selectTokens.dropdownIndicator.hover.base, function (_ref3) {
-  var isDisabled = _ref3.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 (_ref4) {
-  var readOnly = _ref4.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 (_ref5) {
-  var width = _ref5.width;
+  componentId: "sc-19jkd5s-0"
+})(["margin:0;width:", ";position:relative;*::selection{", "}", " ", " &:hover .", "__dropdown-indicator,&:focus-within .", "__dropdown-indicator{color:", ";}", ""], function (_ref) {
+  var width = _ref.width;
   return width;
+}, selection, function (_ref2) {
+  var componentSize = _ref2.componentSize,
+      isMulti = _ref2.isMulti;
+  return css([".", "__control{padding:", ";", ";}.", "__option{", "}.", "__placeholder{", "}"], prefix, isMulti && componentSize === 'tiny' ? _control.sizes.small.padding : isMulti && componentSize !== 'tiny' ? _control.isMulti.sizes[componentSize].padding : _control.sizes[componentSize].padding, _control.sizes[componentSize].font, prefix, _option.sizes[componentSize].font, prefix, _placeholder.sizes[componentSize].font);
+}, function (_ref3) {
+  var errorMessage = _ref3.errorMessage;
+  return errorMessage && css([".", "__control{", "}.", "__control:hover{", "}.", "__control:focus-within{", "}"], prefix, dangerInputfield, prefix, hoverDangerInputfield, prefix, focusInputfield);
+}, prefix, prefix, _dropdownIndicator.hover.color, function (_ref4) {
+  var isDisabled = _ref4.isDisabled,
+      readOnly = _ref4.readOnly;
+  return readOnly ? css([".", "__control{border-color:", ";background-color:", ";}.", "__dropdown-indicator,&:hover .", "__dropdown-indicator{color:", ";}"], prefix, _control.readOnly.borderColor, _control.readOnly.backgroundColor, prefix, prefix, _dropdownIndicator.readOnly.color) : isDisabled ? css(["cursor:not-allowed;.", "__control{border-color:", ";background-color:", ";}&:hover .", "__dropdown-indicator{color:", ";}"], prefix, _control.disabled.borderColor, _control.disabled.backgroundColor, prefix, _dropdownIndicator.base.color) : '';
 });
 var InnerSingleValue = styled.div.withConfig({
   displayName: "Selectstyles__InnerSingleValue",
-  componentId: "sc-19jkd5s-3"
+  componentId: "sc-19jkd5s-1"
 })(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;max-width:100%;"]);
+var StyledIcon = styled(Icon).withConfig({
+  displayName: "Selectstyles__StyledIcon",
+  componentId: "sc-19jkd5s-2"
+})(["margin-right:", ";"], icon.marginRight);
 var getCustomStyles = function getCustomStyles() {
   return {
     control: function control() {
-      return Object.assign({
+      return {
         position: 'relative',
         display: 'flex',
-        flexWrap: 'wrap'
-      }, selectTokens.input.base);
+        alignItems: 'center',
+        flexWrap: 'wrap',
+        borderRadius: _control.borderRadius,
+        border: _control.border,
+        borderColor: _control.borderColor,
+        backgroundColor: _control.backgroundColor,
+        transition: 'box-shadow 0.2s, border-color 0.2s',
+        '&:hover': Object.assign({}, hoverInputfield),
+        '&:focus-within': Object.assign({}, focusInputfield)
+      };
     },
     placeholder: function placeholder(provided) {
-      return Object.assign(Object.assign(Object.assign({}, provided), selectTokens.placeholder.base), {
+      return Object.assign(Object.assign({}, provided), {
+        color: _placeholder.color,
         margin: 0
       });
     },
-    input: function input(provided) {
-      return Object.assign(Object.assign({}, provided), {
+    input: function input(provided, state) {
+      return Object.assign(Object.assign(Object.assign({}, provided), {
         margin: 0,
         padding: 0
+      }), state.isMulti && {
+        minHeight: inputContainer.isMulti.minHeight
       });
     },
     indicatorSeparator: function indicatorSeparator() {
       return {};
     },
     dropdownIndicator: function dropdownIndicator(provided, state) {
-      return Object.assign({
+      return {
         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);
+        },
+        padding: 0,
+        color: _dropdownIndicator.base.color
+      };
     },
     valueContainer: function valueContainer(provided, state) {
-      return Object.assign(Object.assign(Object.assign({}, provided), state.selectProps.isMulti ? selectTokens.valueContainer.isMulti.base : {}), {
+      return Object.assign(Object.assign(Object.assign({}, provided), state.selectProps.isMulti && {
+        gap: _valueContainer.isMulti.gap
+      }), {
         padding: 0
       });
     },
@@ -92,67 +112,120 @@ var getCustomStyles = function getCustomStyles() {
       };
     },
     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);
+      return {
+        boxSizing: 'border-box',
+        minWidth: 0,
+        display: 'flex',
+        borderRadius: _multiValue.base.borderRadius,
+        backgroundColor: state.selectProps.isDisabled ? selectTokens.multiValue.disabled.backgroundColor : selectTokens.multiValue.enabled.backgroundColor
+      };
     },
     multiValueLabel: function multiValueLabel(provided) {
-      return Object.assign(Object.assign({}, provided), selectTokens.multiValueLabel.base);
+      return Object.assign(Object.assign(Object.assign({}, provided), {
+        padding: _multiValueLabel.padding,
+        color: _multiValueLabel.color
+      }), _multiValueLabel.font);
     },
     multiValueRemove: function multiValueRemove(provided, state) {
       return state.selectProps.isDisabled ? {
         display: 'none'
-      } : Object.assign(Object.assign(Object.assign(Object.assign({}, provided), {
+      } : {
+        boxSizing: 'border-box',
+        display: 'flex',
+        alignItems: 'center',
         '@media (prefers-reduced-motion: no-preference)': {
-          transition: 'color 0.2s, background-color 0.2s'
-        }
-      }), selectTokens.multiValueRemove.base), {
-        padding: 0,
-        '&:hover': Object.assign({}, selectTokens.multiValueRemove.hover.base),
-        '&:focus': {
-          backgroundColor: 'blue'
+          transition: 'color 0.2s, background-color 0.2s, box-shadow 0.2s'
+        },
+        color: _multiValueRemove.base.color,
+        padding: _multiValueRemove.base.padding,
+        borderTopRightRadius: _multiValueRemove.base.borderTopRightRadius,
+        borderBottomRightRadius: _multiValueRemove.base.borderBottomRightRadius,
+        '&:hover': {
+          boxShadow: _multiValueRemove.hover.boxShadow
         }
-      });
+      };
     },
     menu: function menu(provided) {
-      return Object.assign(Object.assign(Object.assign({}, provided), {
+      return 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);
+        boxShadow: " 0 0 0 1px ".concat(_menu.borderColor),
+        border: _menu.border,
+        borderColor: _menu.borderColor,
+        backgroundColor: _menu.backgroundColor,
+        borderRadius: _menu.borderRadius,
+        marginTop: _menu.marginTop,
+        marginBottom: _menu.marginBottom
+      });
     },
-    menuList: function menuList(provided) {
-      return Object.assign(Object.assign({}, provided), {
-        paddingLeft: '1px',
-        paddingRight: '1px'
+    group: function group() {
+      return {
+        boxSizing: 'border-box'
+      };
+    },
+    groupHeading: function groupHeading() {
+      return Object.assign(Object.assign({
+        color: _groupHeading.color
+      }, _groupHeading.font), {
+        padding: _groupHeading.padding
       });
     },
+    menuList: function menuList() {
+      return Object.assign(Object.assign({
+        maxHeight: '300px',
+        overflowY: 'auto',
+        position: 'relative',
+        boxSizing: 'border-box'
+      }, scrollbarStyling.webkit), scrollbarStyling.firefox);
+    },
     option: function option(provided, state) {
       return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, provided), {
+        cursor: 'pointer',
+        display: 'flex',
+        alignItems: 'center',
+        gap: _option.base.gap,
+        padding: _option.base.padding,
+        color: _option.base.color,
+        backgroundColor: _option.base.backgroundColor
+      }), _option.base.font), {
         '@media (prefers-reduced-motion: no-preference)': {
           transition: 'color 0.2s, background-color 0.2s'
+        },
+        '&:hover': {
+          color: _option.hover.color,
+          backgroundColor: _option.hover.backgroundColor
         }
-      }), selectTokens.option.base), {
-        '&:hover': Object.assign({}, selectTokens.option.hover.base)
-      }), state.isSelected ? selectTokens.option.selected.base : {}), state.isFocused ? focusVisibleLink : {});
+      }), state.isSelected && {
+        backgroundColor: _option.selected.backgroundColor
+      }), state.isFocused && focusVisibleLink);
     },
     noOptionsMessage: function noOptionsMessage() {
-      return Object.assign({}, selectTokens.noOptionsMessage.base);
+      return Object.assign({
+        padding: _noOptionsMessage.padding,
+        color: _noOptionsMessage.color
+      }, _noOptionsMessage.font);
     },
     clearIndicator: function clearIndicator() {
-      return Object.assign(Object.assign({
-        display: 'inline-flex'
-      }, selectTokens.clearIndicator.base), {
+      return {
+        display: 'inline-flex',
+        color: _clearIndicator.base.color,
         '@media (prefers-reduced-motion: no-preference)': {
           transition: 'color 0.2s'
         },
-        '&:hover': Object.assign({}, selectTokens.clearIndicator.hover.base)
-      });
+        '&:hover': {
+          color: _clearIndicator.hover.color
+        }
+      };
     },
     loadingIndicator: function loadingIndicator(provided) {
-      return Object.assign(Object.assign({}, provided), selectTokens.loadingIndicator.base);
+      return Object.assign(Object.assign({}, provided), {
+        padding: 0,
+        color: _loadingIndicator.color
+      });
     }
   };
 };
 
-export { Container, InnerSingleValue, Label, Wrapper, getCustomStyles, prefix };
+export { Container, InnerSingleValue, StyledIcon, getCustomStyles, prefix };

package/dist/components/Select/Select.tokens.d.ts

@@ -1,141 +1,261 @@
-import { CSSObject } from 'styled-components';
-import { Property } from 'csstype';
-export declare const multiValueContainerMinHeight: string;
 export declare const selectTokens: {
-    container: {
-        base: CSSObject;
-        defaultWidth: Property.Width<string>;
-        hover: {
-            base: CSSObject;
+    control: {
+        borderRadius: string;
+        border: string;
+        borderColor: string;
+        backgroundColor: string;
+        color: string;
+        disabled: {
+            backgroundColor: string;
+            borderColor: string;
         };
-        focus: {
-            base: CSSObject;
+        readOnly: {
+            borderColor: string;
+            backgroundColor: string;
         };
-        danger: {
-            base: CSSObject;
-            hover: {
-                base: CSSObject;
-            };
-            focus: {
-                base: CSSObject;
+        isMulti: {
+            sizes: {
+                medium: {
+                    padding: string;
+                };
+                small: {
+                    padding: string;
+                };
             };
         };
-        disabled: {
-            base: CSSObject;
-        };
-        readOnly: {
-            base: CSSObject;
+        sizes: {
+            medium: {
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+                padding: string;
+            };
+            small: {
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+                padding: string;
+            };
+            tiny: {
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+                padding: string;
+            };
         };
     };
-    label: {
-        base: CSSObject;
+    dropdownIndicator: {
+        base: {
+            color: string;
+        };
         hover: {
-            base: CSSObject;
+            color: string;
         };
-        focus: {
-            base: CSSObject;
+        readOnly: {
+            color: string;
         };
     };
-    input: {
-        base: CSSObject;
-        noLabel: {
-            base: CSSObject;
-        };
-        isMulti: {
-            noLabel: {
-                base: CSSObject;
+    placeholder: {
+        color: string;
+        sizes: {
+            medium: {
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
+            small: {
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
+            tiny: {
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
             };
         };
     };
-    placeholder: {
-        base: CSSObject;
-    };
     menu: {
-        base: CSSObject;
-        spaceTop: number;
+        border: string;
+        borderColor: string;
+        backgroundColor: string;
+        borderRadius: string;
+        marginTop: string;
+        marginBottom: string;
+    };
+    groupHeading: {
+        color: string;
+        font: {
+            lineHeight: any;
+            fontSize: string;
+            letterSpacing: any;
+            fontFamily: any;
+            fontWeight: any;
+            fontStyle: any;
+        };
+        padding: string;
     };
     option: {
-        base: CSSObject;
+        base: {
+            gap: string;
+            padding: string;
+            font: {
+                lineHeight: any;
+                fontSize: string;
+                letterSpacing: any;
+                fontFamily: any;
+                fontWeight: any;
+                fontStyle: any;
+            };
+            color: string;
+            backgroundColor: string;
+        };
         hover: {
-            base: CSSObject;
+            color: string;
+            backgroundColor: string;
         };
         selected: {
-            base: CSSObject;
-            icon: {
-                margin: string;
+            lineHeight: any;
+            fontSize: string;
+            letterSpacing: any;
+            fontFamily: any;
+            fontWeight: any;
+            fontStyle: any;
+            backgroundColor: string;
+        };
+        sizes: {
+            medium: {
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
+            small: {
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
+            tiny: {
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
             };
         };
     };
     valueContainer: {
-        withLabel: {
-            base: CSSObject;
-        };
-        noLabel: {
-            base: CSSObject;
+        isMulti: {
+            gap: string;
         };
+    };
+    inputContainer: {
         isMulti: {
-            base: CSSObject;
-            withLabel: {
-                base: CSSObject;
-            };
-            noLabel: {
-                base: CSSObject;
-            };
+            minHeight: string;
         };
     };
     multiValue: {
-        base: CSSObject;
+        base: {
+            borderRadius: string;
+        };
         enabled: {
-            base: CSSObject;
+            backgroundColor: string;
         };
         disabled: {
-            base: CSSObject;
+            backgroundColor: string;
         };
     };
     multiValueLabel: {
-        base: CSSObject;
-    };
-    multiValueRemove: {
-        base: CSSObject;
-        hover: {
-            base: CSSObject;
+        padding: string;
+        color: string;
+        font: {
+            lineHeight: any;
+            fontSize: string;
+            letterSpacing: any;
+            fontFamily: any;
+            fontWeight: any;
+            fontStyle: any;
         };
     };
-    indicatorsContainer: {
-        withLabel: {
-            base: CSSObject;
-        };
-        noLabel: {
-            base: CSSObject;
-        };
-        isMulti: {
-            withLabel: {
-                base: CSSObject;
-            };
-            noLabel: {
-                base: CSSObject;
-            };
+    multiValueRemove: {
+        base: {
+            color: string;
+            padding: string;
+            borderTopRightRadius: string;
+            borderBottomRightRadius: string;
         };
-    };
-    dropdownIndicator: {
-        base: CSSObject;
         hover: {
-            base: CSSObject;
-        };
-        readOnly: {
-            base: CSSObject;
+            color: string;
+            backgroundColor: string;
+            boxShadow: string;
         };
     };
     noOptionsMessage: {
-        base: CSSObject;
+        padding: string;
+        color: string;
+        font: {
+            lineHeight: any;
+            fontSize: string;
+            letterSpacing: any;
+            fontFamily: any;
+            fontWeight: any;
+            fontStyle: any;
+        };
     };
     clearIndicator: {
-        base: CSSObject;
+        base: {
+            color: string;
+        };
         hover: {
-            base: CSSObject;
+            color: string;
         };
     };
     loadingIndicator: {
-        base: CSSObject;
+        color: string;
+    };
+    icon: {
+        marginRight: string;
     };
 };