@equinor/eds-core-react 0.37.0 → 0.39.0

package/dist/eds-core-react.cjs

@@ -172,8 +172,12 @@ const button = {
   }
 };
 
+var _placeholder = {
+  '@@functional/placeholder': true
+};
+
 function _isPlaceholder(a) {
-  return a != null && typeof a === 'object' && a['@@functional/placeholder'] === true;
+  return a === _placeholder;
 }
 
 /**
@@ -184,7 +188,6 @@ function _isPlaceholder(a) {
  * @param {Function} fn The function to curry.
  * @return {Function} The curried function.
  */
-
 function _curry1(fn) {
   return function f1(a) {
     if (arguments.length === 0 || _isPlaceholder(a)) {
@@ -203,7 +206,6 @@ function _curry1(fn) {
  * @param {Function} fn The function to curry.
  * @return {Function} The curried function.
  */
-
 function _curry2(fn) {
   return function f2(a, b) {
     switch (arguments.length) {
@@ -231,7 +233,6 @@ function _curry2(fn) {
  * @param {Function} fn The function to curry.
  * @return {Function} The curried function.
  */
-
 function _curry3(fn) {
   return function f3(a, b, c) {
     switch (arguments.length) {
@@ -300,9 +301,7 @@ function _isObject(x) {
  *      //=> { a: true, b: true, thing: 'bar', values: [10, 20, 15, 35] }
  * @symb R.mergeWithKey(f, { x: 1, y: 2 }, { y: 5, z: 3 }) = { x: 1, y: f('y', 2, 5), z: 3 }
  */
-
-var mergeWithKey = /*#__PURE__*/
-_curry3(function mergeWithKey(fn, l, r) {
+var mergeWithKey = /*#__PURE__*/_curry3(function mergeWithKey(fn, l, r) {
   var result = {};
   var k;
   l = l || {};
@@ -348,9 +347,7 @@ _curry3(function mergeWithKey(fn, l, r) {
  *                         { b: true, c: { thing: 'bar', values: [15, 35] }});
  *      //=> { a: true, b: true, c: { thing: 'bar', values: [10, 20, 15, 35] }}
  */
-
-var mergeDeepWithKey = /*#__PURE__*/
-_curry3(function mergeDeepWithKey(fn, lObj, rObj) {
+var mergeDeepWithKey = /*#__PURE__*/_curry3(function mergeDeepWithKey(fn, lObj, rObj) {
   return mergeWithKey(function (k, lVal, rVal) {
     if (_isObject(lVal) && _isObject(rVal)) {
       return mergeDeepWithKey(fn, lVal, rVal);
@@ -381,9 +378,7 @@ _curry3(function mergeDeepWithKey(fn, lObj, rObj) {
  *                       { age: 40, contact: { email: 'baa@example.com' }});
  *      //=> { name: 'fred', age: 40, contact: { email: 'baa@example.com' }}
  */
-
-var mergeDeepRight = /*#__PURE__*/
-_curry2(function mergeDeepRight(lObj, rObj) {
+var mergeDeepRight = /*#__PURE__*/_curry2(function mergeDeepRight(lObj, rObj) {
   return mergeDeepWithKey(function (k, lVal, rVal) {
     return rVal;
   }, lObj, rObj);
@@ -412,9 +407,7 @@ _curry2(function mergeDeepRight(lObj, rObj) {
  *                  { b: true, values: [15, 35] });
  *      //=> { a: true, b: true, values: [10, 20, 15, 35] }
  */
-
-var mergeWith = /*#__PURE__*/
-_curry3(function mergeWith(fn, l, r) {
+var mergeWith = /*#__PURE__*/_curry3(function mergeWith(fn, l, r) {
   return mergeWithKey(function (_, _l, _r) {
     return fn(_l, _r);
   }, l, r);
@@ -440,9 +433,7 @@ _curry3(function mergeWith(fn, l, r) {
  *      const isUpperCase = (val, key) => key.toUpperCase() === key;
  *      R.pickBy(isUpperCase, {a: 1, b: 2, A: 3, B: 4}); //=> {A: 3, B: 4}
  */
-
-var pickBy = /*#__PURE__*/
-_curry2(function pickBy(test, obj) {
+var pickBy = /*#__PURE__*/_curry2(function pickBy(test, obj) {
   var result = {};
   for (var prop in obj) {
     if (test(obj[prop], prop, obj)) {
@@ -9435,19 +9426,25 @@ const StyledList = styled__default.default(List$1).withConfig({
 })(({
   theme
 }) => styled.css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;overflow-x:hidden;padding:0;display:grid;@supports (-moz-appearance:none){scrollbar-width:thin;}"], theme.background, theme.boxShadow, edsUtils.bordersTemplate(theme.border)));
+const StyledPopover = styled__default.default('div').withConfig({
+  shouldForwardProp: () => true //workaround to avoid warning until popover gets added to react types
+}).withConfig({
+  displayName: "Autocomplete__StyledPopover",
+  componentId: "sc-yvif0e-2"
+})(["inset:unset;border:0;padding:0;margin:0;overflow:visible;&::backdrop{background-color:transparent;}"]);
 const HelperText = styled__default.default(TextfieldHelperText).withConfig({
   displayName: "Autocomplete__HelperText",
-  componentId: "sc-yvif0e-2"
+  componentId: "sc-yvif0e-3"
 })(["margin-top:8px;margin-left:8px;"]);
 const AutocompleteNoOptions = styled__default.default(AutocompleteOption).withConfig({
   displayName: "Autocomplete__AutocompleteNoOptions",
-  componentId: "sc-yvif0e-3"
+  componentId: "sc-yvif0e-4"
 })(({
   theme
 }) => styled.css(["color:", ";"], theme.entities.noOptions.typography.color));
 const StyledButton$1 = styled__default.default(Button$1).withConfig({
   displayName: "Autocomplete__StyledButton",
-  componentId: "sc-yvif0e-4"
+  componentId: "sc-yvif0e-5"
 })(({
   theme: {
     entities: {
@@ -9531,6 +9528,23 @@ const findPrevIndex = ({
   }
   return prevIndex;
 };
+
+/*When a user clicks the StyledList scrollbar, the input looses focus which breaks downshift
+ * keyboard navigation in the list. This code returns focus to the input on mouseUp
+ */
+const handleListFocus = e => {
+  e.preventDefault();
+  e.stopPropagation();
+  window?.addEventListener('mouseup', () => {
+    e.relatedTarget?.focus();
+  }, {
+    once: true
+  });
+};
+const defaultOptionDisabled = () => false;
+
+// prettier-ignore
+
 function AutocompleteInner(props, ref) {
   const {
     options = [],
@@ -9544,12 +9558,13 @@ function AutocompleteInner(props, ref) {
     hideClearButton = false,
     onOptionsChange,
     onInputChange,
-    selectedOptions,
+    selectedOptions: _selectedOptions,
     multiple,
+    itemCompare,
     allowSelectAll,
-    initialSelectedOptions = [],
+    initialSelectedOptions: _initialSelectedOptions = [],
     disablePortal,
-    optionDisabled = () => false,
+    optionDisabled = defaultOptionDisabled,
     optionsFilter,
     autoWidth,
     placeholder,
@@ -9564,6 +9579,11 @@ function AutocompleteInner(props, ref) {
     variant,
     ...other
   } = props;
+  const selectedOptions = _selectedOptions ? itemCompare ? options.filter(item => _selectedOptions.some(compare => itemCompare(item, compare))) : _selectedOptions : undefined;
+  const initialSelectedOptions = _initialSelectedOptions ? itemCompare ? options.filter(item => _initialSelectedOptions.some(compare => itemCompare(item, compare))) : _initialSelectedOptions : undefined;
+  if (disablePortal) {
+    console.warn('Autocomplete "disablePortal" prop has been deprecated. Autocomplete now uses the native popover api');
+  }
   const isControlled = Boolean(selectedOptions);
   const [inputOptions, setInputOptions] = react.useState(options);
   const [_availableItems, setAvailableItems] = react.useState(inputOptions);
@@ -9578,13 +9598,8 @@ function AutocompleteInner(props, ref) {
     if (showSelectAll) return [AllSymbol, ..._availableItems];
     return _availableItems;
   }, [_availableItems, showSelectAll]);
-  const toggleAllSelected = () => {
-    if (selectedItems.length === inputOptions.length) {
-      setSelectedItems([]);
-    } else {
-      setSelectedItems(inputOptions);
-    }
-  };
+
+  //issue 2304, update dataset when options are added dynamically
   react.useEffect(() => {
     const availableHash = JSON.stringify(inputOptions);
     const optionsHash = JSON.stringify(options);
@@ -9595,7 +9610,6 @@ function AutocompleteInner(props, ref) {
   react.useEffect(() => {
     setAvailableItems(inputOptions);
   }, [inputOptions]);
-  const disabledItems = react.useMemo(() => options.filter(optionDisabled), [options, optionDisabled]);
   const {
     density
   } = useEds();
@@ -9612,7 +9626,10 @@ function AutocompleteInner(props, ref) {
       ...multipleSelectionProps,
       onSelectedItemsChange: changes => {
         if (onOptionsChange) {
-          const selectedItems = changes.selectedItems.filter(item => item !== AllSymbol);
+          let selectedItems = changes.selectedItems.filter(item => item !== AllSymbol);
+          if (itemCompare) {
+            selectedItems = inputOptions.filter(item => selectedItems.some(compare => itemCompare(item, compare)));
+          }
           onOptionsChange({
             selectedItems
           });
@@ -9631,15 +9648,27 @@ function AutocompleteInner(props, ref) {
     addSelectedItem,
     removeSelectedItem,
     selectedItems,
-    reset: resetSelection,
     setSelectedItems
   } = downshift.useMultipleSelection(multipleSelectionProps);
+  const enabledItems = react.useMemo(() => {
+    const disabledItemsSet = new Set(inputOptions.filter(optionDisabled));
+    return inputOptions.filter(x => !disabledItemsSet.has(x));
+  }, [inputOptions, optionDisabled]);
+  const selectedDisabledItemsSet = react.useMemo(() => new Set(selectedItems.filter(optionDisabled)), [selectedItems, optionDisabled]);
+  const selectedEnabledItems = react.useMemo(() => selectedItems.filter(x => !selectedDisabledItemsSet.has(x)), [selectedItems, selectedDisabledItemsSet]);
   const allSelectedState = react.useMemo(() => {
-    if (!inputOptions || !selectedItems) return 'NONE';
-    if (inputOptions.length === selectedItems.length) return 'ALL';
-    if (inputOptions.length != selectedItems.length && selectedItems.length > 0) return 'SOME';
+    if (!enabledItems || !selectedEnabledItems) return 'NONE';
+    if (enabledItems.length === selectedEnabledItems.length) return 'ALL';
+    if (enabledItems.length != selectedEnabledItems.length && selectedEnabledItems.length > 0) return 'SOME';
     return 'NONE';
-  }, [inputOptions, selectedItems]);
+  }, [enabledItems, selectedEnabledItems]);
+  const toggleAllSelected = () => {
+    if (selectedEnabledItems.length === enabledItems.length) {
+      setSelectedItems([...selectedDisabledItemsSet]);
+    } else {
+      setSelectedItems([...enabledItems, ...selectedDisabledItemsSet]);
+    }
+  };
   const getLabel = react.useCallback(item => {
     //note: non strict check for null or undefined to allow 0
     if (item == null) {
@@ -9698,7 +9727,14 @@ function AutocompleteInner(props, ref) {
       highlightedIndex,
       type
     }) {
-      if (type !== downshift.useCombobox.stateChangeTypes.ItemMouseMove && type !== downshift.useCombobox.stateChangeTypes.MenuMouseLeave && highlightedIndex >= 0) {
+      if (type == downshift.useCombobox.stateChangeTypes.InputClick || type == downshift.useCombobox.stateChangeTypes.InputKeyDownArrowDown && !isOpen || type == downshift.useCombobox.stateChangeTypes.InputKeyDownArrowUp && !isOpen) {
+        //needs delay for dropdown to render before calling scroll
+        setTimeout(() => {
+          rowVirtualizer.scrollToIndex(highlightedIndex, {
+            align: allowSelectAll ? 'center' : 'auto'
+          });
+        }, 1);
+      } else if (type !== downshift.useCombobox.stateChangeTypes.ItemMouseMove && type !== downshift.useCombobox.stateChangeTypes.MenuMouseLeave && highlightedIndex >= 0) {
         rowVirtualizer.scrollToIndex(highlightedIndex, {
           align: allowSelectAll ? 'center' : 'auto'
         });
@@ -9740,9 +9776,12 @@ function AutocompleteInner(props, ref) {
       ...comboBoxProps,
       onSelectedItemChange: changes => {
         if (onOptionsChange) {
-          const {
+          let {
             selectedItem
           } = changes;
+          if (itemCompare) {
+            selectedItem = inputOptions.find(item => itemCompare(item, selectedItem));
+          }
           onOptionsChange({
             selectedItems: selectedItem ? [selectedItem] : []
           });
@@ -9809,7 +9848,7 @@ function AutocompleteInner(props, ref) {
     }
   }
   if (multiple) {
-    placeholderText = typeof placeholderText !== 'undefined' ? placeholderText : `${selectedItems.length}/${options.length - disabledItems.length} selected`;
+    placeholderText = typeof placeholderText !== 'undefined' ? placeholderText : `${selectedItems.length}/${inputOptions.length} selected`;
     comboBoxProps = {
       ...comboBoxProps,
       selectedItem: null,
@@ -9901,11 +9940,6 @@ function AutocompleteInner(props, ref) {
     inputValue,
     reset: resetCombobox
   } = downshift.useCombobox(comboBoxProps);
-  react.useEffect(() => {
-    if (isControlled) {
-      setSelectedItems(selectedOptions);
-    }
-  }, [isControlled, selectedOptions, setSelectedItems]);
   const {
     x,
     y,
@@ -9914,8 +9948,8 @@ function AutocompleteInner(props, ref) {
     strategy
   } = react$1.useFloating({
     placement: 'bottom-start',
-    middleware: [react$1.offset(4), react$1.flip(), react$1.shift({
-      padding: 8
+    middleware: [react$1.offset(4), react$1.flip({
+      boundary: document?.body
     }), react$1.size({
       apply({
         rects,
@@ -9937,25 +9971,31 @@ function AutocompleteInner(props, ref) {
       return react$1.autoUpdate(refs.reference.current, refs.floating.current, update);
     }
   }, [refs.reference, refs.floating, update, isOpen]);
+  edsUtils.useIsomorphicLayoutEffect(() => {
+    if (isOpen) {
+      refs.floating.current.showPopover();
+    } else {
+      refs.floating.current.hidePopover();
+    }
+  }, [isOpen, refs.floating]);
   const clear = () => {
     resetCombobox();
-    resetSelection();
+    //dont clear items if they are selected and disabled
+    setSelectedItems([...selectedDisabledItemsSet]);
     setTypedInputValue('');
   };
   const showClearButton = (selectedItems.length > 0 || inputValue) && !readOnly && !hideClearButton;
   const showNoOptions = isOpen && !availableItems.length && noOptionsText.length > 0;
   const selectedItemsLabels = react.useMemo(() => selectedItems.map(getLabel), [selectedItems, getLabel]);
-
-  //temporary fix when inside dialog. Should be replaced by popover api when it is ready
-  const inDialog = edsUtils.useIsInDialog(refs.domReference.current);
-  const optionsList = /*#__PURE__*/jsxRuntime.jsx("div", {
+  const optionsList = /*#__PURE__*/jsxRuntime.jsx(StyledPopover, {
+    popover: "manual",
     ...getFloatingProps({
       ref: refs.setFloating,
+      onFocus: handleListFocus,
       style: {
         position: strategy,
         top: y || 0,
-        left: x || 0,
-        zIndex: 1500
+        left: x || 0
       }
     }),
     children: /*#__PURE__*/jsxRuntime.jsxs(StyledList, {
@@ -10099,10 +10139,7 @@ function AutocompleteInner(props, ref) {
         color: variant ? tokens.variants[variant].typography.color : undefined,
         text: helperText,
         icon: helperIcon
-      }), disablePortal || inDialog ? optionsList : /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
-        id: "eds-autocomplete-container",
-        children: optionsList
-      })]
+      }), optionsList]
     })
   });
 }
@@ -11541,6 +11578,26 @@ const FieldWrapper = /*#__PURE__*/react.forwardRef(({
 InputFieldWrapper.displayName = 'InputFieldWrapper';
 FieldWrapper.displayName = 'FieldWrapper';
 
+const intl = new Intl.DateTimeFormat();
+const defaultTimezone = intl.resolvedOptions().timeZone;
+const DatePickerContext = /*#__PURE__*/react.createContext({
+  timezone: defaultTimezone
+});
+const DatePickerProvider = ({
+  timezone,
+  formatOptions,
+  children
+}) => {
+  return /*#__PURE__*/jsxRuntime.jsx(DatePickerContext.Provider, {
+    value: {
+      timezone: timezone ?? defaultTimezone,
+      formatOptions
+    },
+    children: children
+  });
+};
+const useDatePickerContext = () => react.useContext(DatePickerContext);
+
 const Segment = styled__default.default.div.withConfig({
   displayName: "DateSegment__Segment",
   componentId: "sc-19uidpx-0"
@@ -11555,12 +11612,29 @@ function DateSegment({
   segment,
   state
 }) {
+  const {
+    formatOptions,
+    timezone
+  } = useDatePickerContext();
+  const formatter = reactAria.useDateFormatter(formatOptions);
+  const parts = state.value ? formatter.formatToParts(state.value.toDate(timezone)) : [];
+  const part = parts.find(p => p.type === segment.type);
+  const value = segment.isPlaceholder || segment.type === 'literal' ? segment.text : part?.value ?? segment.text;
+  const [focus, setFocus] = react.useState(false);
   const ref = react.useRef(null);
   const {
     segmentProps
   } = reactAria.useDateSegment(segment, state, ref);
   return /*#__PURE__*/jsxRuntime.jsx(Segment, {
     ...segmentProps,
+    onFocus: e => {
+      setFocus(true);
+      segmentProps.onFocus(e);
+    },
+    onBlur: e => {
+      setFocus(false);
+      segmentProps.onBlur(e);
+    },
     $invalid: state.isInvalid,
     $disabled: state.isDisabled,
     $placeholder: segment.isPlaceholder,
@@ -11577,7 +11651,7 @@ function DateSegment({
     },
     ref: ref,
     className: `segment ${segment.isPlaceholder ? 'placeholder' : ''}`,
-    children: segment.isPlaceholder || segment.type === 'literal' ? segment.text : segment.text.padStart(segment.type === 'year' ? 4 : 2, '0')
+    children: focus ? segment.isPlaceholder || segment.type === 'literal' ? segment.text : segment.text.padStart(segment.type === 'year' ? 4 : 2, '0') : value
   });
 }
 
@@ -11649,23 +11723,6 @@ const DateField = /*#__PURE__*/react.forwardRef(function ({
 });
 DateField.displayName = 'DateField';
 
-const intl = new Intl.DateTimeFormat();
-const defaultTimezone = intl.resolvedOptions().timeZone;
-const DatePickerContext = /*#__PURE__*/react.createContext({
-  timezone: defaultTimezone
-});
-const DatePickerProvider = ({
-  timezone,
-  children
-}) => {
-  return /*#__PURE__*/jsxRuntime.jsx(DatePickerContext.Provider, {
-    value: {
-      timezone: timezone ?? defaultTimezone
-    },
-    children: children
-  });
-};
-
 const useConvertedValidationFunctions = (minValue, maxValue, isDateUnavailable, timezone) => {
   const tz = timezone ?? defaultTimezone;
   const _minValue = minValue ? date.toCalendarDate(date.fromDate(minValue, tz)) : undefined;
@@ -11755,9 +11812,15 @@ const DatePicker = /*#__PURE__*/react.forwardRef(({
   granularity,
   disabled: isDisabled,
   readOnly: isReadOnly,
+  formatOptions,
   ...props
 }, forwardedRef) => {
   timezone = timezone ?? defaultTimezone;
+  formatOptions = formatOptions ?? {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+  };
   const [innerValue, setInnerValue] = react.useState(() => {
     const initialValue = value ?? defaultValue;
     if (initialValue) {
@@ -11833,8 +11896,14 @@ const DatePicker = /*#__PURE__*/react.forwardRef(({
       data: edsIcons.warning_outlined
     })
   } : undefined;
+
+  // innerValue is used as a fallback, especially for uncontrolled inputs, so it needs to be reset when value / defaultValue is reset
+  react.useEffect(() => {
+    if (!defaultValue && !value) setInnerValue(null);
+  }, [defaultValue, value]);
   return /*#__PURE__*/jsxRuntime.jsx(DatePickerProvider, {
     timezone: timezone,
+    formatOptions: formatOptions,
     children: /*#__PURE__*/jsxRuntime.jsx(FieldWrapper, {
       isOpen: isOpen,
       readonly: fieldProps.isReadOnly,
@@ -11987,11 +12056,17 @@ const DateRangePicker = /*#__PURE__*/react.forwardRef(({
   Header,
   timezone,
   defaultValue,
+  formatOptions,
   disabled: isDisabled,
   readOnly: isReadOnly,
   ...props
 }, forwardedRef) => {
   timezone = timezone ?? defaultTimezone;
+  formatOptions = formatOptions ?? {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+  };
   const [innerValue, setInnerValue] = react.useState(() => {
     const initialValue = value ?? defaultValue;
     if (initialValue) {
@@ -12065,8 +12140,16 @@ const DateRangePicker = /*#__PURE__*/react.forwardRef(({
     day: '2-digit'
   });
   const valueString = formattedValue ? Object.values(formattedValue).join(' - ') : null;
+
+  // innerValue is used as a fallback, especially for uncontrolled inputs, so it needs to be reset when value / defaultValue is reset
+  react.useEffect(() => {
+    const val = defaultValue ?? value;
+    if (!defaultValue && !value) setInnerValue(null);
+    if (!val?.from && !val?.to) setInnerValue(null);
+  }, [defaultValue, value]);
   return /*#__PURE__*/jsxRuntime.jsx(DatePickerProvider, {
     timezone: timezone,
+    formatOptions: formatOptions,
     children: /*#__PURE__*/jsxRuntime.jsx(FieldWrapper, {
       isOpen: isOpen,
       color: state.isInvalid ? 'warning' : props.variant,