@helsenorge/designsystem-react 1.5.1 → 1.6.0
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/__mocks__/IntersectionObserver.d.ts +1 -0
- package/__mocks__/IntersectionObserver.d.ts.map +1 -1
- package/__mocks__/IntersectionObserver.js +1 -1
- package/__mocks__/ResizeObserver.d.ts +1 -0
- package/__mocks__/ResizeObserver.d.ts.map +1 -1
- package/__mocks__/ResizeObserver.js +1 -1
- package/components/ExpanderList/ExpanderList.d.ts +3 -1
- package/components/ExpanderList/ExpanderList.d.ts.map +1 -1
- package/components/ExpanderList/componentdata.json +19 -0
- package/components/ExpanderList/index.js +1 -1
- package/components/ExpanderList/styles.module.scss +10 -0
- package/components/ExpanderList/styles.module.scss.d.ts +2 -0
- package/package.json +1 -1
- package/utils/refs.d.ts +15 -0
- package/utils/refs.d.ts.map +1 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IntersectionObserver.d.ts","sourceRoot":"","sources":["../../src/__mocks__/IntersectionObserver.ts"],"names":[],"mappings":"AAAA,cAAM,oBAAoB;IACxB,OAAO,IAAI,IAAI;IAGf,SAAS,IAAI,IAAI;
|
|
1
|
+
{"version":3,"file":"IntersectionObserver.d.ts","sourceRoot":"","sources":["../../src/__mocks__/IntersectionObserver.ts"],"names":[],"mappings":"AAAA,cAAM,oBAAoB;IACxB,OAAO,IAAI,IAAI;IAGf,SAAS,IAAI,IAAI;IAGjB,UAAU,IAAI,IAAI;CAGnB;AAMD,eAAe,oBAAoB,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{b as e,c as n}from"../_rollupPluginBabelHelpers-0f007973.js";var
|
|
1
|
+
import{b as e,c as n}from"../_rollupPluginBabelHelpers-0f007973.js";var o=function(){function o(){n(this,o)}return e(o,[{key:"observe",value:function(){}},{key:"unobserve",value:function(){}},{key:"disconnect",value:function(){}}]),o}();Object.defineProperty(window,"IntersectionObserver",{value:o});export{o as default};
|
|
2
2
|
//# sourceMappingURL=IntersectionObserver.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ResizeObserver.d.ts","sourceRoot":"","sources":["../../src/__mocks__/ResizeObserver.ts"],"names":[],"mappings":"AAAA,cAAM,cAAc;IAClB,OAAO;IAGP,SAAS;
|
|
1
|
+
{"version":3,"file":"ResizeObserver.d.ts","sourceRoot":"","sources":["../../src/__mocks__/ResizeObserver.ts"],"names":[],"mappings":"AAAA,cAAM,cAAc;IAClB,OAAO;IAGP,SAAS;IAGT,UAAU;CAGX;AAMD,eAAe,cAAc,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{b as e,c as
|
|
1
|
+
import{b as e,c as n}from"../_rollupPluginBabelHelpers-0f007973.js";var o=function(){function o(){n(this,o)}return e(o,[{key:"observe",value:function(){}},{key:"unobserve",value:function(){}},{key:"disconnect",value:function(){}}]),o}();Object.defineProperty(window,"ResizeObserver",{value:o});export{o as default};
|
|
2
2
|
//# sourceMappingURL=ResizeObserver.js.map
|
|
@@ -27,6 +27,8 @@ interface ExpanderListProps {
|
|
|
27
27
|
renderChildrenWhenClosed?: boolean;
|
|
28
28
|
/** Toggles the top border of the first child element. */
|
|
29
29
|
topBorder?: boolean;
|
|
30
|
+
/** Stick expander trigger to top of screen while scrolling down */
|
|
31
|
+
sticky?: boolean;
|
|
30
32
|
/** Sets the data-testid attribute. */
|
|
31
33
|
testId?: string;
|
|
32
34
|
}
|
|
@@ -45,7 +47,7 @@ declare type ExpanderProps = Modify<React.HTMLAttributes<HTMLButtonElement>, {
|
|
|
45
47
|
handleExpanderClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
|
|
46
48
|
/** Called when expander is open/closed. */
|
|
47
49
|
onExpand?: (isExpanded: boolean) => void;
|
|
48
|
-
}> & Pick<ExpanderListProps, 'renderChildrenWhenClosed'>;
|
|
50
|
+
}> & Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'sticky'>;
|
|
49
51
|
export declare const ExpanderList: ExpanderListCompound;
|
|
50
52
|
export default ExpanderList;
|
|
51
53
|
//# sourceMappingURL=ExpanderList.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpanderList.d.ts","sourceRoot":"","sources":["../../../src/components/ExpanderList/ExpanderList.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ExpanderList.d.ts","sourceRoot":"","sources":["../../../src/components/ExpanderList/ExpanderList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAkBnD,oBAAY,kBAAkB,GAAG,YAAY,CAAC;AAC9C,oBAAY,YAAY,GAAG,KAAK,CAAC,yBAAyB,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;AAE/G,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,yBAAyB,CAAC,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACtI,QAAQ,EAAE,YAAY,CAAC;CACxB;AAED,UAAU,iBAAiB;IACzB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gCAAgC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wCAAwC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wCAAwC;IACxC,qGAAqG;IACrG,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sGAAsG;IACtG,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,aAAK,MAAM,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC;AAEzC,aAAK,aAAa,GAAG,MAAM,CACzB,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EACvC;IACE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACjF,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CACF,GACC,IAAI,CAAC,iBAAiB,EAAE,0BAA0B,GAAG,QAAQ,CAAC,CAAC;AAoHjE,eAAO,MAAM,YAAY,sBA6FC,CAAC;AAK3B,eAAe,YAAY,CAAC"}
|
|
@@ -220,6 +220,25 @@
|
|
|
220
220
|
"name": "boolean"
|
|
221
221
|
}
|
|
222
222
|
},
|
|
223
|
+
"sticky": {
|
|
224
|
+
"defaultValue": null,
|
|
225
|
+
"description": "Stick expander trigger to top of screen while scrolling down",
|
|
226
|
+
"name": "sticky",
|
|
227
|
+
"parent": {
|
|
228
|
+
"fileName": "src/components/ExpanderList/ExpanderList.tsx",
|
|
229
|
+
"name": "ExpanderListProps"
|
|
230
|
+
},
|
|
231
|
+
"declarations": [
|
|
232
|
+
{
|
|
233
|
+
"fileName": "src/components/ExpanderList/ExpanderList.tsx",
|
|
234
|
+
"name": "ExpanderListProps"
|
|
235
|
+
}
|
|
236
|
+
],
|
|
237
|
+
"required": false,
|
|
238
|
+
"type": {
|
|
239
|
+
"name": "boolean"
|
|
240
|
+
}
|
|
241
|
+
},
|
|
223
242
|
"testId": {
|
|
224
243
|
"defaultValue": null,
|
|
225
244
|
"description": "Sets the data-testid attribute.",
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,a as n,d as t}from"../../_rollupPluginBabelHelpers-0f007973.js";import i,{useState as r,useEffect as
|
|
1
|
+
import{_ as e,a as n,d as t}from"../../_rollupPluginBabelHelpers-0f007973.js";import i,{useState as r,useRef as a,useEffect as o}from"react";import{I as d}from"../../Icon-2146c8a0.js";import{A as s,Z as l,I as c}from"../../constants-cd62f8dd.js";import{C as p}from"../../ChevronUp-e7ceb743.js";import{C as u}from"../../ChevronDown-e437ddc7.js";import{u as m}from"../../useHover-18479690.js";import{u as f}from"../../usePrevious-ae293b10.js";import{u as v,B as x}from"../../useBreakpoint-a74f5af5.js";import{c as g}from"../../index-d1c0552c.js";import _ from"./styles.module.scss";import{u as h}from"../../useUuid-3b1e73f2.js";import{a as j}from"../../useSticky-f8ffc6d8.js";import"../../_tslib-b219470a.js";import"../../grid-c105cad1.js";import"../../uuid-11037462.js";import"../../debounce-fb23662f.js";var k=i.forwardRef((function(h,k){var E,b,C=h.id,y=h.children,w=h.padding,N=void 0===w||w,H=h.color,I=void 0===H?"neutral":H,O=h.className,W=void 0===O?"":O,B=h.icon,L=h.large,S=void 0!==L&&L,z=h.title,P=h.expanded,R=void 0!==P&&P,T=h.sticky,U=h.testId,V=h.handleExpanderClick,X=h.onExpand,A=h.renderChildrenWhenClosed,D=r(R),Z=e(D,2),q=Z[0],F=Z[1],G=f(q),J=a(null),K=a(null),M=m(K).isHovered,Q=v(),Y=j(J,K),$=Y.isOutsideWindow,ee=Y.isLeavingWindow,ne=Y.offsetHeight,te=Y.contentWidth,ie=T&&q&&$,re="object"===n(z),ae=g(W,t({},_["expander-list__item--jsx"],re)),oe=g(_["expander-list-link"],_["expander-list-link--".concat(I)],(t(E={},_["expander-list-link--closed"],!q),t(E,_["expander-list-link--large"],S),t(E,_["expander-list-link--jsx"],re),t(E,_["expander-list-link--sticky"],ie&&!ee),t(E,_["expander-list-link--absolute"],ie&&ee),E)),de=g(_["expander-list-link__title"],(t(b={},_["expander-list-link__title--string"],!re),t(b,_["expander-list-link__title--jsx"],re),b));o((function(){R!==q&&F(R)}),[R]),o((function(){X&&q!==!!G&&X(q)}),[q,X]);var se;return i.createElement("li",{className:ae,ref:(se=[k,J],function(e){se.forEach((function(n){"function"==typeof n?n(e):null!=n&&(n.current=e)}))}),style:{paddingTop:ie&&ne?"".concat(ne,"px"):void 0}},i.createElement("button",{type:"button",id:C,onClick:V,"data-testid":U,"data-analyticsid":s.ExpanderListExpander,className:oe,ref:K,"aria-expanded":q,style:{zIndex:M||ie?l.ExpanderTrigger:void 0,width:ie&&te?"".concat(te,"px"):void 0}},B&&i.createElement("span",{className:_["expander-list-link__icon"]},i.cloneElement(B,{size:Q===x.xs?c.XSmall:c.Small,isHovered:M})),i.createElement("span",{className:de},z),i.createElement("span",{className:_["expander-list-link__chevron"]},i.createElement(d,{size:c.XSmall,svgIcon:q?p:u,isHovered:M}))),function(){if(!A&&!q)return null;var e=g(_["expander-list-link__main-content"],q&&_["expander-list-link__main-content--expanded"],N?_["expander-list-link__main-content--padding"]:"");return i.createElement("div",{className:e},y)}())})),E=function(e){return i.isValidElement(e)&&e.type===k},b=i.forwardRef((function(n,a){var d=n.children,l=n.childPadding,c=void 0===l||l,p=n.large,u=n.isOpen,m=void 0!==u&&u,f=n.renderChildrenWhenClosed,v=void 0!==f&&f,x=n.color,j=n.className,k=void 0===j?"":j,b=n.accordion,C=void 0!==b&&b,y=n.topBorder,w=void 0===y||y,N=n.bottomBorder,H=void 0===N||N,I=n.sticky,O=void 0!==I&&I,W=n.testId,B=r(),L=e(B,2),S=L[0],z=L[1],P=r(),R=e(P,2),T=R[0],U=R[1],V=h(),X=i.Children.count(d),A=g(_["expander-list"],k);var D=function(e){return"".concat(V,"-").concat(e)};return o((function(){var e,n,t,i,r;!C||!T||(e=T.getBoundingClientRect(),n=e.top,t=e.left,i=e.bottom,r=e.right,n>=0&&t>=0&&i<=(window.innerHeight||document.documentElement.clientHeight)&&r<=(window.innerWidth||document.documentElement.clientWidth))||T.scrollIntoView()}),[C,T]),o((function(){if(m){var e=D(0);z((function(n){return C?t({},e,!(null==n?void 0:n[e])):Object.assign(Object.assign({},n),t({},e,!(null==n?void 0:n[e])))}))}}),[m]),o((function(){var e;if(!m){var n=null===(e=i.Children.map(d,(function(e){if(E(e))return e})))||void 0===e?void 0:e.reduce((function(e,n,t){return void 0!==n.props.expanded&&(e[D(t)]=n.props.expanded),e}),{});z(Object.assign(Object.assign({},S),n))}}),[d]),i.createElement("ul",{className:A,ref:a,"data-testid":W,"data-analyticsid":s.ExpanderList},i.Children.map(d,(function(e,n){if(E(e)){var r=D(n),a=null==S?void 0:S[r],o=function(e){var n;return g(_["expander-list__item"],(t(n={},_["expander-list__item--top"],0===e&&w),t(n,_["expander-list__item--no-bottom"],e===X-1&&!H),n))}(n);return i.cloneElement(e,{id:r,key:n,expanded:a,padding:c,color:x,large:p,sticky:O,"aria-expanded":a,className:o,handleExpanderClick:function(e){return function(e,n){z((function(e){return C?t({},n,!(null==e?void 0:e[n])):Object.assign(Object.assign({},e),t({},n,!(null==e?void 0:e[n])))})),U(e.currentTarget)}(e,"".concat(V,"-").concat(n))},renderChildrenWhenClosed:v})}return e})))}));b.Expander=k,k.displayName="ExpanderList.Expander";export{b as ExpanderList,b as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
&__item {
|
|
13
13
|
border: 0;
|
|
14
14
|
border-bottom: 1px solid $neutral500;
|
|
15
|
+
position: relative;
|
|
15
16
|
|
|
16
17
|
&--top {
|
|
17
18
|
border-top: 1px solid $neutral500;
|
|
@@ -122,6 +123,15 @@
|
|
|
122
123
|
}
|
|
123
124
|
}
|
|
124
125
|
|
|
126
|
+
&--sticky {
|
|
127
|
+
position: fixed;
|
|
128
|
+
top: 0;
|
|
129
|
+
}
|
|
130
|
+
&--absolute {
|
|
131
|
+
position: absolute;
|
|
132
|
+
bottom: 0;
|
|
133
|
+
}
|
|
134
|
+
|
|
125
135
|
&__title {
|
|
126
136
|
color: $black;
|
|
127
137
|
display: flex;
|
|
@@ -12,6 +12,7 @@ export type Styles = {
|
|
|
12
12
|
'expander-list-link__title': string;
|
|
13
13
|
'expander-list-link__title--jsx': string;
|
|
14
14
|
'expander-list-link__title--string': string;
|
|
15
|
+
'expander-list-link--absolute': string;
|
|
15
16
|
'expander-list-link--banana': string;
|
|
16
17
|
'expander-list-link--blueberry': string;
|
|
17
18
|
'expander-list-link--cherry': string;
|
|
@@ -21,6 +22,7 @@ export type Styles = {
|
|
|
21
22
|
'expander-list-link--large': string;
|
|
22
23
|
'expander-list-link--neutral': string;
|
|
23
24
|
'expander-list-link--plum': string;
|
|
25
|
+
'expander-list-link--sticky': string;
|
|
24
26
|
'expander-list-link--white': string;
|
|
25
27
|
};
|
|
26
28
|
|
package/package.json
CHANGED
package/utils/refs.d.ts
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
/**
|
|
3
|
+
* Slår sammen refs fra forwardRef og useRef slik at begge deler kan brukes
|
|
4
|
+
* Fra https://github.com/gregberge/react-merge-refs
|
|
5
|
+
* @param refs array med refs som skal slås sammen
|
|
6
|
+
* @returns refcallback som kan brukes på komponent
|
|
7
|
+
*/
|
|
8
|
+
export declare const mergeRefs: <T>(refs: (import("react").MutableRefObject<T> | import("react").LegacyRef<T>)[]) => (instance: T | null) => void;
|
|
9
|
+
/**
|
|
10
|
+
* Sjekker om ref er et objekt (og ikke en funksjon)
|
|
11
|
+
* @param ref
|
|
12
|
+
* @returns type predicate
|
|
13
|
+
*/
|
|
14
|
+
export declare const isMutableRefObject: <T>(ref: import("react").ForwardedRef<T>) => ref is import("react").MutableRefObject<T>;
|
|
15
|
+
//# sourceMappingURL=refs.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"refs.d.ts","sourceRoot":"","sources":["../../src/utils/refs.ts"],"names":[],"mappings":";AAAA;;;;;GAKG;AACH,eAAO,MAAM,SAAS,mHAUrB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,yFAE9B,CAAC"}
|