@equinor/eds-core-react 0.41.4-dev03092024 → 0.41.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/eds-core-react.cjs
CHANGED
|
@@ -6398,11 +6398,9 @@ const Popover$1 = /*#__PURE__*/react.forwardRef(function Popover({
|
|
|
6398
6398
|
const {
|
|
6399
6399
|
getFloatingProps
|
|
6400
6400
|
} = react$1.useInteractions([react$1.useDismiss(context)]);
|
|
6401
|
-
|
|
6401
|
+
edsUtils.useIsomorphicLayoutEffect(() => {
|
|
6402
6402
|
if (open) {
|
|
6403
|
-
|
|
6404
|
-
refs.floating.current.showPopover();
|
|
6405
|
-
}
|
|
6403
|
+
refs.floating.current?.showPopover();
|
|
6406
6404
|
} else {
|
|
6407
6405
|
refs.floating.current?.hidePopover();
|
|
6408
6406
|
}
|
|
@@ -8314,9 +8312,9 @@ const Container$3 = styled__default.default.div.withConfig({
|
|
|
8314
8312
|
const StyledSelect = styled__default.default.select.withConfig({
|
|
8315
8313
|
displayName: "NativeSelect__StyledSelect",
|
|
8316
8314
|
componentId: "sc-82vb16-1"
|
|
8317
|
-
})(["border:none;border-radius:0;box-shadow:", ";", " ", " padding-right:calc(", " *2 + ", ");display:block;margin:0;appearance:none;background-image:
|
|
8315
|
+
})(["border:none;border-radius:0;box-shadow:", ";", " ", " padding-right:calc(", " *2 + ", ");display:block;margin:0;appearance:none;background-image:", " linear-gradient( to bottom,", " 0%,", " 100% );background-repeat:no-repeat,repeat;background-position:right ", " top 50%;width:100%;&:active,&:focus{box-shadow:none;", "}&:disabled{color:", ";background-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23bebebe' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E\"),linear-gradient( to bottom,", " 0%,", " 100% );cursor:not-allowed;box-shadow:none;outline:none;.arrow-icon{fill:red;}&:focus,&:active{outline:none;}}"], nativeselect.boxShadow, edsUtils.typographyTemplate(nativeselect.typography), ({
|
|
8318
8316
|
theme
|
|
8319
|
-
}) => styled.css(["height:", ";", ""], theme.minHeight, edsUtils.spacingsTemplate(theme.entities.input.spacings)), nativeselect.entities.input.spacings.right, nativeselect.entities.icon.width, nativeselect.background, nativeselect.background, nativeselect.entities.input.spacings.right, edsUtils.outlineTemplate(nativeselect.states.focus.outline), nativeselect.states.disabled.typography.color, nativeselect.background, nativeselect.background);
|
|
8317
|
+
}) => styled.css(["height:", ";", ""], theme.minHeight, edsUtils.spacingsTemplate(theme.entities.input.spacings)), nativeselect.entities.input.spacings.right, nativeselect.entities.icon.width, props => props.multiple ? `` : `url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%236f6f6f' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E"),`, nativeselect.background, nativeselect.background, nativeselect.entities.input.spacings.right, edsUtils.outlineTemplate(nativeselect.states.focus.outline), nativeselect.states.disabled.typography.color, nativeselect.background, nativeselect.background);
|
|
8320
8318
|
const NativeSelect = /*#__PURE__*/react.forwardRef(function NativeSelect({
|
|
8321
8319
|
label,
|
|
8322
8320
|
children,
|
|
@@ -9859,6 +9857,11 @@ function AutocompleteInner(props, ref) {
|
|
|
9859
9857
|
allDisabled
|
|
9860
9858
|
})
|
|
9861
9859
|
};
|
|
9860
|
+
case downshift.useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
|
|
9861
|
+
setSelectedItems([changes.selectedItem]);
|
|
9862
|
+
return {
|
|
9863
|
+
...changes
|
|
9864
|
+
};
|
|
9862
9865
|
default:
|
|
9863
9866
|
return changes;
|
|
9864
9867
|
}
|
|
@@ -461,6 +461,11 @@ function AutocompleteInner(props, ref) {
|
|
|
461
461
|
allDisabled
|
|
462
462
|
})
|
|
463
463
|
};
|
|
464
|
+
case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
|
|
465
|
+
setSelectedItems([changes.selectedItem]);
|
|
466
|
+
return {
|
|
467
|
+
...changes
|
|
468
|
+
};
|
|
464
469
|
default:
|
|
465
470
|
return changes;
|
|
466
471
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { forwardRef, useRef, useMemo, useEffect } from 'react';
|
|
2
2
|
import styled, { css, ThemeProvider } from 'styled-components';
|
|
3
|
-
import { typographyTemplate, bordersTemplate, outlineTemplate, mergeRefs, useToken } from '@equinor/eds-utils';
|
|
3
|
+
import { typographyTemplate, bordersTemplate, outlineTemplate, mergeRefs, useIsomorphicLayoutEffect, useToken } from '@equinor/eds-utils';
|
|
4
4
|
import { popover } from './Popover.tokens.js';
|
|
5
5
|
import { useFloating, offset, flip, shift, arrow, autoUpdate, useInteractions, useDismiss, FloatingFocusManager } from '@floating-ui/react';
|
|
6
6
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
@@ -96,11 +96,9 @@ const Popover = /*#__PURE__*/forwardRef(function Popover({
|
|
|
96
96
|
const {
|
|
97
97
|
getFloatingProps
|
|
98
98
|
} = useInteractions([useDismiss(context)]);
|
|
99
|
-
|
|
99
|
+
useIsomorphicLayoutEffect(() => {
|
|
100
100
|
if (open) {
|
|
101
|
-
|
|
102
|
-
refs.floating.current.showPopover();
|
|
103
|
-
}
|
|
101
|
+
refs.floating.current?.showPopover();
|
|
104
102
|
} else {
|
|
105
103
|
refs.floating.current?.hidePopover();
|
|
106
104
|
}
|
|
@@ -13,9 +13,9 @@ const Container = styled.div.withConfig({
|
|
|
13
13
|
const StyledSelect = styled.select.withConfig({
|
|
14
14
|
displayName: "NativeSelect__StyledSelect",
|
|
15
15
|
componentId: "sc-82vb16-1"
|
|
16
|
-
})(["border:none;border-radius:0;box-shadow:", ";", " ", " padding-right:calc(", " *2 + ", ");display:block;margin:0;appearance:none;background-image:
|
|
16
|
+
})(["border:none;border-radius:0;box-shadow:", ";", " ", " padding-right:calc(", " *2 + ", ");display:block;margin:0;appearance:none;background-image:", " linear-gradient( to bottom,", " 0%,", " 100% );background-repeat:no-repeat,repeat;background-position:right ", " top 50%;width:100%;&:active,&:focus{box-shadow:none;", "}&:disabled{color:", ";background-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23bebebe' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E\"),linear-gradient( to bottom,", " 0%,", " 100% );cursor:not-allowed;box-shadow:none;outline:none;.arrow-icon{fill:red;}&:focus,&:active{outline:none;}}"], nativeselect.boxShadow, typographyTemplate(nativeselect.typography), ({
|
|
17
17
|
theme
|
|
18
|
-
}) => css(["height:", ";", ""], theme.minHeight, spacingsTemplate(theme.entities.input.spacings)), nativeselect.entities.input.spacings.right, nativeselect.entities.icon.width, nativeselect.background, nativeselect.background, nativeselect.entities.input.spacings.right, outlineTemplate(nativeselect.states.focus.outline), nativeselect.states.disabled.typography.color, nativeselect.background, nativeselect.background);
|
|
18
|
+
}) => css(["height:", ";", ""], theme.minHeight, spacingsTemplate(theme.entities.input.spacings)), nativeselect.entities.input.spacings.right, nativeselect.entities.icon.width, props => props.multiple ? `` : `url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%236f6f6f' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E"),`, nativeselect.background, nativeselect.background, nativeselect.entities.input.spacings.right, outlineTemplate(nativeselect.states.focus.outline), nativeselect.states.disabled.typography.color, nativeselect.background, nativeselect.background);
|
|
19
19
|
const NativeSelect = /*#__PURE__*/forwardRef(function NativeSelect({
|
|
20
20
|
label,
|
|
21
21
|
children,
|