@scm-manager/ui-layout 2.46.1 → 2.46.2-20230801-113910

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.
Files changed (7) hide show
  1. package/.turbo/turbo-build.log +7 -7
  2. package/build/index.d.ts +9 -3
  3. package/build/index.js +38 -26
  4. package/build/index.mjs +39 -27
  5. package/package.json +5 -5
  6. package/src/card/Card.tsx +5 -3
  7. package/src/collapsible/Collapsible.tsx +41 -19
package/.turbo/turbo-build.log CHANGED
@@ -1,4 +1,4 @@
1
- @scm-manager/ui-layout:build: cache hit, replaying output dd9a5d0d38cebab9
1
+ @scm-manager/ui-layout:build: cache hit, replaying output 101f7775217a5976
2
2
  @scm-manager/ui-layout:build: $ tsup ./src/index.ts -d build --format esm,cjs --dts
3
3
  @scm-manager/ui-layout:build: CLI Building entry: ./src/index.ts
4
4
  @scm-manager/ui-layout:build: CLI Using tsconfig: tsconfig.json
@@ -6,10 +6,10 @@
6
6
  @scm-manager/ui-layout:build: CLI Target: node14
7
7
  @scm-manager/ui-layout:build: ESM Build start
8
8
  @scm-manager/ui-layout:build: CJS Build start
9
- @scm-manager/ui-layout:build: ESM build/index.mjs 5.41 KB
10
- @scm-manager/ui-layout:build: ESM ⚡️ Build success in 112ms
11
- @scm-manager/ui-layout:build: CJS build/index.js 7.71 KB
12
- @scm-manager/ui-layout:build: CJS ⚡️ Build success in 89ms
9
+ @scm-manager/ui-layout:build: CJS build/index.js 8.15 KB
10
+ @scm-manager/ui-layout:build: CJS ⚡️ Build success in 153ms
11
+ @scm-manager/ui-layout:build: ESM build/index.mjs 5.82 KB
12
+ @scm-manager/ui-layout:build: ESM ⚡️ Build success in 178ms
13
13
  @scm-manager/ui-layout:build: DTS Build start
14
- @scm-manager/ui-layout:build: DTS ⚡️ Build success in 22507ms
15
- @scm-manager/ui-layout:build: DTS build/index.d.ts 5.01 KB
14
+ @scm-manager/ui-layout:build: DTS ⚡️ Build success in 23090ms
15
+ @scm-manager/ui-layout:build: DTS build/index.d.ts 5.47 KB
package/build/index.d.ts CHANGED
@@ -9,10 +9,14 @@ import * as RadixCollapsible from '@radix-ui/react-collapsible';
9
9
  */
10
10
  declare const Collapsible: react__default.ForwardRefExoticComponent<{
11
11
  header: ReactNode;
12
- } & Pick<RadixCollapsible.CollapsibleProps & react__default.RefAttributes<HTMLDivElement>, "defaultOpen"> & react__default.RefAttributes<HTMLButtonElement>>;
12
+ defaultCollapsed?: boolean | undefined;
13
+ collapsed?: boolean | undefined;
14
+ onCollapsedChange?: ((collapsed: boolean) => void) | undefined;
15
+ } & Pick<RadixCollapsible.CollapsibleProps & react__default.RefAttributes<HTMLDivElement>, "children" | "className"> & react__default.RefAttributes<HTMLButtonElement>>;
13
16
 
14
17
  declare const Card: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLElement> & {
15
18
  action?: react.ReactElement<any, string | react.JSXElementConstructor<any>> | undefined;
19
+ avatar?: react.ReactElement<any, string | react.JSXElementConstructor<any>> | undefined;
16
20
  as?: keyof react.ReactHTML | react.ComponentType<react.HTMLAttributes<HTMLElement> & {
17
21
  ref?: react.Ref<HTMLElement> | undefined;
18
22
  }> | undefined;
@@ -36,11 +40,12 @@ declare const Card: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLEle
36
40
  declare const CardList: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLUListElement> & react.RefAttributes<HTMLUListElement>> & {
37
41
  Card: react.ForwardRefExoticComponent<Pick<Omit<react.HTMLAttributes<HTMLElement> & {
38
42
  action?: react.ReactElement<any, string | react.JSXElementConstructor<any>> | undefined;
43
+ avatar?: react.ReactElement<any, string | react.JSXElementConstructor<any>> | undefined;
39
44
  as?: keyof react.ReactHTML | react.ComponentType<react.HTMLAttributes<HTMLElement> & {
40
45
  ref?: react.Ref<HTMLElement> | undefined;
41
46
  }> | undefined;
42
47
  rowGap?: csstype.GapProperty<string | number> | undefined;
43
- } & react.RefAttributes<HTMLElement>, "as">, "rowGap" | "action" | keyof react.HTMLAttributes<HTMLElement> | "key"> & react.RefAttributes<HTMLElement>> & {
48
+ } & react.RefAttributes<HTMLElement>, "as">, "avatar" | "rowGap" | "action" | keyof react.HTMLAttributes<HTMLElement> | "key"> & react.RefAttributes<HTMLElement>> & {
44
49
  Title: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLHeadingElement> & {
45
50
  level?: number | undefined;
46
51
  } & react.RefAttributes<HTMLHeadingElement>>;
@@ -60,11 +65,12 @@ declare const CardList: react.ForwardRefExoticComponent<react.HTMLAttributes<HTM
60
65
  declare const CardListBox: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLUListElement> & react.RefAttributes<HTMLUListElement>> & {
61
66
  Card: react.ForwardRefExoticComponent<Pick<Omit<react.HTMLAttributes<HTMLElement> & {
62
67
  action?: react.ReactElement<any, string | react.JSXElementConstructor<any>> | undefined;
68
+ avatar?: react.ReactElement<any, string | react.JSXElementConstructor<any>> | undefined;
63
69
  as?: keyof react.ReactHTML | react.ComponentType<react.HTMLAttributes<HTMLElement> & {
64
70
  ref?: react.Ref<HTMLElement> | undefined;
65
71
  }> | undefined;
66
72
  rowGap?: csstype.GapProperty<string | number> | undefined;
67
- } & react.RefAttributes<HTMLElement>, "as">, "rowGap" | "action" | keyof react.HTMLAttributes<HTMLElement> | "key"> & react.RefAttributes<HTMLElement>> & {
73
+ } & react.RefAttributes<HTMLElement>, "as">, "avatar" | "rowGap" | "action" | keyof react.HTMLAttributes<HTMLElement> | "key"> & react.RefAttributes<HTMLElement>> & {
68
74
  Title: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLHeadingElement> & {
69
75
  level?: number | undefined;
70
76
  } & react.RefAttributes<HTMLHeadingElement>>;
package/build/index.js CHANGED
@@ -42,20 +42,19 @@ var import_styled_components = __toESM(require("styled-components"));
42
42
  var import_react = __toESM(require("react"));
43
43
  var import_classnames = __toESM(require("classnames"));
44
44
  var Card = import_react.default.forwardRef(
45
- ({ className, rowGap = "0.5rem", children, as: Comp = "div", action, ...props }, ref) => import_react.default.createElement(
45
+ ({ className, avatar, rowGap = "0.5rem", children, as: Comp = "div", action, ...props }, ref) => import_react.default.createElement(
46
46
  Comp,
47
47
  {
48
48
  className: (0, import_classnames.default)(className, "is-relative", "is-flex", "scmm-card"),
49
49
  ref,
50
50
  ...props
51
51
  },
52
+ avatar ? avatar : null,
52
53
  /* @__PURE__ */ import_react.default.createElement("div", {
53
- className: "is-flex is-flex-direction-column is-justify-content-center is-flex-grow-1",
54
+ className: "is-flex is-flex-direction-column is-justify-content-center is-flex-grow-1 is-clipped",
54
55
  style: { gap: rowGap }
55
56
  }, children),
56
- action ? /* @__PURE__ */ import_react.default.createElement("span", {
57
- className: "ml-2"
58
- }, action) : null
57
+ action ? action : null
59
58
  )
60
59
  );
61
60
  var Card_default = Card;
@@ -156,33 +155,46 @@ var RadixCollapsible = __toESM(require("@radix-ui/react-collapsible"));
156
155
  var import_ui_buttons = require("@scm-manager/ui-buttons");
157
156
  var import_styled_components3 = __toESM(require("styled-components"));
158
157
  var import_ui_components2 = require("@scm-manager/ui-components");
158
+ var import_classnames4 = __toESM(require("classnames"));
159
159
  var StyledTrigger = (0, import_styled_components3.default)(RadixCollapsible.Trigger)`
160
160
  margin-right: 0.5rem;
161
161
  `;
162
162
  var StyledCollapsibleHeader = import_styled_components3.default.div`
163
163
  background-color: var(--scm-secondary-less-color);
164
164
  `;
165
- var Collapsible = import_react5.default.forwardRef(({ children, header, defaultOpen }, ref) => {
166
- const [open, setOpen] = (0, import_react5.useState)(defaultOpen);
167
- const titleId = (0, import_ui_components2.useGeneratedId)();
168
- return /* @__PURE__ */ import_react5.default.createElement(RadixCollapsible.Root, {
169
- className: "card",
170
- open,
171
- onOpenChange: setOpen,
172
- defaultOpen
173
- }, /* @__PURE__ */ import_react5.default.createElement(StyledCollapsibleHeader, {
174
- className: "card-header is-flex is-justify-content-space-between is-shadowless"
175
- }, /* @__PURE__ */ import_react5.default.createElement("span", {
176
- id: titleId,
177
- className: "card-header-title"
178
- }, header), /* @__PURE__ */ import_react5.default.createElement(StyledTrigger, {
179
- "aria-labelledby": titleId,
180
- className: "card-header-icon",
181
- ref
182
- }, /* @__PURE__ */ import_react5.default.createElement(import_ui_buttons.Icon, null, open ? "angle-up" : "angle-down"))), /* @__PURE__ */ import_react5.default.createElement(RadixCollapsible.Content, {
183
- className: "card-content p-2"
184
- }, children));
185
- });
165
+ var Collapsible = import_react5.default.forwardRef(
166
+ ({ children, header, className, defaultCollapsed, collapsed, onCollapsedChange }, ref) => {
167
+ const [isCollapsed, setCollapsed] = (0, import_react5.useState)(defaultCollapsed);
168
+ const titleId = (0, import_ui_components2.useGeneratedId)();
169
+ (0, import_react5.useEffect)(() => {
170
+ if (collapsed !== void 0) {
171
+ setCollapsed(collapsed);
172
+ }
173
+ }, [collapsed]);
174
+ return /* @__PURE__ */ import_react5.default.createElement(RadixCollapsible.Root, {
175
+ className: (0, import_classnames4.default)("card", className),
176
+ open: !isCollapsed,
177
+ onOpenChange: (o) => {
178
+ setCollapsed(!o);
179
+ if (onCollapsedChange) {
180
+ onCollapsedChange(!o);
181
+ }
182
+ },
183
+ defaultOpen: !defaultCollapsed
184
+ }, /* @__PURE__ */ import_react5.default.createElement(StyledCollapsibleHeader, {
185
+ className: "card-header is-flex is-justify-content-space-between is-shadowless"
186
+ }, /* @__PURE__ */ import_react5.default.createElement("span", {
187
+ id: titleId,
188
+ className: "card-header-title"
189
+ }, header), /* @__PURE__ */ import_react5.default.createElement(StyledTrigger, {
190
+ "aria-labelledby": titleId,
191
+ className: "card-header-icon",
192
+ ref
193
+ }, /* @__PURE__ */ import_react5.default.createElement(import_ui_buttons.Icon, null, isCollapsed ? "angle-left" : "angle-down"))), /* @__PURE__ */ import_react5.default.createElement(RadixCollapsible.Content, {
194
+ className: "card-content p-2"
195
+ }, children));
196
+ }
197
+ );
186
198
  var Collapsible_default = Collapsible;
187
199
 
188
200
  // src/index.ts
package/build/index.mjs CHANGED
@@ -7,20 +7,19 @@ import styled from "styled-components";
7
7
  import React from "react";
8
8
  import classNames from "classnames";
9
9
  var Card = React.forwardRef(
10
- ({ className, rowGap = "0.5rem", children, as: Comp = "div", action, ...props }, ref) => React.createElement(
10
+ ({ className, avatar, rowGap = "0.5rem", children, as: Comp = "div", action, ...props }, ref) => React.createElement(
11
11
  Comp,
12
12
  {
13
13
  className: classNames(className, "is-relative", "is-flex", "scmm-card"),
14
14
  ref,
15
15
  ...props
16
16
  },
17
+ avatar ? avatar : null,
17
18
  /* @__PURE__ */ React.createElement("div", {
18
- className: "is-flex is-flex-direction-column is-justify-content-center is-flex-grow-1",
19
+ className: "is-flex is-flex-direction-column is-justify-content-center is-flex-grow-1 is-clipped",
19
20
  style: { gap: rowGap }
20
21
  }, children),
21
- action ? /* @__PURE__ */ React.createElement("span", {
22
- className: "ml-2"
23
- }, action) : null
22
+ action ? action : null
24
23
  )
25
24
  );
26
25
  var Card_default = Card;
@@ -116,38 +115,51 @@ var CardDetails = React4.forwardRef(
116
115
  );
117
116
 
118
117
  // src/collapsible/Collapsible.tsx
119
- import React5, { useState } from "react";
118
+ import React5, { useEffect, useState } from "react";
120
119
  import * as RadixCollapsible from "@radix-ui/react-collapsible";
121
120
  import { Icon } from "@scm-manager/ui-buttons";
122
121
  import styled3 from "styled-components";
123
122
  import { useGeneratedId as useGeneratedId2 } from "@scm-manager/ui-components";
123
+ import classNames4 from "classnames";
124
124
  var StyledTrigger = styled3(RadixCollapsible.Trigger)`
125
125
  margin-right: 0.5rem;
126
126
  `;
127
127
  var StyledCollapsibleHeader = styled3.div`
128
128
  background-color: var(--scm-secondary-less-color);
129
129
  `;
130
- var Collapsible = React5.forwardRef(({ children, header, defaultOpen }, ref) => {
131
- const [open, setOpen] = useState(defaultOpen);
132
- const titleId = useGeneratedId2();
133
- return /* @__PURE__ */ React5.createElement(RadixCollapsible.Root, {
134
- className: "card",
135
- open,
136
- onOpenChange: setOpen,
137
- defaultOpen
138
- }, /* @__PURE__ */ React5.createElement(StyledCollapsibleHeader, {
139
- className: "card-header is-flex is-justify-content-space-between is-shadowless"
140
- }, /* @__PURE__ */ React5.createElement("span", {
141
- id: titleId,
142
- className: "card-header-title"
143
- }, header), /* @__PURE__ */ React5.createElement(StyledTrigger, {
144
- "aria-labelledby": titleId,
145
- className: "card-header-icon",
146
- ref
147
- }, /* @__PURE__ */ React5.createElement(Icon, null, open ? "angle-up" : "angle-down"))), /* @__PURE__ */ React5.createElement(RadixCollapsible.Content, {
148
- className: "card-content p-2"
149
- }, children));
150
- });
130
+ var Collapsible = React5.forwardRef(
131
+ ({ children, header, className, defaultCollapsed, collapsed, onCollapsedChange }, ref) => {
132
+ const [isCollapsed, setCollapsed] = useState(defaultCollapsed);
133
+ const titleId = useGeneratedId2();
134
+ useEffect(() => {
135
+ if (collapsed !== void 0) {
136
+ setCollapsed(collapsed);
137
+ }
138
+ }, [collapsed]);
139
+ return /* @__PURE__ */ React5.createElement(RadixCollapsible.Root, {
140
+ className: classNames4("card", className),
141
+ open: !isCollapsed,
142
+ onOpenChange: (o) => {
143
+ setCollapsed(!o);
144
+ if (onCollapsedChange) {
145
+ onCollapsedChange(!o);
146
+ }
147
+ },
148
+ defaultOpen: !defaultCollapsed
149
+ }, /* @__PURE__ */ React5.createElement(StyledCollapsibleHeader, {
150
+ className: "card-header is-flex is-justify-content-space-between is-shadowless"
151
+ }, /* @__PURE__ */ React5.createElement("span", {
152
+ id: titleId,
153
+ className: "card-header-title"
154
+ }, header), /* @__PURE__ */ React5.createElement(StyledTrigger, {
155
+ "aria-labelledby": titleId,
156
+ className: "card-header-icon",
157
+ ref
158
+ }, /* @__PURE__ */ React5.createElement(Icon, null, isCollapsed ? "angle-left" : "angle-down"))), /* @__PURE__ */ React5.createElement(RadixCollapsible.Content, {
159
+ className: "card-content p-2"
160
+ }, children));
161
+ }
162
+ );
151
163
  var Collapsible_default = Collapsible;
152
164
 
153
165
  // src/index.ts
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@scm-manager/ui-layout",
3
3
  "private": false,
4
- "version": "2.46.1",
4
+ "version": "2.46.2-20230801-113910",
5
5
  "main": "build/index.js",
6
6
  "types": "build/index.d.ts",
7
7
  "module": "build/index.mjs",
@@ -16,8 +16,8 @@
16
16
  "@scm-manager/eslint-config": "^2.16.0",
17
17
  "@scm-manager/prettier-config": "^2.10.1",
18
18
  "@scm-manager/tsconfig": "^2.13.0",
19
- "@scm-manager/ui-styles": "2.46.1",
20
- "@scm-manager/ui-overlays": "2.46.1",
19
+ "@scm-manager/ui-styles": "2.46.2-20230801-113910",
20
+ "@scm-manager/ui-overlays": "2.46.2-20230801-113910",
21
21
  "@storybook/addon-actions": "^6.5.10",
22
22
  "@storybook/addon-docs": "^6.5.14",
23
23
  "@storybook/addon-essentials": "^6.5.10",
@@ -37,7 +37,7 @@
37
37
  "react": "17",
38
38
  "react-dom": "17",
39
39
  "styled-components": "5",
40
- "@scm-manager/ui-components": "2.46.1"
40
+ "@scm-manager/ui-components": "2.46.2-20230801-113910"
41
41
  },
42
42
  "prettier": "@scm-manager/prettier-config",
43
43
  "eslintConfig": {
@@ -48,6 +48,6 @@
48
48
  },
49
49
  "dependencies": {
50
50
  "@radix-ui/react-collapsible": "^1.0.3",
51
- "@scm-manager/ui-buttons": "2.46.1"
51
+ "@scm-manager/ui-buttons": "2.46.2-20230801-113910"
52
52
  }
53
53
  }
package/src/card/Card.tsx CHANGED
@@ -28,6 +28,7 @@ import CSS from "csstype";
28
28
 
29
29
  type Props = HTMLAttributes<HTMLElement> & {
30
30
  action?: React.ReactElement;
31
+ avatar?: React.ReactElement;
31
32
  /**
32
33
  * @default "div"
33
34
  */
@@ -48,7 +49,7 @@ type Props = HTMLAttributes<HTMLElement> & {
48
49
  * @since 2.44.0
49
50
  */
50
51
  const Card = React.forwardRef<HTMLElement, Props>(
51
- ({ className, rowGap = "0.5rem", children, as: Comp = "div", action, ...props }, ref) =>
52
+ ({ className, avatar, rowGap = "0.5rem", children, as: Comp = "div", action, ...props }, ref) =>
52
53
  React.createElement(
53
54
  Comp,
54
55
  {
@@ -56,13 +57,14 @@ const Card = React.forwardRef<HTMLElement, Props>(
56
57
  ref,
57
58
  ...props,
58
59
  },
60
+ avatar ? avatar : null,
59
61
  <div
60
- className="is-flex is-flex-direction-column is-justify-content-center is-flex-grow-1"
62
+ className="is-flex is-flex-direction-column is-justify-content-center is-flex-grow-1 is-clipped"
61
63
  style={{ gap: rowGap }}
62
64
  >
63
65
  {children}
64
66
  </div>,
65
- action ? <span className="ml-2">{action}</span> : null
67
+ action ? action : null
66
68
  )
67
69
  );
68
70
 
package/src/collapsible/Collapsible.tsx CHANGED
@@ -22,11 +22,12 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- import React, { ComponentProps, ReactNode, useState } from "react";
25
+ import React, { ComponentProps, ReactNode, useEffect, useState } from "react";
26
26
  import * as RadixCollapsible from "@radix-ui/react-collapsible";
27
27
  import { Icon } from "@scm-manager/ui-buttons";
28
28
  import styled from "styled-components";
29
29
  import { useGeneratedId } from "@scm-manager/ui-components";
30
+ import classNames from "classnames";
30
31
 
31
32
  const StyledTrigger = styled(RadixCollapsible.Trigger)`
32
33
  margin-right: 0.5rem;
@@ -38,28 +39,49 @@ const StyledCollapsibleHeader = styled.div`
38
39
 
39
40
  type Props = {
40
41
  header: ReactNode;
41
- } & Pick<ComponentProps<typeof RadixCollapsible.Root>, "defaultOpen">;
42
+ defaultCollapsed?: boolean;
43
+ collapsed?: boolean;
44
+ onCollapsedChange?: (collapsed: boolean) => void;
45
+ } & Pick<ComponentProps<typeof RadixCollapsible.Root>, "className" | "children">;
42
46
 
43
47
  /**
44
48
  * @beta
45
49
  * @since 2.46.0
46
50
  */
47
- const Collapsible = React.forwardRef<HTMLButtonElement, Props>(({ children, header, defaultOpen }, ref) => {
48
- const [open, setOpen] = useState(defaultOpen);
49
- const titleId = useGeneratedId();
50
- return (
51
- <RadixCollapsible.Root className="card" open={open} onOpenChange={setOpen} defaultOpen={defaultOpen}>
52
- <StyledCollapsibleHeader className="card-header is-flex is-justify-content-space-between is-shadowless">
53
- <span id={titleId} className="card-header-title">
54
- {header}
55
- </span>
56
- <StyledTrigger aria-labelledby={titleId} className="card-header-icon" ref={ref}>
57
- <Icon>{open ? "angle-up" : "angle-down"}</Icon>
58
- </StyledTrigger>
59
- </StyledCollapsibleHeader>
60
- <RadixCollapsible.Content className="card-content p-2">{children}</RadixCollapsible.Content>
61
- </RadixCollapsible.Root>
62
- );
63
- });
51
+ const Collapsible = React.forwardRef<HTMLButtonElement, Props>(
52
+ ({ children, header, className, defaultCollapsed, collapsed, onCollapsedChange }, ref) => {
53
+ const [isCollapsed, setCollapsed] = useState(defaultCollapsed);
54
+ const titleId = useGeneratedId();
55
+ useEffect(() => {
56
+ if (collapsed !== undefined) {
57
+ setCollapsed(collapsed);
58
+ }
59
+ }, [collapsed]);
60
+
61
+ return (
62
+ <RadixCollapsible.Root
63
+ className={classNames("card", className)}
64
+ open={!isCollapsed}
65
+ onOpenChange={(o) => {
66
+ setCollapsed(!o);
67
+ if (onCollapsedChange) {
68
+ onCollapsedChange(!o);
69
+ }
70
+ }}
71
+ defaultOpen={!defaultCollapsed}
72
+ >
73
+ <StyledCollapsibleHeader className="card-header is-flex is-justify-content-space-between is-shadowless">
74
+ <span id={titleId} className="card-header-title">
75
+ {header}
76
+ </span>
77
+ <StyledTrigger aria-labelledby={titleId} className="card-header-icon" ref={ref}>
78
+ <Icon>{isCollapsed ? "angle-left" : "angle-down"}</Icon>
79
+ </StyledTrigger>
80
+ </StyledCollapsibleHeader>
81
+ <RadixCollapsible.Content className="card-content p-2">{children}</RadixCollapsible.Content>
82
+ </RadixCollapsible.Root>
83
+ );
84
+ }
85
+ );
64
86
 
65
87
  export default Collapsible;