@openfin/ui-library 0.21.0-alpha.1691437502 → 0.21.0-alpha.1691514572

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.
@@ -3,13 +3,17 @@ export interface CollapsibleCardProps extends Omit<CollapsibleCardStatelessProps
3
3
  expanded?: boolean;
4
4
  }
5
5
  export declare const CollapsibleCard: FC<CollapsibleCardProps>;
6
+ export interface CollapsibleCardHeaderSettings {
7
+ fixedHeader?: boolean;
8
+ zIndex?: number;
9
+ }
6
10
  export interface CollapsibleCardStatelessProps {
7
11
  title: string | ReactNode;
8
12
  badgeText?: number;
9
13
  maxHeight?: number;
10
- fixedHeader?: boolean;
14
+ headerSettings?: CollapsibleCardHeaderSettings;
11
15
  children: ReactNode;
12
16
  expanded: boolean;
13
17
  onExpand: (expanded: boolean) => void;
14
18
  }
15
- export declare const CollapsibleCardStateless: (props: CollapsibleCardStatelessProps) => JSX.Element;
19
+ export declare const CollapsibleCardStateless: import("react").ForwardRefExoticComponent<CollapsibleCardStatelessProps & import("react").RefAttributes<HTMLDivElement>>;
package/dist/index.js CHANGED
@@ -107,7 +107,7 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
107
107
  padding: ${({theme:e})=>e.px.small} ${({theme:e})=>e.px.small} 0px
108
108
  ${({theme:e})=>e.px.base};
109
109
  width: 100%;
110
- `},124:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.CollapsibleCardStateless=t.CollapsibleCard=void 0;const o=n(5893),i=n(6689),a=r(n(7518)),l=n(3136),c=n(9634),s=n(1335),u=n(3911),d=n(7769),f=n(9507);t.CollapsibleCard=e=>{const[n,r]=(0,i.useState)(e.expanded||!1);return(0,o.jsx)(t.CollapsibleCardStateless,Object.assign({},e,{expanded:n,onExpand:e=>r(!e)}))},t.CollapsibleCardStateless=e=>(0,o.jsxs)(C,Object.assign({"data-testid":"collapsible-card"},{children:[(0,o.jsxs)(h,Object.assign({"aria-expanded":e.expanded,"data-testid":"heading-container",style:{position:e.fixedHeader?"sticky":void 0,top:0},onClick:()=>e.onExpand(e.expanded),tabIndex:0,onKeyDown:t=>{switch(t.code){case"Enter":case"Space":t.preventDefault(),e.onExpand(e.expanded)}}},{children:[(0,o.jsx)(p,{children:e.title}),(0,o.jsxs)("div",Object.assign({id:"icon-container"},{children:[void 0!==e.badgeText&&(0,o.jsx)(l.Badge,{count:e.badgeText,id:"collapsible-card-heading-badge","data-testid":"collapsible-card-heading-badge"}),(0,o.jsx)(c.Icon,{icon:e.expanded?"ChevronUpIcon":"ChevronDownIcon"})]}))]})),e.expanded&&(0,o.jsx)(u.CardContainer,Object.assign({maxHeight:e.maxHeight||"none"},{children:(0,o.jsx)("div",{children:e.children})}))]}));const C=a.default.div`
110
+ `},124:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.CollapsibleCardStateless=t.CollapsibleCard=void 0;const o=n(5893),i=n(6689),a=r(n(7518)),l=n(3136),c=n(9634),s=n(1335),u=n(3911),d=n(7769),f=n(9507);t.CollapsibleCard=(0,i.forwardRef)(((e,n)=>{const[r,a]=(0,i.useState)(e.expanded||!1);return(0,o.jsx)(t.CollapsibleCardStateless,Object.assign({},e,{ref:n,expanded:r,onExpand:e=>a(!e)}))})),t.CollapsibleCard.displayName="CollapsibleCard",t.CollapsibleCardStateless=(0,i.forwardRef)(((e,t)=>{var n,r;return(0,o.jsxs)(C,Object.assign({"data-testid":"collapsible-card"},{children:[(0,o.jsxs)(h,Object.assign({"aria-expanded":e.expanded,"data-testid":"heading-container",ref:t,zIndex:null===(n=e.headerSettings)||void 0===n?void 0:n.zIndex,fixedHeader:null===(r=e.headerSettings)||void 0===r?void 0:r.fixedHeader,onClick:()=>e.onExpand(e.expanded),tabIndex:0,onKeyDown:t=>{switch(t.code){case"Enter":case"Space":t.preventDefault(),e.onExpand(e.expanded)}}},{children:[(0,o.jsx)(p,{children:e.title}),(0,o.jsxs)("div",Object.assign({id:"icon-container"},{children:[void 0!==e.badgeText&&(0,o.jsx)(l.Badge,{count:e.badgeText,id:"collapsible-card-heading-badge","data-testid":"collapsible-card-heading-badge"}),(0,o.jsx)(c.Icon,{icon:e.expanded?"ChevronUpIcon":"ChevronDownIcon"})]}))]})),e.expanded&&(0,o.jsx)(u.CardContainer,Object.assign({maxHeight:e.maxHeight||"none"},{children:(0,o.jsx)("div",{children:e.children})}))]}))})),t.CollapsibleCardStateless.displayName="CollapsibleCardStateless";const C=a.default.div`
111
111
  position: relative;
112
112
  display: inline-block;
113
113
  width: 100%;
@@ -118,6 +118,9 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
118
118
  display: block;
119
119
  overflow: hidden;
120
120
  `,h=(0,a.default)(s.Box)`
121
+ position: ${({fixedHeader:e})=>e?"sticky":"relative"};
122
+ top: ${({fixedHeader:e})=>e?0:void 0};
123
+ z-index: ${({zIndex:e})=>e};
121
124
  align-items: center;
122
125
  background: ${({theme:e})=>e.palette.background3};
123
126
  border-top: 1px solid ${({theme:e})=>e.palette.background5};
@@ -129,7 +132,6 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
129
132
  line-height: ${({theme:e})=>e.lineHeight.heading};
130
133
  outline: none;
131
134
  padding: ${({theme:e})=>e.px.base};
132
- position: relative;
133
135
  transition: border-color var(--openfin-ui-globalTransition);
134
136
  width: 100%;
135
137
  white-space: nowrap;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@openfin/ui-library",
3
3
  "description": "OpenFin UI Component Library",
4
- "version": "0.21.0-alpha.1691437502",
4
+ "version": "0.21.0-alpha.1691514572",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "repository": "github:openfin/ui-library",