@helsenorge/designsystem-react 7.3.0 → 7.3.1
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/CHANGELOG.md +8 -0
- package/components/PopOver/PopOver.js +34 -34
- package/components/PopOver/PopOver.js.map +1 -1
- package/components/PopOver/styles.module.scss +4 -7
- package/components/PopOver/styles.module.scss.d.ts +1 -0
- package/components/Select/Select.d.ts +1 -1
- package/components/Select/Select.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
## [7.3.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv7.2.1&targetVersion=GTv7.3.0) (2024-04-22)
|
|
2
|
+
|
|
3
|
+
### Features
|
|
4
|
+
|
|
5
|
+
- **designsystem:** select får wrapperclassname prop
|
|
6
|
+
([61a1a8c](https://github.com/helsenorge/designsystem/commit/61a1a8c4323c2150ee97d21a7325de6c72cc5198)), closes
|
|
7
|
+
[#323789](https://github.com/helsenorge/designsystem/issues/323789)
|
|
8
|
+
|
|
1
9
|
## [7.2.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv7.2.0&targetVersion=GTv7.2.1) (2024-04-19)
|
|
2
10
|
|
|
3
11
|
### Bug Fixes
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import r, { useRef as w, useState as A, useEffect as B } from "react";
|
|
2
|
+
import y from "classnames";
|
|
3
3
|
import { getVerticalPosition as F, getBubbleStyle as L, getArrowStyle as T } from "./utils.js";
|
|
4
4
|
import { ZIndex as V, AnalyticsId as Z } from "../../constants.js";
|
|
5
5
|
import { useInterval as $ } from "../../hooks/useInterval.js";
|
|
@@ -7,51 +7,51 @@ import { useIsVisible as j } from "../../hooks/useIsVisible.js";
|
|
|
7
7
|
import { useLayoutEvent as k } from "../../hooks/useLayoutEvent.js";
|
|
8
8
|
import { useSize as q } from "../../hooks/useSize.js";
|
|
9
9
|
import { mergeRefs as D } from "../../utils/refs.js";
|
|
10
|
-
import
|
|
11
|
-
var G = /* @__PURE__ */ ((
|
|
12
|
-
const
|
|
10
|
+
import t from "../PopOver/styles.module.scss";
|
|
11
|
+
var G = /* @__PURE__ */ ((o) => (o.positionautomatic = "positionautomatic", o.positionbelow = "positionbelow", o.positionabove = "positionabove", o))(G || {});
|
|
12
|
+
const S = r.forwardRef((o, _) => {
|
|
13
13
|
const {
|
|
14
|
-
id:
|
|
15
|
-
children:
|
|
14
|
+
id: R,
|
|
15
|
+
children: g,
|
|
16
16
|
controllerRef: n,
|
|
17
|
-
popOverRef:
|
|
18
|
-
show:
|
|
19
|
-
className:
|
|
20
|
-
variant:
|
|
21
|
-
role:
|
|
22
|
-
testId:
|
|
23
|
-
arrowClassName:
|
|
24
|
-
zIndex:
|
|
25
|
-
} =
|
|
26
|
-
var
|
|
27
|
-
|
|
17
|
+
popOverRef: z,
|
|
18
|
+
show: p = !1,
|
|
19
|
+
className: C = "",
|
|
20
|
+
variant: c = "positionautomatic",
|
|
21
|
+
role: m,
|
|
22
|
+
testId: I,
|
|
23
|
+
arrowClassName: N,
|
|
24
|
+
zIndex: u = V.PopOver
|
|
25
|
+
} = o, f = z || w(null), E = w(null), s = q(f), [e, O] = A(), v = j(n, 0), l = () => {
|
|
26
|
+
var d;
|
|
27
|
+
O((d = n.current) == null ? void 0 : d.getBoundingClientRect());
|
|
28
28
|
};
|
|
29
29
|
$(l, 500), k(l, ["scroll", "resize"], 10), B(() => {
|
|
30
30
|
l();
|
|
31
31
|
}, []);
|
|
32
|
-
const
|
|
33
|
-
[
|
|
34
|
-
[
|
|
35
|
-
|
|
36
|
-
}), a =
|
|
37
|
-
return /* @__PURE__ */
|
|
32
|
+
const b = m === "tooltip", P = y(t.popover, { [t["popover--visible"]]: b ? p : v }, C), i = e && s && F(e, s, c), x = y(t.popover__arrow, N, {
|
|
33
|
+
[t["popover__arrow--over"]]: i === "positionbelow",
|
|
34
|
+
[t["popover__arrow--under"]]: i === "positionabove",
|
|
35
|
+
[t["popover__arrow--visible"]]: b ? p : v
|
|
36
|
+
}), a = e && s && L(e, s, c), h = a && e && i && T(a, e, i);
|
|
37
|
+
return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(
|
|
38
38
|
"div",
|
|
39
39
|
{
|
|
40
|
-
id:
|
|
41
|
-
ref: D([
|
|
40
|
+
id: R,
|
|
41
|
+
ref: D([_, f]),
|
|
42
42
|
className: P,
|
|
43
|
-
style: { ...a, zIndex:
|
|
44
|
-
"data-testid":
|
|
43
|
+
style: { ...a, zIndex: u },
|
|
44
|
+
"data-testid": I,
|
|
45
45
|
"data-analyticsid": Z.PopOver,
|
|
46
|
-
role:
|
|
46
|
+
role: m
|
|
47
47
|
},
|
|
48
|
-
|
|
49
|
-
), /* @__PURE__ */
|
|
48
|
+
g
|
|
49
|
+
), /* @__PURE__ */ r.createElement("div", { ref: E, className: x, style: { ...h, zIndex: u } }));
|
|
50
50
|
});
|
|
51
|
-
|
|
52
|
-
const
|
|
51
|
+
S.displayName = "PopOver";
|
|
52
|
+
const eo = S;
|
|
53
53
|
export {
|
|
54
54
|
G as PopOverVariant,
|
|
55
|
-
|
|
55
|
+
eo as default
|
|
56
56
|
};
|
|
57
57
|
//# sourceMappingURL=PopOver.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopOver.js","sources":["../../../src/components/PopOver/PopOver.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getArrowStyle, getBubbleStyle, getVerticalPosition } from './utils';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useInterval } from '../../hooks/useInterval';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { useSize } from '../../hooks/useSize';\nimport { mergeRefs } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport enum PopOverVariant {\n positionautomatic = 'positionautomatic',\n positionbelow = 'positionbelow',\n positionabove = 'positionabove',\n}\n\nexport type PopOverRole = 'tooltip';\n\nexport interface PopOverProps {\n /** Id of the PopOver */\n id?: string;\n /** Content shown inside PopOver. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n children: React.ReactNode;\n /** Ref for the element the PopOver is placed upon */\n controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n /** Ref for the element the PopOver is placed upon */\n popOverRef?: React.RefObject<HTMLDivElement>;\n /** Show the popover. Only applies when role=tooltip. Default: false. */\n show?: boolean;\n /** Adds custom classes to the element. */\n className?: string;\n /** Adds custom classes to the arrow element. */\n arrowClassName?: string;\n /** Determines the placement of the popover. Default: automatic positioning. */\n variant?: keyof typeof PopOverVariant;\n /** Sets role of the PopOver element */\n role?: PopOverRole;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Overrides the default z-index of PopOver */\n zIndex?: number;\n}\n\nconst PopOver = React.forwardRef<HTMLDivElement | SVGSVGElement, PopOverProps>((props, ref) => {\n const {\n id,\n children,\n controllerRef,\n popOverRef,\n show = false,\n className = '',\n variant = PopOverVariant.positionautomatic,\n role,\n testId,\n arrowClassName,\n zIndex = ZIndex.PopOver,\n } = props;\n\n const bubbleRef = popOverRef || useRef<HTMLDivElement>(null);\n const arrowRef = useRef<HTMLDivElement>(null);\n const bubbleSize = useSize(bubbleRef);\n const [controllerSize, setControllerSize] = useState<DOMRect>();\n const controllerisVisible = useIsVisible(controllerRef, 0);\n\n const updateControllerSize = (): void => {\n setControllerSize(controllerRef.current?.getBoundingClientRect());\n };\n\n useInterval(updateControllerSize, 500);\n useLayoutEvent(updateControllerSize, ['scroll', 'resize'], 10);\n\n useEffect(() => {\n updateControllerSize();\n }, []);\n\n const isTooltip = role === 'tooltip';\n\n const popOverClasses = classNames(styles.popover, { [styles['popover--visible']]: isTooltip ? show : controllerisVisible }, className);\n const verticalPosition = controllerSize && bubbleSize && getVerticalPosition(controllerSize, bubbleSize, variant);\n const arrowClasses = classNames(styles.popover__arrow, arrowClassName, {\n [styles['popover__arrow--over']]: verticalPosition === PopOverVariant.positionbelow,\n [styles['popover__arrow--under']]: verticalPosition === PopOverVariant.positionabove,\n });\n\n const bubbleStyle = controllerSize && bubbleSize && getBubbleStyle(controllerSize, bubbleSize, variant);\n const arrowStyle = bubbleStyle && controllerSize && verticalPosition && getArrowStyle(bubbleStyle, controllerSize, verticalPosition);\n\n return (\n <>\n <div\n id={id}\n ref={mergeRefs([ref, bubbleRef])}\n className={popOverClasses}\n style={{ ...bubbleStyle, zIndex }}\n data-testid={testId}\n data-analyticsid={AnalyticsId.PopOver}\n role={role}\n >\n {children}\n </div>\n <div ref={arrowRef} className={arrowClasses} style={{ ...arrowStyle, zIndex }} />\n </>\n );\n});\n\nPopOver.displayName = 'PopOver';\n\nexport default PopOver;\n"],"names":["PopOverVariant","PopOver","React","props","ref","id","children","controllerRef","popOverRef","show","className","variant","role","testId","arrowClassName","zIndex","ZIndex","bubbleRef","useRef","arrowRef","bubbleSize","useSize","controllerSize","setControllerSize","useState","controllerisVisible","useIsVisible","updateControllerSize","_a","useInterval","useLayoutEvent","useEffect","isTooltip","popOverClasses","classNames","styles","verticalPosition","getVerticalPosition","arrowClasses","bubbleStyle","getBubbleStyle","arrowStyle","getArrowStyle","mergeRefs","AnalyticsId","PopOver$1"],"mappings":";;;;;;;;;;AAcY,IAAAA,sBAAAA,OACVA,EAAA,oBAAoB,qBACpBA,EAAA,gBAAgB,iBAChBA,EAAA,gBAAgB,iBAHNA,IAAAA,KAAA,CAAA,CAAA;AAiCZ,MAAMC,IAAUC,EAAM,WAAyD,CAACC,GAAOC,MAAQ;AACvF,QAAA;AAAA,IACJ,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,QAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,QAAAC,IAASC,EAAO;AAAA,EACd,IAAAb,GAEEc,IAAYT,KAAcU,EAAuB,IAAI,GACrDC,IAAWD,EAAuB,IAAI,GACtCE,IAAaC,EAAQJ,CAAS,GAC9B,CAACK,GAAgBC,CAAiB,IAAIC,EAAkB,GACxDC,IAAsBC,EAAanB,GAAe,CAAC,GAEnDoB,IAAuB,MAAY;;AACrB,IAAAJ,GAAAK,IAAArB,EAAc,YAAd,gBAAAqB,EAAuB,uBAAuB;AAAA,EAAA;AAGlE,EAAAC,EAAYF,GAAsB,GAAG,GACrCG,EAAeH,GAAsB,CAAC,UAAU,QAAQ,GAAG,EAAE,GAE7DI,EAAU,MAAM;AACO,IAAAJ;EACvB,GAAG,CAAE,CAAA;AAEL,QAAMK,IAAYpB,MAAS,WAErBqB,IAAiBC,EAAWC,EAAO,SAAS,EAAE,CAACA,EAAO,kBAAkB,CAAC,GAAGH,IAAYvB,IAAOgB,KAAuBf,CAAS,GAC/H0B,IAAmBd,KAAkBF,KAAciB,EAAoBf,GAAgBF,GAAYT,CAAO,GAC1G2B,IAAeJ,EAAWC,EAAO,gBAAgBrB,GAAgB;AAAA,IACrE,CAACqB,EAAO,sBAAsB,CAAC,GAAGC,MAAqB;AAAA,IACvD,CAACD,EAAO,uBAAuB,CAAC,GAAGC,MAAqB;AAAA;AAAA,EAAA,CACzD,
|
|
1
|
+
{"version":3,"file":"PopOver.js","sources":["../../../src/components/PopOver/PopOver.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getArrowStyle, getBubbleStyle, getVerticalPosition } from './utils';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useInterval } from '../../hooks/useInterval';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { useSize } from '../../hooks/useSize';\nimport { mergeRefs } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport enum PopOverVariant {\n positionautomatic = 'positionautomatic',\n positionbelow = 'positionbelow',\n positionabove = 'positionabove',\n}\n\nexport type PopOverRole = 'tooltip';\n\nexport interface PopOverProps {\n /** Id of the PopOver */\n id?: string;\n /** Content shown inside PopOver. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n children: React.ReactNode;\n /** Ref for the element the PopOver is placed upon */\n controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n /** Ref for the element the PopOver is placed upon */\n popOverRef?: React.RefObject<HTMLDivElement>;\n /** Show the popover. Only applies when role=tooltip. Default: false. */\n show?: boolean;\n /** Adds custom classes to the element. */\n className?: string;\n /** Adds custom classes to the arrow element. */\n arrowClassName?: string;\n /** Determines the placement of the popover. Default: automatic positioning. */\n variant?: keyof typeof PopOverVariant;\n /** Sets role of the PopOver element */\n role?: PopOverRole;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Overrides the default z-index of PopOver */\n zIndex?: number;\n}\n\nconst PopOver = React.forwardRef<HTMLDivElement | SVGSVGElement, PopOverProps>((props, ref) => {\n const {\n id,\n children,\n controllerRef,\n popOverRef,\n show = false,\n className = '',\n variant = PopOverVariant.positionautomatic,\n role,\n testId,\n arrowClassName,\n zIndex = ZIndex.PopOver,\n } = props;\n\n const bubbleRef = popOverRef || useRef<HTMLDivElement>(null);\n const arrowRef = useRef<HTMLDivElement>(null);\n const bubbleSize = useSize(bubbleRef);\n const [controllerSize, setControllerSize] = useState<DOMRect>();\n const controllerisVisible = useIsVisible(controllerRef, 0);\n\n const updateControllerSize = (): void => {\n setControllerSize(controllerRef.current?.getBoundingClientRect());\n };\n\n useInterval(updateControllerSize, 500);\n useLayoutEvent(updateControllerSize, ['scroll', 'resize'], 10);\n\n useEffect(() => {\n updateControllerSize();\n }, []);\n\n const isTooltip = role === 'tooltip';\n\n const popOverClasses = classNames(styles.popover, { [styles['popover--visible']]: isTooltip ? show : controllerisVisible }, className);\n const verticalPosition = controllerSize && bubbleSize && getVerticalPosition(controllerSize, bubbleSize, variant);\n const arrowClasses = classNames(styles.popover__arrow, arrowClassName, {\n [styles['popover__arrow--over']]: verticalPosition === PopOverVariant.positionbelow,\n [styles['popover__arrow--under']]: verticalPosition === PopOverVariant.positionabove,\n [styles['popover__arrow--visible']]: isTooltip ? show : controllerisVisible,\n });\n\n const bubbleStyle = controllerSize && bubbleSize && getBubbleStyle(controllerSize, bubbleSize, variant);\n const arrowStyle = bubbleStyle && controllerSize && verticalPosition && getArrowStyle(bubbleStyle, controllerSize, verticalPosition);\n\n return (\n <>\n <div\n id={id}\n ref={mergeRefs([ref, bubbleRef])}\n className={popOverClasses}\n style={{ ...bubbleStyle, zIndex }}\n data-testid={testId}\n data-analyticsid={AnalyticsId.PopOver}\n role={role}\n >\n {children}\n </div>\n <div ref={arrowRef} className={arrowClasses} style={{ ...arrowStyle, zIndex }} />\n </>\n );\n});\n\nPopOver.displayName = 'PopOver';\n\nexport default PopOver;\n"],"names":["PopOverVariant","PopOver","React","props","ref","id","children","controllerRef","popOverRef","show","className","variant","role","testId","arrowClassName","zIndex","ZIndex","bubbleRef","useRef","arrowRef","bubbleSize","useSize","controllerSize","setControllerSize","useState","controllerisVisible","useIsVisible","updateControllerSize","_a","useInterval","useLayoutEvent","useEffect","isTooltip","popOverClasses","classNames","styles","verticalPosition","getVerticalPosition","arrowClasses","bubbleStyle","getBubbleStyle","arrowStyle","getArrowStyle","mergeRefs","AnalyticsId","PopOver$1"],"mappings":";;;;;;;;;;AAcY,IAAAA,sBAAAA,OACVA,EAAA,oBAAoB,qBACpBA,EAAA,gBAAgB,iBAChBA,EAAA,gBAAgB,iBAHNA,IAAAA,KAAA,CAAA,CAAA;AAiCZ,MAAMC,IAAUC,EAAM,WAAyD,CAACC,GAAOC,MAAQ;AACvF,QAAA;AAAA,IACJ,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,QAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,QAAAC,IAASC,EAAO;AAAA,EACd,IAAAb,GAEEc,IAAYT,KAAcU,EAAuB,IAAI,GACrDC,IAAWD,EAAuB,IAAI,GACtCE,IAAaC,EAAQJ,CAAS,GAC9B,CAACK,GAAgBC,CAAiB,IAAIC,EAAkB,GACxDC,IAAsBC,EAAanB,GAAe,CAAC,GAEnDoB,IAAuB,MAAY;;AACrB,IAAAJ,GAAAK,IAAArB,EAAc,YAAd,gBAAAqB,EAAuB,uBAAuB;AAAA,EAAA;AAGlE,EAAAC,EAAYF,GAAsB,GAAG,GACrCG,EAAeH,GAAsB,CAAC,UAAU,QAAQ,GAAG,EAAE,GAE7DI,EAAU,MAAM;AACO,IAAAJ;EACvB,GAAG,CAAE,CAAA;AAEL,QAAMK,IAAYpB,MAAS,WAErBqB,IAAiBC,EAAWC,EAAO,SAAS,EAAE,CAACA,EAAO,kBAAkB,CAAC,GAAGH,IAAYvB,IAAOgB,KAAuBf,CAAS,GAC/H0B,IAAmBd,KAAkBF,KAAciB,EAAoBf,GAAgBF,GAAYT,CAAO,GAC1G2B,IAAeJ,EAAWC,EAAO,gBAAgBrB,GAAgB;AAAA,IACrE,CAACqB,EAAO,sBAAsB,CAAC,GAAGC,MAAqB;AAAA,IACvD,CAACD,EAAO,uBAAuB,CAAC,GAAGC,MAAqB;AAAA,IACxD,CAACD,EAAO,yBAAyB,CAAC,GAAGH,IAAYvB,IAAOgB;AAAA,EAAA,CACzD,GAEKc,IAAcjB,KAAkBF,KAAcoB,EAAelB,GAAgBF,GAAYT,CAAO,GAChG8B,IAAaF,KAAejB,KAAkBc,KAAoBM,EAAcH,GAAajB,GAAgBc,CAAgB;AAEnI,SAEIlC,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAAA,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAAG;AAAA,MACA,KAAKsC,EAAU,CAACvC,GAAKa,CAAS,CAAC;AAAA,MAC/B,WAAWgB;AAAA,MACX,OAAO,EAAE,GAAGM,GAAa,QAAAxB,EAAO;AAAA,MAChC,eAAaF;AAAA,MACb,oBAAkB+B,EAAY;AAAA,MAC9B,MAAAhC;AAAA,IAAA;AAAA,IAECN;AAAA,EAEH,GAAAJ,gBAAAA,EAAA,cAAC,OAAI,EAAA,KAAKiB,GAAU,WAAWmB,GAAc,OAAO,EAAE,GAAGG,GAAY,QAAA1B,KAAU,CACjF;AAEJ,CAAC;AAEDd,EAAQ,cAAc;AAEtB,MAAA4C,KAAe5C;"}
|
|
@@ -22,10 +22,6 @@
|
|
|
22
22
|
|
|
23
23
|
&--visible {
|
|
24
24
|
visibility: visible;
|
|
25
|
-
|
|
26
|
-
& + #{$popover}__arrow {
|
|
27
|
-
visibility: visible;
|
|
28
|
-
}
|
|
29
25
|
}
|
|
30
26
|
|
|
31
27
|
border: getSpacer(4xs) solid $plum600;
|
|
@@ -46,6 +42,7 @@
|
|
|
46
42
|
border-style: solid;
|
|
47
43
|
border-color: transparent;
|
|
48
44
|
z-index: 3;
|
|
45
|
+
visibility: hidden;
|
|
49
46
|
|
|
50
47
|
&--over {
|
|
51
48
|
border-width: 0.625rem;
|
|
@@ -60,9 +57,9 @@
|
|
|
60
57
|
filter: drop-shadow(var(--drop-shadow-color) 0 0.125rem 0.375rem 0.125rem);
|
|
61
58
|
filter: drop-shadow(0 0.2rem 0 var(--drop-shadow-color));
|
|
62
59
|
}
|
|
63
|
-
}
|
|
64
60
|
|
|
65
|
-
|
|
66
|
-
|
|
61
|
+
&--visible {
|
|
62
|
+
visibility: visible;
|
|
63
|
+
}
|
|
67
64
|
}
|
|
68
65
|
}
|
|
@@ -27,7 +27,7 @@ export interface SelectProps extends Pick<React.SelectHTMLAttributes<HTMLSelectE
|
|
|
27
27
|
/** Gives defaultvalue to the comp. Preferred over selected prop on option by react */
|
|
28
28
|
defaultValue?: string | number;
|
|
29
29
|
/** Adds custom classes to the wrapper tag */
|
|
30
|
-
wrapperClassName?:
|
|
30
|
+
wrapperClassName?: string;
|
|
31
31
|
}
|
|
32
32
|
export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
|
|
33
33
|
export default Select;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n extends Pick<\n React.SelectHTMLAttributes<HTMLSelectElement>,\n 'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'\n > {\n /** Sets the content of the select element. */\n children: React.ReactNode;\n /** Adds custom classes to the element. */\n className?: string;\n /** Changes the visuals of the component */\n concept?: SelectConcept;\n /** The label text above the select */\n label?: React.ReactNode;\n /** Changes the visuals of the component */\n mode?: keyof typeof FormMode;\n /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n error?: boolean;\n /** Error text to show above the component */\n errorText?: string;\n /** Error text id */\n errorTextId?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** select id of the select element */\n selectId?: string;\n /** Width of select in characters (approximate) */\n width?: number;\n /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n defaultValue?: string | number;\n /** Adds custom classes to the wrapper tag */\n wrapperClassName?:
|
|
1
|
+
{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n extends Pick<\n React.SelectHTMLAttributes<HTMLSelectElement>,\n 'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'\n > {\n /** Sets the content of the select element. */\n children: React.ReactNode;\n /** Adds custom classes to the element. */\n className?: string;\n /** Changes the visuals of the component */\n concept?: SelectConcept;\n /** The label text above the select */\n label?: React.ReactNode;\n /** Changes the visuals of the component */\n mode?: keyof typeof FormMode;\n /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n error?: boolean;\n /** Error text to show above the component */\n errorText?: string;\n /** Error text id */\n errorTextId?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** select id of the select element */\n selectId?: string;\n /** Width of select in characters (approximate) */\n width?: number;\n /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n defaultValue?: string | number;\n /** Adds custom classes to the wrapper tag */\n wrapperClassName?: string;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n const paddingWidth = '2rem';\n\n return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean) => {\n const iconColor = invalid ? 'cherry' : 'blueberry';\n return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select = React.forwardRef(function SelectForwardedRef(props: SelectProps, ref: React.Ref<HTMLSelectElement>) {\n const {\n className,\n children,\n concept = 'normal',\n disabled,\n error,\n errorText,\n errorTextId,\n label,\n selectId,\n name = selectId,\n mode = FormMode.onwhite,\n testId,\n width,\n required,\n value,\n defaultValue,\n autoComplete = 'off',\n wrapperClassName,\n ...rest\n } = props;\n\n const uuid = useUuid(selectId);\n const errorTextUuid = useUuid(errorTextId);\n const onBlueberry = mode === 'onblueberry';\n const invalid = mode === 'oninvalid' || !!errorText || !!error;\n const iconColor = getIconColor(invalid, !!disabled);\n const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n const selectInnerWrapperClasses = classNames(\n selectStyles['select-inner-wrapper'],\n {\n [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n [selectStyles['select-inner-wrapper--invalid']]: invalid,\n [selectStyles['select-inner-wrapper--disabled']]: disabled,\n },\n className\n );\n\n const selectClasses = classNames(selectStyles.select, {\n [selectStyles['select--on-blueberry']]: onBlueberry,\n [selectStyles['select--invalid']]: invalid,\n });\n\n const selectWrapperClasses = classNames(selectStyles['select-wrapper'], wrapperClassName);\n\n return (\n <ErrorWrapper errorText={errorText} errorTextId={errorTextUuid}>\n <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectWrapperClasses} style={{ maxWidth }}>\n {renderLabel(label, uuid, mode as FormMode)}\n <div className={selectInnerWrapperClasses}>\n <Icon className={selectStyles['select-arrow']} svgIcon={ChevronDown} color={iconColor} size={IconSize.XSmall} />\n <select\n aria-invalid={!!invalid}\n id={uuid}\n name={name}\n className={selectClasses}\n disabled={disabled}\n ref={ref}\n required={required}\n aria-describedby={[props['aria-describedby'] || '', errorTextUuid].join(' ')}\n aria-required={!!required}\n value={value}\n defaultValue={defaultValue}\n autoComplete={autoComplete ? autoComplete : undefined}\n {...rest}\n >\n {children}\n </select>\n </div>\n </div>\n </ErrorWrapper>\n );\n});\n\nexport default Select;\n"],"names":["getSelectMaxWidth","characters","AVERAGE_CHARACTER_WIDTH_PX","getIconColor","invalid","disabled","getColor","Select","React","props","ref","className","children","concept","error","errorText","errorTextId","label","selectId","name","mode","FormMode","testId","width","required","value","defaultValue","autoComplete","wrapperClassName","rest","uuid","useUuid","errorTextUuid","onBlueberry","iconColor","maxWidth","selectInnerWrapperClasses","classNames","selectStyles","selectClasses","selectWrapperClasses","ErrorWrapper","AnalyticsId","renderLabel","Icon","ChevronDown","IconSize","Select$1"],"mappings":";;;;;;;;;;AAiDA,MAAMA,IAAoB,CAACC,MAGlB,QAAQA,IAAaC,CAA0B,cAGlDC,IAAe,CAACC,GAAkBC,MAE/BA,IAAWC,EAAS,WAAW,GAAG,IAAIA,EAD3BF,IAAU,WAAW,aAC0B,GAAG,GAGzDG,IAASC,EAAM,WAAW,SAA4BC,GAAoBC,GAAmC;AAClH,QAAA;AAAA,IACJ,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAAR;AAAA,IACA,OAAAS;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC,IAAOD;AAAA,IACP,MAAAE,IAAOC,EAAS;AAAA,IAChB,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,kBAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAApB,GAEEqB,IAAOC,EAAQb,CAAQ,GACvBc,IAAgBD,EAAQf,CAAW,GACnCiB,IAAcb,MAAS,eACvBhB,IAAUgB,MAAS,eAAe,CAAC,CAACL,KAAa,CAAC,CAACD,GACnDoB,IAAY/B,EAAaC,GAAS,CAAC,CAACC,CAAQ,GAC5C8B,IAAWZ,IAAQvB,EAAkBuB,CAAK,IAAI,QAE9Ca,IAA4BC;AAAA,IAChCC,EAAa,sBAAsB;AAAA,IACnC;AAAA,MACE,CAACA,EAAa,mCAAmC,CAAC,GAAGzB,MAAY;AAAA,MACjE,CAACyB,EAAa,oCAAoC,CAAC,GAAGL;AAAA,MACtD,CAACK,EAAa,+BAA+B,CAAC,GAAGlC;AAAA,MACjD,CAACkC,EAAa,gCAAgC,CAAC,GAAGjC;AAAA,IACpD;AAAA,IACAM;AAAA,EAAA,GAGI4B,IAAgBF,EAAWC,EAAa,QAAQ;AAAA,IACpD,CAACA,EAAa,sBAAsB,CAAC,GAAGL;AAAA,IACxC,CAACK,EAAa,iBAAiB,CAAC,GAAGlC;AAAA,EAAA,CACpC,GAEKoC,IAAuBH,EAAWC,EAAa,gBAAgB,GAAGV,CAAgB;AAExF,yCACGa,GAAa,EAAA,WAAA1B,GAAsB,aAAaiB,KAC/CxB,gBAAAA,EAAA,cAAC,SAAI,eAAac,GAAQ,oBAAkBoB,EAAY,QAAQ,WAAWF,GAAsB,OAAO,EAAE,UAAAL,EAAA,KACvGQ,EAAY1B,GAAOa,GAAMV,CAAgB,GACzCZ,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAW4B,EACd,GAAA5B,gBAAAA,EAAA,cAACoC,KAAK,WAAWN,EAAa,cAAc,GAAG,SAASO,GAAa,OAAOX,GAAW,MAAMY,EAAS,QAAQ,GAC9GtC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,gBAAc,CAAC,CAACJ;AAAA,MAChB,IAAI0B;AAAA,MACJ,MAAAX;AAAA,MACA,WAAWoB;AAAA,MACX,UAAAlC;AAAA,MACA,KAAAK;AAAA,MACA,UAAAc;AAAA,MACA,oBAAkB,CAACf,EAAM,kBAAkB,KAAK,IAAIuB,CAAa,EAAE,KAAK,GAAG;AAAA,MAC3E,iBAAe,CAAC,CAACR;AAAA,MACjB,OAAAC;AAAA,MACA,cAAAC;AAAA,MACA,cAAcC,KAA8B;AAAA,MAC3C,GAAGE;AAAA,IAAA;AAAA,IAEHjB;AAAA,EAEL,CAAA,CACF,CACF;AAEJ,CAAC,GAEDmC,KAAexC;"}
|