@elvia/elvis-dropdown
Advanced tools
@elvia/elvis-dropdown - npm Package Compare versions
Comparing version 4.0.0 to 4.1.0
@@ -5,2 +5,14 @@ { | ||
| { | ||
| "date": "17.10.22", | ||
| "version": "4.1.0", | ||
| "changelog": [ | ||
| { | ||
| "type": "new_feature", | ||
| "changes": [ | ||
| "Added support for a tooltip on each option to display information when hovering an option with a status icon." | ||
| ] | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "date": "10.10.22", | ||
@@ -7,0 +19,0 @@ "version": "4.0.0", |
@@ -5,26 +5,5 @@ /* | ||
| */ | ||
| "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| exports.config = void 0; | ||
| var config = { | ||
| componentName: 'Dropdown', | ||
| deprecatedProps: { | ||
| // Rule 1.13: Selected value | ||
| defaultValue: { | ||
| version: '3.0.0', | ||
| newProp: 'value', | ||
| isDirectReplacement: true | ||
| }, | ||
| // Rule 1.12: List of elements | ||
| options: { | ||
| version: '3.0.0', | ||
| newProp: 'items', | ||
| isDirectReplacement: true | ||
| } | ||
| } | ||
| }; | ||
| exports.config = config; | ||
| "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.config=void 0;var config={componentName:"Dropdown",deprecatedProps:{// Rule 1.13: Selected value | ||
| defaultValue:{version:"3.0.0",newProp:"value",isDirectReplacement:!0},// Rule 1.12: List of elements | ||
| options:{version:"3.0.0",newProp:"items",isDirectReplacement:!0}}};exports.config=config; | ||
| //# sourceMappingURL=config.js.map |
@@ -5,757 +5,26 @@ /* | ||
| */ | ||
| "use strict"; | ||
| function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); } | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| exports.default = void 0; | ||
| var _react = _interopRequireWildcard(require("react")); | ||
| var _reactSelect = _interopRequireWildcard(require("react-select")); | ||
| var _react2 = require("@elvia/elvis-icon/react"); | ||
| var _styledComponents = require("./styledComponents"); | ||
| var _lodash = _interopRequireDefault(require("lodash.uniqueid")); | ||
| var _lodash2 = _interopRequireDefault(require("lodash.isequal")); | ||
| var _elvisColors = require("@elvia/elvis-colors"); | ||
| var _elvisToolbox = require("@elvia/elvis-toolbox"); | ||
| var _config = require("./config"); | ||
| var _cache = _interopRequireDefault(require("@emotion/cache")); | ||
| var _react3 = require("@emotion/react"); | ||
| var _statusToIconMap = require("./statusToIconMap"); | ||
| var _excluded = ["items", "value", "isCompact", "isDisabled", "isMulti", "isFullWidth", "isSearchable", "hasSelectAllOption", "selectAllOption", "allOptionsSelectedLabel", "label", "errorMessage", "menuPosition", "noOptionsMessage", "placeholder", "placeholderIcon", "valueOnChange", "onItemHover", "hasLoadMoreItemsButton", "onLoadMoreItems", "isLoadingMoreItems", "className", "inlineStyle", "webcomponent"]; | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } | ||
| function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } | ||
| function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } | ||
| function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } | ||
| function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); } | ||
| function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } | ||
| function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } | ||
| function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } | ||
| function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } | ||
| function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
| function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } | ||
| function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } | ||
| function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } | ||
| function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } | ||
| function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } | ||
| function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } | ||
| function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } | ||
| function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } | ||
| var Dropdown = function Dropdown(_ref) { | ||
| var _ref$items = _ref.items, | ||
| items = _ref$items === void 0 ? [] : _ref$items, | ||
| _ref$value = _ref.value, | ||
| value = _ref$value === void 0 ? undefined : _ref$value, | ||
| isCompact = _ref.isCompact, | ||
| isDisabled = _ref.isDisabled, | ||
| isMulti = _ref.isMulti, | ||
| isFullWidth = _ref.isFullWidth, | ||
| _ref$isSearchable = _ref.isSearchable, | ||
| isSearchable = _ref$isSearchable === void 0 ? false : _ref$isSearchable, | ||
| _ref$hasSelectAllOpti = _ref.hasSelectAllOption, | ||
| hasSelectAllOption = _ref$hasSelectAllOpti === void 0 ? false : _ref$hasSelectAllOpti, | ||
| selectAllOption = _ref.selectAllOption, | ||
| _ref$allOptionsSelect = _ref.allOptionsSelectedLabel, | ||
| allOptionsSelectedLabel = _ref$allOptionsSelect === void 0 ? 'Alle' : _ref$allOptionsSelect, | ||
| label = _ref.label, | ||
| _ref$errorMessage = _ref.errorMessage, | ||
| errorMessage = _ref$errorMessage === void 0 ? '' : _ref$errorMessage, | ||
| _ref$menuPosition = _ref.menuPosition, | ||
| menuPosition = _ref$menuPosition === void 0 ? 'auto' : _ref$menuPosition, | ||
| _ref$noOptionsMessage = _ref.noOptionsMessage, | ||
| _noOptionsMessage = _ref$noOptionsMessage === void 0 ? 'Ingen tilgjengelige valg' : _ref$noOptionsMessage, | ||
| _ref$placeholder = _ref.placeholder, | ||
| placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder, | ||
| placeholderIcon = _ref.placeholderIcon, | ||
| valueOnChange = _ref.valueOnChange, | ||
| onItemHover = _ref.onItemHover, | ||
| hasLoadMoreItemsButton = _ref.hasLoadMoreItemsButton, | ||
| onLoadMoreItems = _ref.onLoadMoreItems, | ||
| isLoadingMoreItems = _ref.isLoadingMoreItems, | ||
| className = _ref.className, | ||
| inlineStyle = _ref.inlineStyle, | ||
| webcomponent = _ref.webcomponent, | ||
| rest = _objectWithoutProperties(_ref, _excluded); | ||
| // eslint-disable-next-line prefer-rest-params | ||
| (0, _elvisToolbox.warnDeprecatedProps)(_config.config, arguments[0]); | ||
| var _useState = (0, _react.useState)(value), | ||
| _useState2 = _slicedToArray(_useState, 2), | ||
| currentVal = _useState2[0], | ||
| setCurrentVal = _useState2[1]; | ||
| var _useState3 = (0, _react.useState)(false), | ||
| _useState4 = _slicedToArray(_useState3, 2), | ||
| isError = _useState4[0], | ||
| setIsError = _useState4[1]; | ||
| var _useState5 = (0, _react.useState)(false), | ||
| _useState6 = _slicedToArray(_useState5, 2), | ||
| menuIsOpen = _useState6[0], | ||
| setMenuIsOpen = _useState6[1]; | ||
| var _useState7 = (0, _react.useState)({ | ||
| label: 'Alle', | ||
| value: '*' | ||
| }), | ||
| _useState8 = _slicedToArray(_useState7, 2), | ||
| selectAllOptionState = _useState8[0], | ||
| setSelectAllOptionState = _useState8[1]; | ||
| var dropdownRef = (0, _react.useRef)(null); | ||
| /** Set the "Select all" option inside an open multiselect dropdown. | ||
| * Doing it this way adds support for supplying the prop as a partial prop | ||
| * (e.g. {label: 'Alle'} instead of {value: '*', label: 'Alle'}). | ||
| */ | ||
| (0, _react.useEffect)(function () { | ||
| if (selectAllOption) { | ||
| setSelectAllOptionState(function (oldSelectAllOptionState) { | ||
| return _objectSpread(_objectSpread({}, oldSelectAllOptionState), selectAllOption); | ||
| }); | ||
| } | ||
| }, [selectAllOption]); | ||
| /** Memoized variable with all the items that are not disabled. Updates when `items` changes. */ | ||
| var itemsNotDisabled = (0, _react.useMemo)(function () { | ||
| return items.filter(function (item) { | ||
| return !item.isDisabled; | ||
| }); | ||
| }, [items]); | ||
| var selectId = (0, _lodash.default)('ewc-dropdown-'); | ||
| /** Styling functions for react select */ | ||
| var decideControlBorder = function decideControlBorder(disabled, error) { | ||
| if (disabled) { | ||
| return "1px solid ".concat((0, _elvisColors.getColor)('disabled')); | ||
| } | ||
| if (error) { | ||
| return "2px solid ".concat((0, _elvisColors.getColor)('error')); | ||
| } | ||
| return "1px solid ".concat((0, _elvisColors.getColor)('black')); | ||
| }; | ||
| var decideOptionBg = function decideOptionBg(focused, selected, isMulti) { | ||
| if (focused && selected && isMulti) { | ||
| return (0, _elvisColors.getColor)('grey-05'); | ||
| } | ||
| if (focused && !selected) { | ||
| return (0, _elvisColors.getColor)('grey-05'); | ||
| } | ||
| if (selected && !isMulti) { | ||
| return (0, _elvisColors.getColor)('grey-10'); | ||
| } | ||
| return (0, _elvisColors.getColor)('white'); | ||
| }; | ||
| var decideOptionHoverBg = function decideOptionHoverBg(selected, isMulti, optionIsDisabled) { | ||
| if (optionIsDisabled) { | ||
| return (0, _elvisColors.getColor)('white'); | ||
| } | ||
| if (selected && isMulti) { | ||
| return (0, _elvisColors.getColor)('grey-05'); | ||
| } | ||
| if (selected && !isMulti) { | ||
| return (0, _elvisColors.getColor)('grey-10'); | ||
| } | ||
| return (0, _elvisColors.getColor)('grey-05'); | ||
| }; | ||
| var decideSingleValueColor = function decideSingleValueColor(isMenuOpen, searchable, disabled) { | ||
| if (disabled) { | ||
| return (0, _elvisColors.getColor)('disabled'); | ||
| } | ||
| if (isMenuOpen && searchable) { | ||
| return (0, _elvisColors.getColor)('grey-70'); | ||
| } | ||
| return (0, _elvisColors.getColor)('black'); | ||
| }; | ||
| /** Decide color of background of a checkbox inside a multi-select dropdown */ | ||
| var decideBackgroundColor = function decideBackgroundColor(focused, selected, currentOptionLabel) { | ||
| if (focused || selected) { | ||
| return (0, _elvisColors.getColor)('elvia-charge'); | ||
| } else if ( // "select all"-option should have green background if any options are selected | ||
| Array.isArray(currentVal) && currentVal.length > 0 && currentOptionLabel === selectAllOptionState.label) { | ||
| return (0, _elvisColors.getColor)('elvia-charge'); | ||
| } else { | ||
| return (0, _elvisColors.getColor)('white'); | ||
| } | ||
| }; | ||
| var decideValueContainerHeight = function decideValueContainerHeight() { | ||
| if (allOptionsHaveIconAttribute && !isMulti) { | ||
| return 'inherit'; | ||
| } | ||
| return '22px'; | ||
| }; | ||
| /** Custom styling for dropdown using emotion from react-select package. */ | ||
| var customElviaStyles = { | ||
| container: function container(provided) { | ||
| return _objectSpread(_objectSpread({}, provided), {}, { | ||
| maxWidth: isFullWidth ? '' : '448px' | ||
| }); | ||
| }, | ||
| control: function control() { | ||
| return { | ||
| boxSizing: 'border-box', | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| backgroundColor: (0, _elvisColors.getColor)('white'), | ||
| borderRadius: '4px', | ||
| border: decideControlBorder(isDisabled, isError), | ||
| maxHeight: isCompact ? '34px' : '48px', | ||
| minHeight: isCompact ? '34px' : '48px', | ||
| minWidth: '72px', | ||
| marginBottom: '0px', | ||
| padding: !isError ? '1px' : '0px', | ||
| cursor: 'pointer', | ||
| boxShadow: '0', | ||
| '&:hover': { | ||
| border: "2px solid ".concat((0, _elvisColors.getColor)('elvia-charge')), | ||
| padding: '0px' | ||
| } | ||
| }; | ||
| }, | ||
| dropdownIndicator: function dropdownIndicator(provided) { | ||
| return _objectSpread(_objectSpread({}, provided), {}, { | ||
| height: isCompact ? '16px' : '20px', | ||
| width: isCompact ? '16px' : '20px', | ||
| padding: '0px' | ||
| }); | ||
| }, | ||
| indicatorsContainer: function indicatorsContainer(provided) { | ||
| return _objectSpread(_objectSpread({}, provided), {}, { | ||
| paddingTop: isCompact ? '7px' : '13px', | ||
| paddingBottom: isCompact ? '7px' : '13px', | ||
| paddingRight: isCompact ? '11px' : '15px' | ||
| }); | ||
| }, | ||
| menu: function menu(provided) { | ||
| return _objectSpread(_objectSpread({}, provided), {}, { | ||
| boxShadow: '0px 0px 40px rgba(0, 0, 0, 0.06);', | ||
| minWidth: '100%', | ||
| width: 'fit-content', | ||
| zIndex: 100 | ||
| }); | ||
| }, | ||
| menuList: function menuList(provided) { | ||
| return _objectSpread(_objectSpread({}, provided), {}, { | ||
| maxHeight: isCompact ? '181px' : '241px', | ||
| padding: '0', | ||
| zIndex: 10 | ||
| }); | ||
| }, | ||
| multiValue: function multiValue(provided, state) { | ||
| return _objectSpread(_objectSpread({}, provided), {}, { | ||
| background: (0, _elvisColors.getColor)('white'), | ||
| margin: '0px', | ||
| color: state.isDisabled ? (0, _elvisColors.getColor)('disabled') : (0, _elvisColors.getColor)('black') | ||
| }); | ||
| }, | ||
| multiValueLabel: function multiValueLabel(provided, state) { | ||
| return _objectSpread(_objectSpread({}, provided), {}, { | ||
| fontFamily: 'Red Hat Text', | ||
| fontWeight: '400', | ||
| fontStyle: 'normal', | ||
| fontSize: isCompact ? '14px' : '16px', | ||
| lineHeight: '22px', | ||
| color: state.isDisabled ? (0, _elvisColors.getColor)('disabled') : (0, _elvisColors.getColor)('black'), | ||
| paddingTop: '0px', | ||
| paddingBottom: '0px', | ||
| paddingLeft: '0px' | ||
| }); | ||
| }, | ||
| noOptionsMessage: function noOptionsMessage(provided) { | ||
| return _objectSpread(_objectSpread({}, provided), {}, { | ||
| fontFamily: 'Red Hat Text', | ||
| color: (0, _elvisColors.getColor)('grey-70'), | ||
| textAlign: 'left' | ||
| }); | ||
| }, | ||
| option: function option(provided, state) { | ||
| return _objectSpread(_objectSpread({}, provided), {}, { | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| gap: '8px', | ||
| backgroundColor: decideOptionBg(state.isFocused, state.isSelected, state.isMulti), | ||
| color: state.isDisabled ? (0, _elvisColors.getColor)('disabled') : (0, _elvisColors.getColor)('black'), | ||
| height: '100%', | ||
| paddingTop: '7px', | ||
| paddingBottom: '7px', | ||
| paddingLeft: isCompact ? '9px' : '15px', | ||
| fontSize: isCompact ? '14px' : '16px', | ||
| lineHeight: isCompact ? '18px' : '26px', | ||
| border: '1px solid transparent', | ||
| cursor: state.isDisabled ? 'not-allowed' : 'pointer', | ||
| overflowX: 'hidden', | ||
| textOverflow: 'ellipsis', | ||
| '&:hover': { | ||
| backgroundColor: decideOptionHoverBg(state.isSelected, state.isMulti, state.isDisabled), | ||
| '#ewc-dropdown-checkbox__mark': { | ||
| backgroundColor: state.isDisabled ? (0, _elvisColors.getColor)('white') : (0, _elvisColors.getColor)('elvia-charge') | ||
| } | ||
| }, | ||
| '#ewc-dropdown-checkbox__mark': { | ||
| background: decideBackgroundColor(state.isFocused, state.isSelected, state.label) | ||
| }, | ||
| '.ewc-dropdown-checkbox .ewc-dropdown-checkbox__mark': { | ||
| background: decideBackgroundColor(state.isFocused, state.isSelected, state.label) | ||
| }, | ||
| borderBottom: state.label === selectAllOptionState.label ? "1px solid ".concat((0, _elvisColors.getColor)('grey-10')) : '' | ||
| }); | ||
| }, | ||
| placeholder: function placeholder(provided) { | ||
| return _objectSpread(_objectSpread({}, provided), {}, { | ||
| fontFamily: 'Red Hat Text', | ||
| fontWeight: '400', | ||
| fontStyle: 'normal', | ||
| fontSize: isCompact ? '14px' : '16px', | ||
| lineHeight: '22px', | ||
| color: isDisabled ? (0, _elvisColors.getColor)('disabled') : (0, _elvisColors.getColor)('grey-70'), | ||
| margin: '0px', | ||
| display: 'flex', | ||
| flexDirection: 'row', | ||
| alignItems: 'center', | ||
| gap: '8px', | ||
| overflowX: 'hidden', | ||
| textOverflow: 'ellipsis', | ||
| whiteSpace: 'nowrap', | ||
| maxWidth: 'calc(100% - 12px)' | ||
| }); | ||
| }, | ||
| singleValue: function singleValue(provided) { | ||
| return _objectSpread(_objectSpread({}, provided), {}, { | ||
| fontFamily: 'Red Hat Text', | ||
| fontWeight: '400', | ||
| fontStyle: 'normal', | ||
| fontSize: isCompact ? '14px' : '16px', | ||
| lineHeight: '22px', | ||
| color: decideSingleValueColor(menuIsOpen, isSearchable, isDisabled), | ||
| margin: '0px', | ||
| maxWidth: 'calc(100% - 12px)', | ||
| display: 'flex', | ||
| alignItems: 'center' | ||
| }); | ||
| }, | ||
| valueContainer: function valueContainer(provided, state) { | ||
| return _objectSpread(_objectSpread({}, provided), {}, { | ||
| display: 'flex', | ||
| color: state.isDisabled ? (0, _elvisColors.getColor)('disabled') : (0, _elvisColors.getColor)('black'), | ||
| fontFamily: 'Red Hat Text', | ||
| fontWeight: '400', | ||
| fontStyle: 'normal', | ||
| fontSize: isCompact ? '14px' : '16px', | ||
| lineHeight: '22px', | ||
| paddingLeft: isCompact ? '8px' : '15px', | ||
| paddingRight: '2px', | ||
| paddingTop: 0, | ||
| paddingBottom: 0, | ||
| height: decideValueContainerHeight(), | ||
| whiteSpace: 'nowrap' | ||
| }); | ||
| }, | ||
| input: function input(provided) { | ||
| return _objectSpread(_objectSpread({}, provided), {}, { | ||
| padding: 0, | ||
| margin: 0 | ||
| }); | ||
| } | ||
| }; | ||
| /** Helper memoized variable to determine if the options array has valid icon attributes (all or none should have icon). */ | ||
| var allOptionsHaveIconAttribute = (0, _react.useMemo)(function () { | ||
| return items.length > 0 && items.every(function (item) { | ||
| return item.icon !== undefined; | ||
| }); | ||
| }, [items]); | ||
| /** Custom components for Elvia dropdown */ | ||
| var ElviaDropdownIndicator = function ElviaDropdownIndicator(props) { | ||
| return /*#__PURE__*/_react.default.createElement(_reactSelect.components.DropdownIndicator, props, /*#__PURE__*/_react.default.createElement(_react2.Icon, { | ||
| name: menuIsOpen ? 'arrowUpBold' : 'arrowDownBold', | ||
| color: isDisabled ? (0, _elvisColors.getColor)('disabled') : undefined, | ||
| customSize: isCompact ? '16px' : '20px' | ||
| })); | ||
| }; | ||
| var ElviaOption = function ElviaOption(props) { | ||
| var _optionData$isDisable; | ||
| var optionData = props.data; | ||
| var optionIsDisabled = (_optionData$isDisable = optionData.isDisabled) !== null && _optionData$isDisable !== void 0 ? _optionData$isDisable : false; | ||
| var handleOnPointerEnter = function handleOnPointerEnter() { | ||
| if (!webcomponent) { | ||
| onItemHover === null || onItemHover === void 0 ? void 0 : onItemHover(optionData); | ||
| } else { | ||
| webcomponent.triggerEvent('onItemHover', optionData); | ||
| } | ||
| }; | ||
| if (!isMulti) { | ||
| return /*#__PURE__*/_react.default.createElement(_reactSelect.components.Option, _extends({}, props, { | ||
| innerProps: _objectSpread(_objectSpread({}, props['innerProps']), {}, { | ||
| onPointerEnter: handleOnPointerEnter | ||
| }), | ||
| isDisabled: optionIsDisabled | ||
| }), allOptionsHaveIconAttribute ? /*#__PURE__*/_react.default.createElement(_react2.Icon, { | ||
| inlineStyle: { | ||
| marginRight: '16px' | ||
| }, | ||
| name: optionData.icon, | ||
| size: isCompact ? 'xs' : 'sm', | ||
| color: optionIsDisabled ? (0, _elvisColors.getColor)('disabled') : undefined | ||
| }) : '', /*#__PURE__*/_react.default.createElement(_styledComponents.DropdownOptionWithStatusWrapper, null, props.children, optionData.status && /*#__PURE__*/_react.default.createElement(_react2.Icon, { | ||
| name: _statusToIconMap.statusToIconMap[optionData.status].name, | ||
| color: _statusToIconMap.statusToIconMap[optionData.status].color, | ||
| size: 'xs' | ||
| }))); | ||
| } | ||
| var isSelectAllWithPartialSelected = hasSelectAllOption && props.children === selectAllOptionState.label && Array.isArray(currentVal) && currentVal.length > 0 && !props.isSelected; | ||
| return /*#__PURE__*/_react.default.createElement(_reactSelect.components.Option, _extends({}, props, { | ||
| innerProps: _objectSpread(_objectSpread({}, props['innerProps']), {}, { | ||
| onPointerEnter: handleOnPointerEnter | ||
| }), | ||
| isDisabled: optionIsDisabled | ||
| }), /*#__PURE__*/_react.default.createElement(_styledComponents.DropdownOptionWithStatusWrapper, null, /*#__PURE__*/_react.default.createElement(_styledComponents.DropdownCheckbox, null, /*#__PURE__*/_react.default.createElement(_styledComponents.DropdownCheckboxMark, { | ||
| id: "ewc-dropdown-checkbox__mark", | ||
| isSelected: props.isSelected, | ||
| isCompact: isCompact, | ||
| isSelectAllWithPartialSelected: isSelectAllWithPartialSelected, | ||
| isDisabled: optionIsDisabled | ||
| }), /*#__PURE__*/_react.default.createElement(_styledComponents.DropdownCheckboxLabel, { | ||
| isCompact: isCompact | ||
| }, props.children)), optionData.status && /*#__PURE__*/_react.default.createElement(_react2.Icon, { | ||
| name: _statusToIconMap.statusToIconMap[optionData.status].name, | ||
| color: _statusToIconMap.statusToIconMap[optionData.status].color, | ||
| size: 'xs' | ||
| }))); | ||
| }; | ||
| var ElviaError = function ElviaError(_ref2) { | ||
| var props = _extends({}, _ref2); | ||
| return /*#__PURE__*/_react.default.createElement(_styledComponents.DropdownErrorMessageWrapper, props, /*#__PURE__*/_react.default.createElement(_react2.Icon, { | ||
| name: "removeCircle", | ||
| color: (0, _elvisColors.getColor)('red'), | ||
| size: "xs" | ||
| }), /*#__PURE__*/_react.default.createElement(_styledComponents.DropdownErrorMessageText, null, errorMessage)); | ||
| }; | ||
| var ElviaPlaceholder = function ElviaPlaceholder(props) { | ||
| if (menuIsOpen && isSearchable) { | ||
| return null; | ||
| } | ||
| if (placeholderIcon) { | ||
| return /*#__PURE__*/_react.default.createElement(_reactSelect.components.Placeholder, props, /*#__PURE__*/_react.default.createElement(_react2.Icon, { | ||
| name: placeholderIcon, | ||
| color: isDisabled ? (0, _elvisColors.getColor)('disabled') : (0, _elvisColors.getColor)('placeholder'), | ||
| size: "xs" | ||
| }), props.children); | ||
| } | ||
| return /*#__PURE__*/_react.default.createElement(_reactSelect.components.Placeholder, props, props.children); | ||
| }; | ||
| var ElviaMultiValue = function ElviaMultiValue(props) { | ||
| if (menuIsOpen && isSearchable) { | ||
| return null; | ||
| } | ||
| if (props.getValue().length === 1) { | ||
| return props.getValue()[0].label; | ||
| } | ||
| if (isMulti && hasSelectAllOption) { | ||
| var allOptionsSelected = Array.isArray(currentVal) && currentVal.find(function (option) { | ||
| return (0, _lodash2.default)(option, selectAllOptionState); | ||
| }) !== undefined; | ||
| if (allOptionsSelected) { | ||
| return !props.index && allOptionsSelectedLabel; | ||
| } | ||
| } | ||
| return !props.index && "".concat(props.getValue().length, " valgte"); | ||
| }; | ||
| var ElviaSingleValue = function ElviaSingleValue(props) { | ||
| if (menuIsOpen && isSearchable) { | ||
| return null; | ||
| } | ||
| return /*#__PURE__*/_react.default.createElement(_reactSelect.components.SingleValue, props, allOptionsHaveIconAttribute ? /*#__PURE__*/_react.default.createElement(_react2.Icon, { | ||
| inlineStyle: { | ||
| marginRight: '16px' | ||
| }, | ||
| name: props.data.icon, | ||
| size: isCompact ? 'xs' : 'sm', | ||
| color: decideSingleValueColor(menuIsOpen, isSearchable, isDisabled) | ||
| }) : '', /*#__PURE__*/_react.default.createElement(_styledComponents.DropdownSingleValueOverflowWrapper, null, props.children)); | ||
| }; | ||
| var ElviaMenuList = function ElviaMenuList(props) { | ||
| return /*#__PURE__*/_react.default.createElement(_reactSelect.components.MenuList, props, props.children, hasLoadMoreItemsButton && /*#__PURE__*/_react.default.createElement(_styledComponents.DropdownMenuLoadMoreButton, { | ||
| isCompact: isCompact, | ||
| isLoading: isLoadingMoreItems, | ||
| onClick: handleLoadMoreButtonClick | ||
| }, /*#__PURE__*/_react.default.createElement(_styledComponents.DropdownMenuLoadMoreButtonContent // Could not get the loading prop to work with styled components for hover effect, | ||
| // so a data-attribute is used instead | ||
| , { | ||
| "data-loading": isLoadingMoreItems | ||
| }, /*#__PURE__*/_react.default.createElement(_styledComponents.DropdownMenuLoadMoreButtonIcon, { | ||
| isLoading: isLoadingMoreItems | ||
| }, /*#__PURE__*/_react.default.createElement(_react2.Icon, { | ||
| name: 'sync', | ||
| size: 'xs' | ||
| })), /*#__PURE__*/_react.default.createElement(_styledComponents.DropdownMenuLoadMoreButtonText, null, "Last inn flere")))); | ||
| }; | ||
| var handleLoadMoreButtonClick = function handleLoadMoreButtonClick() { | ||
| if (!webcomponent) { | ||
| onLoadMoreItems === null || onLoadMoreItems === void 0 ? void 0 : onLoadMoreItems(); | ||
| } else { | ||
| webcomponent.triggerEvent('onLoadMoreItems'); | ||
| } | ||
| }; | ||
| /** Object containing all components overridden in react-select by Elvis dropdown */ | ||
| var overrideComponents = { | ||
| DropdownIndicator: ElviaDropdownIndicator, | ||
| Option: ElviaOption, | ||
| IndicatorSeparator: function IndicatorSeparator() { | ||
| return null; | ||
| }, | ||
| ClearIndicator: function ClearIndicator() { | ||
| return null; | ||
| }, | ||
| MultiValue: ElviaMultiValue, | ||
| MultiValueRemove: function MultiValueRemove() { | ||
| return null; | ||
| }, | ||
| Placeholder: ElviaPlaceholder, | ||
| SingleValue: ElviaSingleValue, | ||
| MenuList: ElviaMenuList | ||
| }; | ||
| /** Start listener for adding and removing outline on dropdown when elements in focus */ | ||
| (0, _react.useEffect)(function () { | ||
| if (dropdownRef && dropdownRef.current) { | ||
| (0, _elvisToolbox.outlineListener)(dropdownRef.current); | ||
| } | ||
| return function () { | ||
| if (dropdownRef && dropdownRef.current) { | ||
| (0, _elvisToolbox.outlineListener)(dropdownRef.current, true); | ||
| } | ||
| }; | ||
| }, []); | ||
| /** Needed for webcomponent -> To update the default value */ | ||
| (0, _react.useEffect)(function () { | ||
| setCurrentVal(value); | ||
| updateValue(value); | ||
| }, [value]); | ||
| /** Update current value of dropdown and call updateValue to dispatch the new values*/ | ||
| var onChangeHandler = function onChangeHandler(event) { | ||
| if (hasSelectAllOption && isMulti && Array.isArray(event)) { | ||
| // Handle the logic for the "select all"-button in all different situations | ||
| if ( // selectAllOption is not currently selected, but becomes selected => select all | ||
| // currentVal is not an array, selectAllOption is not selected, and selectAllOption is in the new values from the event | ||
| !Array.isArray(currentVal) && currentVal !== selectAllOptionState && event.includes(selectAllOptionState) || // currentVal is an array that does not have selectAllOption in it, and selectAllOption is in the new values from the event | ||
| Array.isArray(currentVal) && !currentVal.find(function (option) { | ||
| return (0, _lodash2.default)(option, selectAllOptionState); | ||
| }) && event.includes(selectAllOptionState)) { | ||
| setCurrentVal([selectAllOptionState].concat(_toConsumableArray(itemsNotDisabled))); | ||
| updateValue([selectAllOptionState].concat(_toConsumableArray(itemsNotDisabled))); | ||
| } else if ( // selectAllOption is selected, but becomes unselected => unselect all | ||
| // Check that selectAllOption is currently selected | ||
| Array.isArray(currentVal) && currentVal.find(function (option) { | ||
| return (0, _lodash2.default)(option, selectAllOptionState); | ||
| }) && // Check that selectAllOption is no longer selected | ||
| !event.find(function (option) { | ||
| return (0, _lodash2.default)(option, selectAllOptionState); | ||
| })) { | ||
| setCurrentVal([]); | ||
| updateValue([]); | ||
| } else if ( // selectAllOption is selected, but not all options are selected any more => unselect selectAllOption | ||
| // Check that selectAllOption is selected | ||
| Array.isArray(currentVal) && currentVal.find(function (option) { | ||
| return (0, _lodash2.default)(option, selectAllOptionState); | ||
| }) && // Check that not all elements in options are selected any more (length + 1 because of selectAllOption being added) | ||
| event.length !== itemsNotDisabled.length + 1) { | ||
| // Filter out selectAllOption from the selected options | ||
| var newSelectedValue = event.filter(function (option) { | ||
| return !(0, _lodash2.default)(option, selectAllOptionState); | ||
| }); | ||
| setCurrentVal(newSelectedValue); | ||
| updateValue(newSelectedValue); | ||
| } else if ( // selectAllOption is not selected, but all options are selected => select selectAllOption | ||
| // Check that selectAllOption is not selected | ||
| Array.isArray(currentVal) && !currentVal.find(function (option) { | ||
| return (0, _lodash2.default)(option, selectAllOptionState); | ||
| }) && // Check that all options are selected | ||
| event.length == itemsNotDisabled.length) { | ||
| setCurrentVal([selectAllOptionState].concat(_toConsumableArray(event))); | ||
| updateValue([selectAllOptionState].concat(_toConsumableArray(event))); | ||
| } else { | ||
| setCurrentVal(event); | ||
| updateValue(event); | ||
| } | ||
| } else { | ||
| // If there is no "select all"-button, this logic is simple | ||
| setCurrentVal(event); | ||
| updateValue(event); | ||
| } | ||
| }; | ||
| /** Dispatch valueOnChange events */ | ||
| var updateValue = function updateValue(event) { | ||
| // return if value undefined, need this check on initation to remove value undefined callback | ||
| if (event === undefined) { | ||
| return; | ||
| } // Filter out selectAllOption from the dispatched selected options | ||
| var eventToDispatch = hasSelectAllOption && Array.isArray(event) ? event.filter(function (option) { | ||
| return !(0, _lodash2.default)(option, selectAllOptionState); | ||
| }) : event; | ||
| if (!webcomponent) { | ||
| valueOnChange === null || valueOnChange === void 0 ? void 0 : valueOnChange(eventToDispatch); | ||
| } else { | ||
| webcomponent.triggerEvent('valueOnChange', eventToDispatch); | ||
| } | ||
| return; | ||
| }; | ||
| (0, _react.useEffect)(function () { | ||
| if (errorMessage != '') { | ||
| setIsError(true); | ||
| } else { | ||
| setIsError(false); | ||
| } | ||
| }, [errorMessage]); // Cache is used for CSP nonce support | ||
| var cache = (0, _react.useMemo)(function () { | ||
| return (0, _cache.default)({ | ||
| key: 'elvia-dropdown', | ||
| nonce: window && window.__webpack_nonce__ ? window.__webpack_nonce__ : '', | ||
| prepend: true | ||
| }); | ||
| }, []); | ||
| return /*#__PURE__*/_react.default.createElement(_react3.CacheProvider, { | ||
| value: cache | ||
| }, /*#__PURE__*/_react.default.createElement("div", _extends({ | ||
| className: className !== null && className !== void 0 ? className : '', | ||
| style: inlineStyle | ||
| }, rest), /*#__PURE__*/_react.default.createElement(_styledComponents.DropdownWrapper, { | ||
| isFullWidth: isFullWidth, | ||
| isDisabled: isDisabled, | ||
| ref: dropdownRef, | ||
| "data-testid": "wrapper" | ||
| }, /*#__PURE__*/_react.default.createElement(_styledComponents.DropdownLabel, { | ||
| "aria-label": label, | ||
| isCompact: isCompact, | ||
| htmlFor: selectId, | ||
| "data-testid": "label" | ||
| }, label), /*#__PURE__*/_react.default.createElement(_reactSelect.default, { | ||
| blurInputOnSelect: !isMulti, | ||
| classNamePrefix: 'ewc-dropdown', | ||
| closeMenuOnSelect: !isMulti, | ||
| components: overrideComponents // eslint-disable-next-line @typescript-eslint/ban-ts-comment | ||
| //@ts-ignore | ||
| , | ||
| hasValue: false, | ||
| hideSelectedOptions: false, | ||
| inputId: selectId, | ||
| isDisabled: isDisabled, | ||
| isMulti: isMulti, | ||
| isSearchable: isSearchable, | ||
| menuIsOpen: menuIsOpen, | ||
| menuPlacement: menuPosition, | ||
| noOptionsMessage: function noOptionsMessage() { | ||
| return _noOptionsMessage; | ||
| }, | ||
| onChange: onChangeHandler, | ||
| onKeyDown: function onKeyDown(event) { | ||
| if (event.code === 'Enter' && !menuIsOpen) { | ||
| setMenuIsOpen(true); | ||
| } | ||
| }, | ||
| onMenuClose: function onMenuClose() { | ||
| return setMenuIsOpen(false); | ||
| }, | ||
| onMenuOpen: function onMenuOpen() { | ||
| return setMenuIsOpen(true); | ||
| }, | ||
| options: items && isMulti && hasSelectAllOption ? [selectAllOptionState].concat(_toConsumableArray(items)) : items, | ||
| placeholder: placeholder, | ||
| value: currentVal, | ||
| styles: customElviaStyles | ||
| }), isError ? /*#__PURE__*/_react.default.createElement(ElviaError, { | ||
| errorMessage: errorMessage, | ||
| "data-testid": "error" | ||
| }) : null))); | ||
| }; | ||
| var _default = Dropdown; | ||
| exports.default = _default; | ||
| "use strict";function _typeof(a){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_reactSelect=_interopRequireWildcard(require("react-select")),_react2=require("@elvia/elvis-icon/react"),_styledComponents=require("./styledComponents"),_lodash=_interopRequireDefault(require("lodash.uniqueid")),_lodash2=_interopRequireDefault(require("lodash.isequal")),_elvisColors=require("@elvia/elvis-colors"),_elvisToolbox=require("@elvia/elvis-toolbox"),_react3=require("@elvia/elvis-tooltip/react"),_config=require("./config"),_cache=_interopRequireDefault(require("@emotion/cache")),_react4=require("@emotion/react"),_statusToIconMap=require("./statusToIconMap"),_excluded=["items","value","isCompact","isDisabled","isMulti","isFullWidth","isSearchable","hasSelectAllOption","selectAllOption","allOptionsSelectedLabel","label","errorMessage","menuPosition","noOptionsMessage","placeholder","placeholderIcon","valueOnChange","onItemHover","hasLoadMoreItemsButton","onLoadMoreItems","isLoadingMoreItems","className","inlineStyle","webcomponent"];function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _getRequireWildcardCache(a){if("function"!=typeof WeakMap)return null;var b=new WeakMap,c=new WeakMap;return(_getRequireWildcardCache=function(a){return a?c:b})(a)}function _interopRequireWildcard(a,b){if(!b&&a&&a.__esModule)return a;if(null===a||"object"!==_typeof(a)&&"function"!=typeof a)return{default:a};var c=_getRequireWildcardCache(b);if(c&&c.has(a))return c.get(a);var d={},e=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var f in a)if("default"!=f&&Object.prototype.hasOwnProperty.call(a,f)){var g=e?Object.getOwnPropertyDescriptor(a,f):null;g&&(g.get||g.set)?Object.defineProperty(d,f,g):d[f]=a[f]}return d.default=a,c&&c.set(a,d),d}function _toConsumableArray(a){return _arrayWithoutHoles(a)||_iterableToArray(a)||_unsupportedIterableToArray(a)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _iterableToArray(a){if("undefined"!=typeof Symbol&&null!=a[Symbol.iterator]||null!=a["@@iterator"])return Array.from(a)}function _arrayWithoutHoles(a){if(Array.isArray(a))return _arrayLikeToArray(a)}function _extends(){return _extends=Object.assign?Object.assign.bind():function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)Object.prototype.hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},_extends.apply(this,arguments)}function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}function _defineProperty(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function _slicedToArray(a,b){return _arrayWithHoles(a)||_iterableToArrayLimit(a,b)||_unsupportedIterableToArray(a,b)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(a,b){if(a){if("string"==typeof a)return _arrayLikeToArray(a,b);var c=Object.prototype.toString.call(a).slice(8,-1);return"Object"===c&&a.constructor&&(c=a.constructor.name),"Map"===c||"Set"===c?Array.from(a):"Arguments"===c||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c)?_arrayLikeToArray(a,b):void 0}}function _arrayLikeToArray(a,b){(null==b||b>a.length)&&(b=a.length);for(var c=0,d=Array(b);c<b;c++)d[c]=a[c];return d}function _iterableToArrayLimit(a,b){var c=null==a?null:"undefined"!=typeof Symbol&&a[Symbol.iterator]||a["@@iterator"];if(null!=c){var d,e,f=[],g=!0,h=!1;try{for(c=c.call(a);!(g=(d=c.next()).done)&&(f.push(d.value),!(b&&f.length===b));g=!0);}catch(a){h=!0,e=a}finally{try{g||null==c["return"]||c["return"]()}finally{if(h)throw e}}return f}}function _arrayWithHoles(a){if(Array.isArray(a))return a}function _objectWithoutProperties(a,b){if(null==a)return{};var c,d,e=_objectWithoutPropertiesLoose(a,b);if(Object.getOwnPropertySymbols){var f=Object.getOwnPropertySymbols(a);for(d=0;d<f.length;d++)c=f[d],0<=b.indexOf(c)||Object.prototype.propertyIsEnumerable.call(a,c)&&(e[c]=a[c])}return e}function _objectWithoutPropertiesLoose(a,b){if(null==a)return{};var c,d,e={},f=Object.keys(a);for(d=0;d<f.length;d++)c=f[d],0<=b.indexOf(c)||(e[c]=a[c]);return e}var Dropdown=function(a){var b=a.items,c=void 0===b?[]:b,d=a.value,e=void 0===d?void 0:d,f=a.isCompact,g=a.isDisabled,h=a.isMulti,i=a.isFullWidth,j=a.isSearchable,k=void 0!==j&&j,l=a.hasSelectAllOption,m=void 0!==l&&l,n=a.selectAllOption,o=a.allOptionsSelectedLabel,p=void 0===o?"Alle":o,q=a.label,r=a.errorMessage,s=void 0===r?"":r,t=a.menuPosition,u=void 0===t?"auto":t,v=a.noOptionsMessage,w=void 0===v?"Ingen tilgjengelige valg":v,x=a.placeholder,y=void 0===x?"":x,z=a.placeholderIcon,A=a.valueOnChange,B=a.onItemHover,C=a.hasLoadMoreItemsButton,D=a.onLoadMoreItems,E=a.isLoadingMoreItems,F=a.className,G=a.inlineStyle,H=a.webcomponent,I=_objectWithoutProperties(a,_excluded);(0,_elvisToolbox.warnDeprecatedProps)(_config.config,arguments[0]);var J=(0,_react.useState)(e),K=_slicedToArray(J,2),L=K[0],M=K[1],N=(0,_react.useState)(!1),O=_slicedToArray(N,2),P=O[0],Q=O[1],R=(0,_react.useState)(!1),S=_slicedToArray(R,2),T=S[0],U=S[1],V=(0,_react.useState)({label:"Alle",value:"*"}),W=_slicedToArray(V,2),X=W[0],Y=W[1],Z=(0,_react.useRef)(null);(0,_react.useEffect)(function(){n&&Y(function(a){return _objectSpread(_objectSpread({},a),n)})},[n]);/** Memoized variable with all the items that are not disabled. Updates when `items` changes. */var $=(0,_react.useMemo)(function(){return c.filter(function(a){return!a.isDisabled})},[c]),_=(0,_lodash.default)("ewc-dropdown-"),aa=function decideControlBorder(a,b){return a?"1px solid ".concat((0,_elvisColors.getColor)("disabled")):b?"2px solid ".concat((0,_elvisColors.getColor)("error")):"1px solid ".concat((0,_elvisColors.getColor)("black"))},ba=function decideOptionBg(a,b,c){return a&&b&&c?(0,_elvisColors.getColor)("grey-05"):a&&!b?(0,_elvisColors.getColor)("grey-05"):b&&!c?(0,_elvisColors.getColor)("grey-10"):(0,_elvisColors.getColor)("white")},ca=function decideOptionHoverBg(a,b,c){return c?(0,_elvisColors.getColor)("white"):a&&b?(0,_elvisColors.getColor)("grey-05"):a&&!b?(0,_elvisColors.getColor)("grey-10"):(0,_elvisColors.getColor)("grey-05")},da=function decideSingleValueColor(a,b,c){return c?(0,_elvisColors.getColor)("disabled"):a&&b?(0,_elvisColors.getColor)("grey-70"):(0,_elvisColors.getColor)("black")},ea=function decideBackgroundColor(a,b,c){return a||b?(0,_elvisColors.getColor)("elvia-charge"):// "select all"-option should have green background if any options are selected | ||
| Array.isArray(L)&&0<L.length&&c===X.label?(0,_elvisColors.getColor)("elvia-charge"):(0,_elvisColors.getColor)("white")},fa=function decideValueContainerHeight(){return ga&&!h?"inherit":"22px"},ga=(0,_react.useMemo)(function(){return 0<c.length&&c.every(function(a){return a.icon!==void 0})},[c]),ha=function handleLoadMoreButtonClick(){H?H.triggerEvent("onLoadMoreItems"):null===D||void 0===D?void 0:D()};(0,_react.useEffect)(function(){return Z&&Z.current&&(0,_elvisToolbox.outlineListener)(Z.current),function(){Z&&Z.current&&(0,_elvisToolbox.outlineListener)(Z.current,!0)}},[]),(0,_react.useEffect)(function(){M(e),ia(e)},[e]);/** Update current value of dropdown and call updateValue to dispatch the new values*/var ia=function updateValue(a){// return if value undefined, need this check on initation to remove value undefined callback | ||
| if(void 0!==a){// Filter out selectAllOption from the dispatched selected options | ||
| var b=m&&Array.isArray(a)?a.filter(function(a){return!(0,_lodash2.default)(a,X)}):a;H?H.triggerEvent("valueOnChange",b):null===A||void 0===A?void 0:A(b)}};/** Dispatch valueOnChange events */(0,_react.useEffect)(function(){""==s?Q(!1):Q(!0)},[s]);// Cache is used for CSP nonce support | ||
| var ja=(0,_react.useMemo)(function(){return(0,_cache.default)({key:"elvia-dropdown",nonce:window&&window.__webpack_nonce__?window.__webpack_nonce__:"",prepend:!0})},[]);return/*#__PURE__*/_react.default.createElement(_react4.CacheProvider,{value:ja},/*#__PURE__*/_react.default.createElement("div",_extends({className:null!==F&&void 0!==F?F:"",style:G},I),/*#__PURE__*/_react.default.createElement(_styledComponents.DropdownWrapper,{isFullWidth:i,isDisabled:g,ref:Z,"data-testid":"wrapper"},/*#__PURE__*/_react.default.createElement(_styledComponents.DropdownLabel,{"aria-label":q,isCompact:f,htmlFor:_,"data-testid":"label"},q),/*#__PURE__*/_react.default.createElement(_reactSelect.default,{blurInputOnSelect:!h,classNamePrefix:"ewc-dropdown",closeMenuOnSelect:!h,components:{DropdownIndicator:function ElviaDropdownIndicator(a){return/*#__PURE__*/_react.default.createElement(_reactSelect.components.DropdownIndicator,a,/*#__PURE__*/_react.default.createElement(_react2.Icon,{name:T?"arrowUpBold":"arrowDownBold",color:g?(0,_elvisColors.getColor)("disabled"):void 0,customSize:f?"16px":"20px"}))},Option:function ElviaOption(a){var b,c,d=(0,_react.useRef)(null),e=a.data,g=!(null===(b=e.isDisabled)||void 0===b)&&b,i=function handleOnPointerEnter(){H?H.triggerEvent("onItemHover",e):null===B||void 0===B?void 0:B(e)},j=m&&a.children===X.label&&Array.isArray(L)&&0<L.length&&!a.isSelected;return/*#__PURE__*/_react.default.createElement(_reactSelect.components.Option,_extends({},a,{innerProps:_objectSpread(_objectSpread({},a.innerProps),{},{onPointerEnter:i}),isDisabled:g}),!h&&ga?/*#__PURE__*/_react.default.createElement(_react2.Icon,{inlineStyle:{marginRight:"16px"},name:e.icon,size:f?"xs":"sm",color:g?(0,_elvisColors.getColor)("disabled"):void 0}):"",/*#__PURE__*/_react.default.createElement(_styledComponents.DropdownOptionWithStatusWrapper,{ref:d},h?/*#__PURE__*/_react.default.createElement(_styledComponents.DropdownCheckbox,null,/*#__PURE__*/_react.default.createElement(_styledComponents.DropdownCheckboxMark,{id:"ewc-dropdown-checkbox__mark",isSelected:a.isSelected,isCompact:f,isSelectAllWithPartialSelected:j,isDisabled:g}),/*#__PURE__*/_react.default.createElement(_styledComponents.DropdownCheckboxLabel,{isCompact:f},a.children)):a.children,e.status&&/*#__PURE__*/_react.default.createElement(_react3.Tooltip,{trigger:/*#__PURE__*/_react.default.createElement(_react2.Icon,{name:_statusToIconMap.statusToIconMap[e.status].name,color:_statusToIconMap.statusToIconMap[e.status].color,size:"xs"}),content:null!==(c=e.tooltip)&&void 0!==c?c:"",showDelay:100,position:"right",isDisabled:!e.tooltip,triggerAreaRef:d})))},IndicatorSeparator:function IndicatorSeparator(){return null},ClearIndicator:function ClearIndicator(){return null},MultiValue:function ElviaMultiValue(a){if(T&&k)return null;if(1===a.getValue().length)return a.getValue()[0].label;if(h&&m){var b=Array.isArray(L)&&void 0!==L.find(function(a){return(0,_lodash2.default)(a,X)});if(b)return!a.index&&p}return!a.index&&"".concat(a.getValue().length," valgte")},MultiValueRemove:function MultiValueRemove(){return null},Placeholder:function ElviaPlaceholder(a){return T&&k?null:z?/*#__PURE__*/_react.default.createElement(_reactSelect.components.Placeholder,a,/*#__PURE__*/_react.default.createElement(_react2.Icon,{name:z,color:g?(0,_elvisColors.getColor)("disabled"):(0,_elvisColors.getColor)("placeholder"),size:"xs"}),a.children):/*#__PURE__*/_react.default.createElement(_reactSelect.components.Placeholder,a,a.children)},SingleValue:function ElviaSingleValue(a){return T&&k?null:/*#__PURE__*/_react.default.createElement(_reactSelect.components.SingleValue,a,ga?/*#__PURE__*/_react.default.createElement(_react2.Icon,{inlineStyle:{marginRight:"16px"},name:a.data.icon,size:f?"xs":"sm",color:da(T,k,g)}):"",/*#__PURE__*/_react.default.createElement(_styledComponents.DropdownSingleValueOverflowWrapper,null,a.children))},MenuList:function ElviaMenuList(a){return/*#__PURE__*/_react.default.createElement(_reactSelect.components.MenuList,a,a.children,C&&/*#__PURE__*/_react.default.createElement(_styledComponents.DropdownMenuLoadMoreButton,{isCompact:f,isLoading:E,onClick:ha},/*#__PURE__*/_react.default.createElement(_styledComponents.DropdownMenuLoadMoreButtonContent// Could not get the loading prop to work with styled components for hover effect, | ||
| // so a data-attribute is used instead | ||
| ,{"data-loading":E},/*#__PURE__*/_react.default.createElement(_styledComponents.DropdownMenuLoadMoreButtonIcon,{isLoading:E},/*#__PURE__*/_react.default.createElement(_react2.Icon,{name:"sync",size:"xs"})),/*#__PURE__*/_react.default.createElement(_styledComponents.DropdownMenuLoadMoreButtonText,null,"Last inn flere"))))}}// eslint-disable-next-line @typescript-eslint/ban-ts-comment | ||
| //@ts-ignore | ||
| ,hasValue:!1,hideSelectedOptions:!1,inputId:_,isDisabled:g,isMulti:h,isSearchable:k,menuIsOpen:T,menuPlacement:u,noOptionsMessage:function noOptionsMessage(){return w},onChange:function onChangeHandler(a){if(!(m&&h&&Array.isArray(a)))// If there is no "select all"-button, this logic is simple | ||
| M(a),ia(a);else// Handle the logic for the "select all"-button in all different situations | ||
| if(// selectAllOption is not currently selected, but becomes selected => select all | ||
| // currentVal is not an array, selectAllOption is not selected, and selectAllOption is in the new values from the event | ||
| !Array.isArray(L)&&L!==X&&a.includes(X)||// currentVal is an array that does not have selectAllOption in it, and selectAllOption is in the new values from the event | ||
| Array.isArray(L)&&!L.find(function(a){return(0,_lodash2.default)(a,X)})&&a.includes(X))M([X].concat(_toConsumableArray($))),ia([X].concat(_toConsumableArray($)));else if(// selectAllOption is selected, but becomes unselected => unselect all | ||
| // Check that selectAllOption is currently selected | ||
| Array.isArray(L)&&L.find(function(a){return(0,_lodash2.default)(a,X)})&&// Check that selectAllOption is no longer selected | ||
| !a.find(function(a){return(0,_lodash2.default)(a,X)}))M([]),ia([]);else if(// selectAllOption is selected, but not all options are selected any more => unselect selectAllOption | ||
| // Check that selectAllOption is selected | ||
| Array.isArray(L)&&L.find(function(a){return(0,_lodash2.default)(a,X)})&&// Check that not all elements in options are selected any more (length + 1 because of selectAllOption being added) | ||
| a.length!==$.length+1){// Filter out selectAllOption from the selected options | ||
| var b=a.filter(function(a){return!(0,_lodash2.default)(a,X)});M(b),ia(b)}else// selectAllOption is not selected, but all options are selected => select selectAllOption | ||
| // Check that selectAllOption is not selected | ||
| Array.isArray(L)&&!L.find(function(a){return(0,_lodash2.default)(a,X)})&&// Check that all options are selected | ||
| a.length==$.length?(M([X].concat(_toConsumableArray(a))),ia([X].concat(_toConsumableArray(a)))):(M(a),ia(a))},onKeyDown:function onKeyDown(a){"Enter"!==a.code||T||U(!0)},onMenuClose:function onMenuClose(){return U(!1)},onMenuOpen:function onMenuOpen(){return U(!0)},options:c&&h&&m?[X].concat(_toConsumableArray(c)):c,placeholder:y,value:L,styles:{container:function container(a){return _objectSpread(_objectSpread({},a),{},{maxWidth:i?"":"448px"})},control:function control(){return{boxSizing:"border-box",display:"flex",alignItems:"center",backgroundColor:(0,_elvisColors.getColor)("white"),borderRadius:"4px",border:aa(g,P),maxHeight:f?"34px":"48px",minHeight:f?"34px":"48px",minWidth:"72px",marginBottom:"0px",padding:P?"0px":"1px",cursor:"pointer",boxShadow:"0","&:hover":{border:"2px solid ".concat((0,_elvisColors.getColor)("elvia-charge")),padding:"0px"}}},dropdownIndicator:function dropdownIndicator(a){return _objectSpread(_objectSpread({},a),{},{height:f?"16px":"20px",width:f?"16px":"20px",padding:"0px"})},indicatorsContainer:function indicatorsContainer(a){return _objectSpread(_objectSpread({},a),{},{paddingTop:f?"7px":"13px",paddingBottom:f?"7px":"13px",paddingRight:f?"11px":"15px"})},menu:function menu(a){return _objectSpread(_objectSpread({},a),{},{boxShadow:"0px 0px 40px rgba(0, 0, 0, 0.06);",minWidth:"100%",width:"fit-content",zIndex:100})},menuList:function menuList(a){return _objectSpread(_objectSpread({},a),{},{maxHeight:f?"181px":"241px",padding:"0",zIndex:10})},multiValue:function multiValue(a,b){return _objectSpread(_objectSpread({},a),{},{background:(0,_elvisColors.getColor)("white"),margin:"0px",color:b.isDisabled?(0,_elvisColors.getColor)("disabled"):(0,_elvisColors.getColor)("black")})},multiValueLabel:function multiValueLabel(a,b){return _objectSpread(_objectSpread({},a),{},{fontFamily:"Red Hat Text",fontWeight:"400",fontStyle:"normal",fontSize:f?"14px":"16px",lineHeight:"22px",color:b.isDisabled?(0,_elvisColors.getColor)("disabled"):(0,_elvisColors.getColor)("black"),paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px"})},noOptionsMessage:function noOptionsMessage(a){return _objectSpread(_objectSpread({},a),{},{fontFamily:"Red Hat Text",color:(0,_elvisColors.getColor)("grey-70"),textAlign:"left"})},option:function option(a,b){return _objectSpread(_objectSpread({},a),{},{display:"flex",alignItems:"center",gap:"8px",backgroundColor:ba(b.isFocused,b.isSelected,b.isMulti),color:b.isDisabled?(0,_elvisColors.getColor)("disabled"):(0,_elvisColors.getColor)("black"),height:"100%",paddingTop:"7px",paddingBottom:"7px",paddingLeft:f?"9px":"15px",fontSize:f?"14px":"16px",lineHeight:f?"18px":"26px",border:"1px solid transparent",cursor:b.isDisabled?"not-allowed":"pointer",overflowX:"hidden",textOverflow:"ellipsis","&:hover":{backgroundColor:ca(b.isSelected,b.isMulti,b.isDisabled),"#ewc-dropdown-checkbox__mark":{backgroundColor:b.isDisabled?(0,_elvisColors.getColor)("white"):(0,_elvisColors.getColor)("elvia-charge")}},"#ewc-dropdown-checkbox__mark":{background:ea(b.isFocused,b.isSelected,b.label)},".ewc-dropdown-checkbox .ewc-dropdown-checkbox__mark":{background:ea(b.isFocused,b.isSelected,b.label)},borderBottom:b.label===X.label?"1px solid ".concat((0,_elvisColors.getColor)("grey-10")):""})},placeholder:function placeholder(a){return _objectSpread(_objectSpread({},a),{},{fontFamily:"Red Hat Text",fontWeight:"400",fontStyle:"normal",fontSize:f?"14px":"16px",lineHeight:"22px",color:g?(0,_elvisColors.getColor)("disabled"):(0,_elvisColors.getColor)("grey-70"),margin:"0px",display:"flex",flexDirection:"row",alignItems:"center",gap:"8px",overflowX:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",maxWidth:"calc(100% - 12px)"})},singleValue:function singleValue(a){return _objectSpread(_objectSpread({},a),{},{fontFamily:"Red Hat Text",fontWeight:"400",fontStyle:"normal",fontSize:f?"14px":"16px",lineHeight:"22px",color:da(T,k,g),margin:"0px",maxWidth:"calc(100% - 12px)",display:"flex",alignItems:"center"})},valueContainer:function valueContainer(a,b){return _objectSpread(_objectSpread({},a),{},{display:"flex",color:b.isDisabled?(0,_elvisColors.getColor)("disabled"):(0,_elvisColors.getColor)("black"),fontFamily:"Red Hat Text",fontWeight:"400",fontStyle:"normal",fontSize:f?"14px":"16px",lineHeight:"22px",paddingLeft:f?"8px":"15px",paddingRight:"2px",paddingTop:0,paddingBottom:0,height:fa(),whiteSpace:"nowrap"})},input:function input(a){return _objectSpread(_objectSpread({},a),{},{padding:0,margin:0})}}}),P?/*#__PURE__*/_react.default.createElement(function ElviaError(a){var b=_extends({},a);return/*#__PURE__*/_react.default.createElement(_styledComponents.DropdownErrorMessageWrapper,b,/*#__PURE__*/_react.default.createElement(_react2.Icon,{name:"removeCircle",color:(0,_elvisColors.getColor)("red"),size:"xs"}),/*#__PURE__*/_react.default.createElement(_styledComponents.DropdownErrorMessageText,null,s))},{errorMessage:s,"data-testid":"error"}):null)))},_default=Dropdown;exports.default=_default; | ||
| //# sourceMappingURL=elvia-dropdown.js.map |
@@ -5,26 +5,4 @@ /* | ||
| */ | ||
| "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| exports.statusToIconMap = void 0; | ||
| var statusToIconMap = { | ||
| error: { | ||
| name: 'removeCircle', | ||
| color: 'error' | ||
| }, | ||
| warning: { | ||
| name: 'warningCircle', | ||
| color: 'warning' | ||
| }, | ||
| info: { | ||
| name: 'informationCircle' | ||
| }, | ||
| informative: { | ||
| name: 'informationCircle' | ||
| } // Make it possible to set status as either 'info' or 'informative' | ||
| }; | ||
| exports.statusToIconMap = statusToIconMap; | ||
| "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.statusToIconMap=void 0;var statusToIconMap={error:{name:"removeCircle",color:"error"},warning:{name:"warningCircle",color:"warning"},info:{name:"informationCircle"},informative:{name:"informationCircle"}// Make it possible to set status as either 'info' or 'informative' | ||
| };exports.statusToIconMap=statusToIconMap; | ||
| //# sourceMappingURL=statusToIconMap.js.map |
@@ -5,248 +5,7 @@ /* | ||
| */ | ||
| "use strict"; | ||
| function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); } | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| exports.DropdownWrapper = exports.DropdownSingleValueOverflowWrapper = exports.DropdownOptionWithStatusWrapper = exports.DropdownMenuLoadMoreButtonText = exports.DropdownMenuLoadMoreButtonIcon = exports.DropdownMenuLoadMoreButtonContent = exports.DropdownMenuLoadMoreButton = exports.DropdownLabel = exports.DropdownErrorMessageWrapper = exports.DropdownErrorMessageText = exports.DropdownCheckboxMark = exports.DropdownCheckboxLabel = exports.DropdownCheckbox = void 0; | ||
| var _styledComponents = _interopRequireWildcard(require("styled-components")); | ||
| var _elvisColors = require("@elvia/elvis-colors"); | ||
| var _elvisTypography = require("@elvia/elvis-typography"); | ||
| function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } | ||
| function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } | ||
| var colors = { | ||
| charge: (0, _elvisColors.getColor)('elvia-charge'), | ||
| white: (0, _elvisColors.getColor)('white'), | ||
| black: (0, _elvisColors.getColor)('black'), | ||
| grey80: (0, _elvisColors.getColor)('grey-80'), | ||
| disabled: (0, _elvisColors.getColor)('disabled'), | ||
| focusOutline: (0, _elvisColors.getColor)('focus-outline') | ||
| }; | ||
| var typography = { | ||
| textMdStrong: (0, _elvisTypography.getTypographyCss)('text-md-strong'), | ||
| textMd: (0, _elvisTypography.getTypographyCss)('text-md'), | ||
| textSm: (0, _elvisTypography.getTypographyCss)('text-sm') | ||
| }; | ||
| var DropdownWrapper = _styledComponents.default.span.withConfig({ | ||
| displayName: "styledComponents__DropdownWrapper", | ||
| componentId: "sc-1u4m1mo-0" | ||
| })(["display:block;position:relative;text-align:left;box-sizing:border-box;width:100%;padding-top:8px;", ";cursor:", ";&:focus-within{.ewc-dropdown__control{border:2px solid ", ";padding:0px;outline:2px solid ", ";outline-offset:2px;}}"], function (props) { | ||
| return props.isFullWidth ? null : 'max-width: 448px'; | ||
| }, function (props) { | ||
| return props.isDisabled ? 'not-allowed' : 'pointer'; | ||
| }, colors.charge, colors.focusOutline); | ||
| exports.DropdownWrapper = DropdownWrapper; | ||
| var DropdownLabel = _styledComponents.default.label.withConfig({ | ||
| displayName: "styledComponents__DropdownLabel", | ||
| componentId: "sc-1u4m1mo-1" | ||
| })(["position:", ";top:", ";left:", ";background:", ";padding:", ";z-index:", ";display:flex;margin-bottom:4px;font-family:'Red Hat Text',Verdana,sans-serif;font-weight:500;font-size:", ";line-height:", ";color:", ";text-align:left;"], function (props) { | ||
| return props.isCompact && 'absolute'; | ||
| }, function (props) { | ||
| return props.isCompact && '0'; | ||
| }, function (props) { | ||
| return props.isCompact && '8px'; | ||
| }, function (props) { | ||
| return props.isCompact && colors.white; | ||
| }, function (props) { | ||
| return props.isCompact && '0 3px'; | ||
| }, function (props) { | ||
| return props.isCompact && '1'; | ||
| }, function (props) { | ||
| return props.isCompact ? '10px' : '16px'; | ||
| }, function (props) { | ||
| return props.isCompact ? '10px' : '23px'; | ||
| }, colors.black); | ||
| exports.DropdownLabel = DropdownLabel; | ||
| var DropdownErrorMessageWrapper = _styledComponents.default.div.withConfig({ | ||
| displayName: "styledComponents__DropdownErrorMessageWrapper", | ||
| componentId: "sc-1u4m1mo-2" | ||
| })(["display:flex;flex-direction:row;align-items:center;margin-top:4px;"]); | ||
| exports.DropdownErrorMessageWrapper = DropdownErrorMessageWrapper; | ||
| var DropdownErrorMessageText = _styledComponents.default.span.withConfig({ | ||
| displayName: "styledComponents__DropdownErrorMessageText", | ||
| componentId: "sc-1u4m1mo-3" | ||
| })(["", " font-style:normal;letter-spacing:0px;text-align:left;margin-left:8px;width:100%;"], typography.textSm); | ||
| exports.DropdownErrorMessageText = DropdownErrorMessageText; | ||
| var DropdownCheckbox = _styledComponents.default.label.withConfig({ | ||
| displayName: "styledComponents__DropdownCheckbox", | ||
| componentId: "sc-1u4m1mo-4" | ||
| })(["display:flex;align-items:center;width:fit-content;box-sizing:border-box;text-align:left;pointer-events:none;outline:none;@media screen and (-ms-high-contrast:none){width:100%;}"]); | ||
| exports.DropdownCheckbox = DropdownCheckbox; | ||
| var generateCheckmarkBeforeElement = function generateCheckmarkBeforeElement(params) { | ||
| return (0, _styledComponents.css)(["&::before{content:'';position:absolute;top:", ";left:", ";height:", ";width:", ";background-color:", ";border-radius:15px;transform:", ";transform-origin:", ";}"], params.top, params.left, params.height, params.width, params.backgroundColor, params.transform, params.transformOrigin); | ||
| }; | ||
| var generateCheckmarkAfterElement = function generateCheckmarkAfterElement(params) { | ||
| return (0, _styledComponents.css)(["&::after{content:'';position:absolute;bottom:", ";left:", ";height:", ";width:", ";background-color:", ";border-radius:15px;transform:", ";transform-origin:", ";}"], params.bottom, params.left, params.height, params.width, params.backgroundColor, params.transform, params.transformOrigin); | ||
| }; | ||
| var decideCheckMarkCompactAndSelectedStyle = function decideCheckMarkCompactAndSelectedStyle(isCompact, isSelecteed, isSelectAllWithPartialSelected, isDisabled) { | ||
| // Make compact line for "select all"-option when not everything is selected | ||
| if (isCompact && isSelectAllWithPartialSelected) { | ||
| return (0, _styledComponents.css)(["background-color:", ";", ""], colors.charge, generateCheckmarkBeforeElement({ | ||
| top: 'calc(50% - 1px)', | ||
| left: '-24%', | ||
| height: '2px', | ||
| width: '40%', | ||
| transform: 'translateX(8px)', | ||
| transformOrigin: '(left bottom)', | ||
| backgroundColor: isDisabled ? colors.disabled : colors.black | ||
| })); | ||
| } // Make normal line for "select all"-option when not everything is selected | ||
| if (!isCompact && isSelectAllWithPartialSelected) { | ||
| return (0, _styledComponents.css)(["background-color:", ";", ""], colors.charge, generateCheckmarkBeforeElement({ | ||
| top: 'calc(50% - 1px)', | ||
| left: '-10%', | ||
| height: '2px', | ||
| width: '50%', | ||
| transform: 'translateX(8px)', | ||
| transformOrigin: '(left bottom)', | ||
| backgroundColor: isDisabled ? colors.disabled : colors.black | ||
| })); | ||
| } // Make compact checkmark | ||
| if (isCompact && isSelecteed) { | ||
| return (0, _styledComponents.css)(["background-color:", ";", " ", ""], colors.charge, generateCheckmarkBeforeElement({ | ||
| top: '50%', | ||
| left: '-45%', | ||
| height: '39%', | ||
| width: '2px', | ||
| transform: 'translateX(10px) rotate(-45deg)', | ||
| transformOrigin: '[left bottom]', | ||
| backgroundColor: isDisabled ? colors.disabled : colors.black | ||
| }), generateCheckmarkAfterElement({ | ||
| bottom: '40%', | ||
| left: '-45%', | ||
| height: '2px', | ||
| width: '80%', | ||
| transform: 'translateX(10px) rotate(-55deg)', | ||
| transformOrigin: '[left bottom]', | ||
| backgroundColor: isDisabled ? colors.disabled : colors.black | ||
| })); | ||
| } // Make normal checkmark | ||
| if (!isCompact && isSelecteed) { | ||
| return (0, _styledComponents.css)(["background-color:", ";", " ", ""], colors.charge, generateCheckmarkBeforeElement({ | ||
| top: '55%', | ||
| left: '-9%', | ||
| height: '30%', | ||
| width: '2px', | ||
| transform: 'translateX(8px) rotate(-45deg)', | ||
| transformOrigin: '(left bottom)', | ||
| backgroundColor: isDisabled ? colors.disabled : colors.black | ||
| }), generateCheckmarkAfterElement({ | ||
| bottom: '15%', | ||
| left: '-4%', | ||
| height: '2px', | ||
| width: '83%', | ||
| transform: 'translateX(10px) rotate(-55deg)', | ||
| transformOrigin: 'left bottom', | ||
| backgroundColor: isDisabled ? colors.disabled : colors.black | ||
| })); | ||
| } | ||
| return (0, _styledComponents.css)([""]); | ||
| }; | ||
| var DropdownCheckboxMark = _styledComponents.default.span.withConfig({ | ||
| displayName: "styledComponents__DropdownCheckboxMark", | ||
| componentId: "sc-1u4m1mo-5" | ||
| })(["box-sizing:border-box;min-width:", ";min-height:", ";max-width:", ";max-height:", ";border-radius:3px;border:1px solid ", ";background:", ";position:relative;", ""], function (props) { | ||
| return props.isCompact ? '16px' : '24px'; | ||
| }, function (props) { | ||
| return props.isCompact ? '16px' : '24px'; | ||
| }, function (props) { | ||
| return props.isCompact ? '16px' : '24px'; | ||
| }, function (props) { | ||
| return props.isCompact ? '16px' : '24px'; | ||
| }, function (props) { | ||
| return props.isDisabled ? colors.disabled : colors.black; | ||
| }, colors.white, function (props) { | ||
| return decideCheckMarkCompactAndSelectedStyle(props.isCompact, props.isSelected, props.isSelectAllWithPartialSelected, props.isDisabled); | ||
| }); | ||
| exports.DropdownCheckboxMark = DropdownCheckboxMark; | ||
| var DropdownCheckboxLabel = _styledComponents.default.span.withConfig({ | ||
| displayName: "styledComponents__DropdownCheckboxLabel", | ||
| componentId: "sc-1u4m1mo-6" | ||
| })(["font-family:'Red Hat Text',Verdana,sans-serif;font-style:normal;font-size:", ";margin-left:8px;line-height:", ";width:fit-content;"], function (props) { | ||
| return props.isCompact ? '14px' : '16px'; | ||
| }, function (props) { | ||
| return props.isCompact ? '16px;' : '24px'; | ||
| }); | ||
| exports.DropdownCheckboxLabel = DropdownCheckboxLabel; | ||
| var DropdownSingleValueOverflowWrapper = _styledComponents.default.span.withConfig({ | ||
| displayName: "styledComponents__DropdownSingleValueOverflowWrapper", | ||
| componentId: "sc-1u4m1mo-7" | ||
| })(["overflow:hidden;text-overflow:ellipsis;"]); | ||
| exports.DropdownSingleValueOverflowWrapper = DropdownSingleValueOverflowWrapper; | ||
| var DropdownOptionWithStatusWrapper = _styledComponents.default.div.withConfig({ | ||
| displayName: "styledComponents__DropdownOptionWithStatusWrapper", | ||
| componentId: "sc-1u4m1mo-8" | ||
| })(["display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;"]); | ||
| exports.DropdownOptionWithStatusWrapper = DropdownOptionWithStatusWrapper; | ||
| var DropdownMenuLoadMoreButton = _styledComponents.default.button.withConfig({ | ||
| displayName: "styledComponents__DropdownMenuLoadMoreButton", | ||
| componentId: "sc-1u4m1mo-9" | ||
| })(["width:100%;height:", ";display:flex;justify-content:center;align-items:center;flex-direction:row;border:none;background:", ";", ""], function (props) { | ||
| return props.isCompact ? '32px' : '40px'; | ||
| }, colors.white, function (props) { | ||
| return props.isLoading ? (0, _styledComponents.css)(["cursor:wait;"]) : (0, _styledComponents.css)(["cursor:pointer;"]); | ||
| }); | ||
| exports.DropdownMenuLoadMoreButton = DropdownMenuLoadMoreButton; | ||
| var DropdownMenuLoadMoreButtonContent = _styledComponents.default.span.withConfig({ | ||
| displayName: "styledComponents__DropdownMenuLoadMoreButtonContent", | ||
| componentId: "sc-1u4m1mo-10" | ||
| })(["width:fit-content;height:fit-content;display:flex;justify-content:center;align-items:center;flex-direction:row;gap:8px;padding-bottom:2px;border-bottom:2px solid transparent;", ":hover &:not([data-loading='true']){border-color:", ";}"], DropdownMenuLoadMoreButton, colors.charge); | ||
| exports.DropdownMenuLoadMoreButtonContent = DropdownMenuLoadMoreButtonContent; | ||
| var DropdownMenuLoadMoreButtonText = _styledComponents.default.span.withConfig({ | ||
| displayName: "styledComponents__DropdownMenuLoadMoreButtonText", | ||
| componentId: "sc-1u4m1mo-11" | ||
| })(["font-family:'Red Hat Display',Verdana,sans-serif;font-style:normal;font-weight:500;font-size:14px;line-height:16px;"]); | ||
| exports.DropdownMenuLoadMoreButtonText = DropdownMenuLoadMoreButtonText; | ||
| var spinningKeyframes = (0, _styledComponents.keyframes)(["0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}"]); | ||
| var DropdownMenuLoadMoreButtonIcon = _styledComponents.default.div.withConfig({ | ||
| displayName: "styledComponents__DropdownMenuLoadMoreButtonIcon", | ||
| componentId: "sc-1u4m1mo-12" | ||
| })(["", ""], function (props) { | ||
| return props.isLoading && (0, _styledComponents.css)(["animation:", " 1s linear infinite;animation-direction:reverse;"], spinningKeyframes); | ||
| }); | ||
| exports.DropdownMenuLoadMoreButtonIcon = DropdownMenuLoadMoreButtonIcon; | ||
| "use strict";function _typeof(a){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}Object.defineProperty(exports,"__esModule",{value:!0}),exports.DropdownWrapper=exports.DropdownSingleValueOverflowWrapper=exports.DropdownOptionWithStatusWrapper=exports.DropdownMenuLoadMoreButtonText=exports.DropdownMenuLoadMoreButtonIcon=exports.DropdownMenuLoadMoreButtonContent=exports.DropdownMenuLoadMoreButton=exports.DropdownLabel=exports.DropdownErrorMessageWrapper=exports.DropdownErrorMessageText=exports.DropdownCheckboxMark=exports.DropdownCheckboxLabel=exports.DropdownCheckbox=void 0;var _styledComponents=_interopRequireWildcard(require("styled-components")),_elvisColors=require("@elvia/elvis-colors"),_elvisTypography=require("@elvia/elvis-typography");function _getRequireWildcardCache(a){if("function"!=typeof WeakMap)return null;var b=new WeakMap,c=new WeakMap;return(_getRequireWildcardCache=function(a){return a?c:b})(a)}function _interopRequireWildcard(a,b){if(!b&&a&&a.__esModule)return a;if(null===a||"object"!==_typeof(a)&&"function"!=typeof a)return{default:a};var c=_getRequireWildcardCache(b);if(c&&c.has(a))return c.get(a);var d={},e=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var f in a)if("default"!=f&&Object.prototype.hasOwnProperty.call(a,f)){var g=e?Object.getOwnPropertyDescriptor(a,f):null;g&&(g.get||g.set)?Object.defineProperty(d,f,g):d[f]=a[f]}return d.default=a,c&&c.set(a,d),d}var colors={charge:(0,_elvisColors.getColor)("elvia-charge"),white:(0,_elvisColors.getColor)("white"),black:(0,_elvisColors.getColor)("black"),grey80:(0,_elvisColors.getColor)("grey-80"),disabled:(0,_elvisColors.getColor)("disabled"),focusOutline:(0,_elvisColors.getColor)("focus-outline")},typography={textMdStrong:(0,_elvisTypography.getTypographyCss)("text-md-strong"),textMd:(0,_elvisTypography.getTypographyCss)("text-md"),textSm:(0,_elvisTypography.getTypographyCss)("text-sm")},DropdownWrapper=_styledComponents.default.span.withConfig({displayName:"styledComponents__DropdownWrapper",componentId:"sc-1u4m1mo-0"})(["display:block;position:relative;text-align:left;box-sizing:border-box;width:100%;padding-top:8px;",";cursor:",";&:focus-within{.ewc-dropdown__control{border:2px solid ",";padding:0px;outline:2px solid ",";outline-offset:2px;}}"],function(a){return a.isFullWidth?null:"max-width: 448px"},function(a){return a.isDisabled?"not-allowed":"pointer"},colors.charge,colors.focusOutline);exports.DropdownWrapper=DropdownWrapper;var DropdownLabel=_styledComponents.default.label.withConfig({displayName:"styledComponents__DropdownLabel",componentId:"sc-1u4m1mo-1"})(["position:",";top:",";left:",";background:",";padding:",";z-index:",";display:flex;margin-bottom:4px;font-family:'Red Hat Text',Verdana,sans-serif;font-weight:500;font-size:",";line-height:",";color:",";text-align:left;"],function(a){return a.isCompact&&"absolute"},function(a){return a.isCompact&&"0"},function(a){return a.isCompact&&"8px"},function(a){return a.isCompact&&colors.white},function(a){return a.isCompact&&"0 3px"},function(a){return a.isCompact&&"1"},function(a){return a.isCompact?"10px":"16px"},function(a){return a.isCompact?"10px":"23px"},colors.black);exports.DropdownLabel=DropdownLabel;var DropdownErrorMessageWrapper=_styledComponents.default.div.withConfig({displayName:"styledComponents__DropdownErrorMessageWrapper",componentId:"sc-1u4m1mo-2"})(["display:flex;flex-direction:row;align-items:center;margin-top:4px;"]);exports.DropdownErrorMessageWrapper=DropdownErrorMessageWrapper;var DropdownErrorMessageText=_styledComponents.default.span.withConfig({displayName:"styledComponents__DropdownErrorMessageText",componentId:"sc-1u4m1mo-3"})([""," font-style:normal;letter-spacing:0px;text-align:left;margin-left:8px;width:100%;"],typography.textSm);exports.DropdownErrorMessageText=DropdownErrorMessageText;var DropdownCheckbox=_styledComponents.default.label.withConfig({displayName:"styledComponents__DropdownCheckbox",componentId:"sc-1u4m1mo-4"})(["display:flex;align-items:center;width:fit-content;box-sizing:border-box;text-align:left;pointer-events:none;outline:none;@media screen and (-ms-high-contrast:none){width:100%;}"]);exports.DropdownCheckbox=DropdownCheckbox;var generateCheckmarkBeforeElement=function(a){return(0,_styledComponents.css)(["&::before{content:'';position:absolute;top:",";left:",";height:",";width:",";background-color:",";border-radius:15px;transform:",";transform-origin:",";}"],a.top,a.left,a.height,a.width,a.backgroundColor,a.transform,a.transformOrigin)},generateCheckmarkAfterElement=function(a){return(0,_styledComponents.css)(["&::after{content:'';position:absolute;bottom:",";left:",";height:",";width:",";background-color:",";border-radius:15px;transform:",";transform-origin:",";}"],a.bottom,a.left,a.height,a.width,a.backgroundColor,a.transform,a.transformOrigin)},decideCheckMarkCompactAndSelectedStyle=function(a,b,c,d){// Make compact line for "select all"-option when not everything is selected | ||
| return a&&c?(0,_styledComponents.css)(["background-color:",";",""],colors.charge,generateCheckmarkBeforeElement({top:"calc(50% - 1px)",left:"-24%",height:"2px",width:"40%",transform:"translateX(8px)",transformOrigin:"(left bottom)",backgroundColor:d?colors.disabled:colors.black})):!a&&c?(0,_styledComponents.css)(["background-color:",";",""],colors.charge,generateCheckmarkBeforeElement({top:"calc(50% - 1px)",left:"-10%",height:"2px",width:"50%",transform:"translateX(8px)",transformOrigin:"(left bottom)",backgroundColor:d?colors.disabled:colors.black})):a&&b?(0,_styledComponents.css)(["background-color:",";"," ",""],colors.charge,generateCheckmarkBeforeElement({top:"50%",left:"-45%",height:"39%",width:"2px",transform:"translateX(10px) rotate(-45deg)",transformOrigin:"[left bottom]",backgroundColor:d?colors.disabled:colors.black}),generateCheckmarkAfterElement({bottom:"40%",left:"-45%",height:"2px",width:"80%",transform:"translateX(10px) rotate(-55deg)",transformOrigin:"[left bottom]",backgroundColor:d?colors.disabled:colors.black})):!a&&b?(0,_styledComponents.css)(["background-color:",";"," ",""],colors.charge,generateCheckmarkBeforeElement({top:"55%",left:"-9%",height:"30%",width:"2px",transform:"translateX(8px) rotate(-45deg)",transformOrigin:"(left bottom)",backgroundColor:d?colors.disabled:colors.black}),generateCheckmarkAfterElement({bottom:"15%",left:"-4%",height:"2px",width:"83%",transform:"translateX(10px) rotate(-55deg)",transformOrigin:"left bottom",backgroundColor:d?colors.disabled:colors.black})):(0,_styledComponents.css)([""]);// Make normal line for "select all"-option when not everything is selected | ||
| // Make compact checkmark | ||
| // Make normal checkmark | ||
| },DropdownCheckboxMark=_styledComponents.default.span.withConfig({displayName:"styledComponents__DropdownCheckboxMark",componentId:"sc-1u4m1mo-5"})(["box-sizing:border-box;min-width:",";min-height:",";max-width:",";max-height:",";border-radius:3px;border:1px solid ",";background:",";position:relative;",""],function(a){return a.isCompact?"16px":"24px"},function(a){return a.isCompact?"16px":"24px"},function(a){return a.isCompact?"16px":"24px"},function(a){return a.isCompact?"16px":"24px"},function(a){return a.isDisabled?colors.disabled:colors.black},colors.white,function(a){return decideCheckMarkCompactAndSelectedStyle(a.isCompact,a.isSelected,a.isSelectAllWithPartialSelected,a.isDisabled)});exports.DropdownCheckboxMark=DropdownCheckboxMark;var DropdownCheckboxLabel=_styledComponents.default.span.withConfig({displayName:"styledComponents__DropdownCheckboxLabel",componentId:"sc-1u4m1mo-6"})(["font-family:'Red Hat Text',Verdana,sans-serif;font-style:normal;font-size:",";margin-left:8px;line-height:",";width:fit-content;"],function(a){return a.isCompact?"14px":"16px"},function(a){return a.isCompact?"16px;":"24px"});exports.DropdownCheckboxLabel=DropdownCheckboxLabel;var DropdownSingleValueOverflowWrapper=_styledComponents.default.span.withConfig({displayName:"styledComponents__DropdownSingleValueOverflowWrapper",componentId:"sc-1u4m1mo-7"})(["overflow:hidden;text-overflow:ellipsis;"]);exports.DropdownSingleValueOverflowWrapper=DropdownSingleValueOverflowWrapper;var DropdownOptionWithStatusWrapper=_styledComponents.default.div.withConfig({displayName:"styledComponents__DropdownOptionWithStatusWrapper",componentId:"sc-1u4m1mo-8"})(["display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;"]);exports.DropdownOptionWithStatusWrapper=DropdownOptionWithStatusWrapper;var DropdownMenuLoadMoreButton=_styledComponents.default.button.withConfig({displayName:"styledComponents__DropdownMenuLoadMoreButton",componentId:"sc-1u4m1mo-9"})(["width:100%;height:",";display:flex;justify-content:center;align-items:center;flex-direction:row;border:none;background:",";",""],function(a){return a.isCompact?"32px":"40px"},colors.white,function(a){return a.isLoading?(0,_styledComponents.css)(["cursor:wait;"]):(0,_styledComponents.css)(["cursor:pointer;"])});exports.DropdownMenuLoadMoreButton=DropdownMenuLoadMoreButton;var DropdownMenuLoadMoreButtonContent=_styledComponents.default.span.withConfig({displayName:"styledComponents__DropdownMenuLoadMoreButtonContent",componentId:"sc-1u4m1mo-10"})(["width:fit-content;height:fit-content;display:flex;justify-content:center;align-items:center;flex-direction:row;gap:8px;padding-bottom:2px;border-bottom:2px solid transparent;",":hover &:not([data-loading='true']){border-color:",";}"],DropdownMenuLoadMoreButton,colors.charge);exports.DropdownMenuLoadMoreButtonContent=DropdownMenuLoadMoreButtonContent;var DropdownMenuLoadMoreButtonText=_styledComponents.default.span.withConfig({displayName:"styledComponents__DropdownMenuLoadMoreButtonText",componentId:"sc-1u4m1mo-11"})(["font-family:'Red Hat Display',Verdana,sans-serif;font-style:normal;font-weight:500;font-size:14px;line-height:16px;"]);exports.DropdownMenuLoadMoreButtonText=DropdownMenuLoadMoreButtonText;var spinningKeyframes=(0,_styledComponents.keyframes)(["0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}"]),DropdownMenuLoadMoreButtonIcon=_styledComponents.default.div.withConfig({displayName:"styledComponents__DropdownMenuLoadMoreButtonIcon",componentId:"sc-1u4m1mo-12"})(["",""],function(a){return a.isLoading&&(0,_styledComponents.css)(["animation:"," 1s linear infinite;animation-direction:reverse;"],spinningKeyframes)});exports.DropdownMenuLoadMoreButtonIcon=DropdownMenuLoadMoreButtonIcon; | ||
| //# sourceMappingURL=styledComponents.js.map |
| { | ||
| "name": "@elvia/elvis-dropdown", | ||
| "version": "4.0.0", | ||
| "version": "4.1.0", | ||
| "description": "", | ||
@@ -13,2 +13,3 @@ "main": "web_component.js", | ||
| "@elvia/elvis-toolbox": "^4.0.0", | ||
| "@elvia/elvis-tooltip": "^1.0.5", | ||
| "@elvia/elvis-typography": "^2.2.0", | ||
@@ -15,0 +16,0 @@ "lodash.isequal": "^4.5.0", |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 2 instances in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of package files
- increased by19.05%
25
Worsened metrics
- Total package byte prevSize
- decreased by-0.41%
898317
- Dependency count
- increased by8.33%
13
- Lines of code
- decreased by-17.74%
3038
- Number of low quality alerts
- increased by200%
3
Dependency changes
+ Added@elvia/elvis-tooltip@^1.0.5
+ Added@elvia/elvis-colors@4.4.2(transitive)
+ Added@elvia/elvis-toolbox@12.1.0(transitive)
+ Added@elvia/elvis-tooltip@1.3.6(transitive)
+ Added@elvia/elvis-typography@3.1.1(transitive)
+ Added@emotion/styled@11.13.0(transitive)
+ Added@floating-ui/core@1.6.8(transitive)
+ Added@floating-ui/dom@1.6.11(transitive)
+ Added@floating-ui/react@0.26.24(transitive)
+ Added@floating-ui/react-dom@2.1.2(transitive)
+ Added@floating-ui/utils@0.2.8(transitive)
+ Addedtabbable@6.2.0(transitive)