@scm-manager/ui-layout 2.46.1-20230801-095951 → 2.46.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.
Files changed (7) hide show
  1. package/.turbo/turbo-build.log +7 -7
  2. package/build/index.d.ts +3 -9
  3. package/build/index.js +26 -38
  4. package/build/index.mjs +27 -39
  5. package/package.json +5 -5
  6. package/src/card/Card.tsx +3 -5
  7. package/src/collapsible/Collapsible.tsx +19 -41
package/.turbo/turbo-build.log CHANGED
@@ -1,4 +1,4 @@
1
- @scm-manager/ui-layout:build: cache hit, replaying output 84c0af029cea48dc
1
+ @scm-manager/ui-layout:build: cache hit, replaying output dd9a5d0d38cebab9
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: CJS build/index.js 8.15 KB
10
- @scm-manager/ui-layout:build: CJS ⚡️ Build success in 318ms
11
- @scm-manager/ui-layout:build: ESM build/index.mjs 5.82 KB
12
- @scm-manager/ui-layout:build: ESM ⚡️ Build success in 343ms
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
13
13
  @scm-manager/ui-layout:build: DTS Build start
14
- @scm-manager/ui-layout:build: DTS ⚡️ Build success in 33524ms
15
- @scm-manager/ui-layout:build: DTS build/index.d.ts 5.47 KB
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
package/build/index.d.ts CHANGED
@@ -9,14 +9,10 @@ import * as RadixCollapsible from '@radix-ui/react-collapsible';
9
9
  */
10
10
  declare const Collapsible: react__default.ForwardRefExoticComponent<{
11
11
  header: ReactNode;
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>>;
12
+ } & Pick<RadixCollapsible.CollapsibleProps & react__default.RefAttributes<HTMLDivElement>, "defaultOpen"> & react__default.RefAttributes<HTMLButtonElement>>;
16
13
 
17
14
  declare const Card: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLElement> & {
18
15
  action?: react.ReactElement<any, string | react.JSXElementConstructor<any>> | undefined;
19
- avatar?: react.ReactElement<any, string | react.JSXElementConstructor<any>> | undefined;
20
16
  as?: keyof react.ReactHTML | react.ComponentType<react.HTMLAttributes<HTMLElement> & {
21
17
  ref?: react.Ref<HTMLElement> | undefined;
22
18
  }> | undefined;
@@ -40,12 +36,11 @@ declare const Card: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLEle
40
36
  declare const CardList: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLUListElement> & react.RefAttributes<HTMLUListElement>> & {
41
37
  Card: react.ForwardRefExoticComponent<Pick<Omit<react.HTMLAttributes<HTMLElement> & {
42
38
  action?: react.ReactElement<any, string | react.JSXElementConstructor<any>> | undefined;
43
- avatar?: react.ReactElement<any, string | react.JSXElementConstructor<any>> | undefined;
44
39
  as?: keyof react.ReactHTML | react.ComponentType<react.HTMLAttributes<HTMLElement> & {
45
40
  ref?: react.Ref<HTMLElement> | undefined;
46
41
  }> | undefined;
47
42
  rowGap?: csstype.GapProperty<string | number> | undefined;
48
- } & react.RefAttributes<HTMLElement>, "as">, "avatar" | "rowGap" | "action" | keyof react.HTMLAttributes<HTMLElement> | "key"> & react.RefAttributes<HTMLElement>> & {
43
+ } & react.RefAttributes<HTMLElement>, "as">, "rowGap" | "action" | keyof react.HTMLAttributes<HTMLElement> | "key"> & react.RefAttributes<HTMLElement>> & {
49
44
  Title: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLHeadingElement> & {
50
45
  level?: number | undefined;
51
46
  } & react.RefAttributes<HTMLHeadingElement>>;
@@ -65,12 +60,11 @@ declare const CardList: react.ForwardRefExoticComponent<react.HTMLAttributes<HTM
65
60
  declare const CardListBox: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLUListElement> & react.RefAttributes<HTMLUListElement>> & {
66
61
  Card: react.ForwardRefExoticComponent<Pick<Omit<react.HTMLAttributes<HTMLElement> & {
67
62
  action?: react.ReactElement<any, string | react.JSXElementConstructor<any>> | undefined;
68
- avatar?: react.ReactElement<any, string | react.JSXElementConstructor<any>> | undefined;
69
63
  as?: keyof react.ReactHTML | react.ComponentType<react.HTMLAttributes<HTMLElement> & {
70
64
  ref?: react.Ref<HTMLElement> | undefined;
71
65
  }> | undefined;
72
66
  rowGap?: csstype.GapProperty<string | number> | undefined;
73
- } & react.RefAttributes<HTMLElement>, "as">, "avatar" | "rowGap" | "action" | keyof react.HTMLAttributes<HTMLElement> | "key"> & react.RefAttributes<HTMLElement>> & {
67
+ } & react.RefAttributes<HTMLElement>, "as">, "rowGap" | "action" | keyof react.HTMLAttributes<HTMLElement> | "key"> & react.RefAttributes<HTMLElement>> & {
74
68
  Title: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLHeadingElement> & {
75
69
  level?: number | undefined;
76
70
  } & react.RefAttributes<HTMLHeadingElement>>;
package/build/index.js CHANGED
@@ -42,19 +42,20 @@ 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, avatar, rowGap = "0.5rem", children, as: Comp = "div", action, ...props }, ref) => import_react.default.createElement(
45
+ ({ className, 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,
53
52
  /* @__PURE__ */ import_react.default.createElement("div", {
54
- className: "is-flex is-flex-direction-column is-justify-content-center is-flex-grow-1 is-clipped",
53
+ className: "is-flex is-flex-direction-column is-justify-content-center is-flex-grow-1",
55
54
  style: { gap: rowGap }
56
55
  }, children),
57
- action ? action : null
56
+ action ? /* @__PURE__ */ import_react.default.createElement("span", {
57
+ className: "ml-2"
58
+ }, action) : null
58
59
  )
59
60
  );
60
61
  var Card_default = Card;
@@ -155,46 +156,33 @@ var RadixCollapsible = __toESM(require("@radix-ui/react-collapsible"));
155
156
  var import_ui_buttons = require("@scm-manager/ui-buttons");
156
157
  var import_styled_components3 = __toESM(require("styled-components"));
157
158
  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(
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
- );
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
+ });
198
186
  var Collapsible_default = Collapsible;
199
187
 
200
188
  // src/index.ts
package/build/index.mjs CHANGED
@@ -7,19 +7,20 @@ 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, avatar, rowGap = "0.5rem", children, as: Comp = "div", action, ...props }, ref) => React.createElement(
10
+ ({ className, 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,
18
17
  /* @__PURE__ */ React.createElement("div", {
19
- className: "is-flex is-flex-direction-column is-justify-content-center is-flex-grow-1 is-clipped",
18
+ className: "is-flex is-flex-direction-column is-justify-content-center is-flex-grow-1",
20
19
  style: { gap: rowGap }
21
20
  }, children),
22
- action ? action : null
21
+ action ? /* @__PURE__ */ React.createElement("span", {
22
+ className: "ml-2"
23
+ }, action) : null
23
24
  )
24
25
  );
25
26
  var Card_default = Card;
@@ -115,51 +116,38 @@ var CardDetails = React4.forwardRef(
115
116
  );
116
117
 
117
118
  // src/collapsible/Collapsible.tsx
118
- import React5, { useEffect, useState } from "react";
119
+ import React5, { useState } from "react";
119
120
  import * as RadixCollapsible from "@radix-ui/react-collapsible";
120
121
  import { Icon } from "@scm-manager/ui-buttons";
121
122
  import styled3 from "styled-components";
122
123
  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(
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
- );
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
+ });
163
151
  var Collapsible_default = Collapsible;
164
152
 
165
153
  // 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-20230801-095951",
4
+ "version": "2.46.1",
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-20230801-095951",
20
- "@scm-manager/ui-overlays": "2.46.1-20230801-095951",
19
+ "@scm-manager/ui-styles": "2.46.1",
20
+ "@scm-manager/ui-overlays": "2.46.1",
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-20230801-095951"
40
+ "@scm-manager/ui-components": "2.46.1"
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-20230801-095951"
51
+ "@scm-manager/ui-buttons": "2.46.1"
52
52
  }
53
53
  }
package/src/card/Card.tsx CHANGED
@@ -28,7 +28,6 @@ import CSS from "csstype";
28
28
 
29
29
  type Props = HTMLAttributes<HTMLElement> & {
30
30
  action?: React.ReactElement;
31
- avatar?: React.ReactElement;
32
31
  /**
33
32
  * @default "div"
34
33
  */
@@ -49,7 +48,7 @@ type Props = HTMLAttributes<HTMLElement> & {
49
48
  * @since 2.44.0
50
49
  */
51
50
  const Card = React.forwardRef<HTMLElement, Props>(
52
- ({ className, avatar, rowGap = "0.5rem", children, as: Comp = "div", action, ...props }, ref) =>
51
+ ({ className, rowGap = "0.5rem", children, as: Comp = "div", action, ...props }, ref) =>
53
52
  React.createElement(
54
53
  Comp,
55
54
  {
@@ -57,14 +56,13 @@ const Card = React.forwardRef<HTMLElement, Props>(
57
56
  ref,
58
57
  ...props,
59
58
  },
60
- avatar ? avatar : null,
61
59
  <div
62
- className="is-flex is-flex-direction-column is-justify-content-center is-flex-grow-1 is-clipped"
60
+ className="is-flex is-flex-direction-column is-justify-content-center is-flex-grow-1"
63
61
  style={{ gap: rowGap }}
64
62
  >
65
63
  {children}
66
64
  </div>,
67
- action ? action : null
65
+ action ? <span className="ml-2">{action}</span> : null
68
66
  )
69
67
  );
70
68
 
package/src/collapsible/Collapsible.tsx CHANGED
@@ -22,12 +22,11 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- import React, { ComponentProps, ReactNode, useEffect, useState } from "react";
25
+ import React, { ComponentProps, ReactNode, 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";
31
30
 
32
31
  const StyledTrigger = styled(RadixCollapsible.Trigger)`
33
32
  margin-right: 0.5rem;
@@ -39,49 +38,28 @@ const StyledCollapsibleHeader = styled.div`
39
38
 
40
39
  type Props = {
41
40
  header: ReactNode;
42
- defaultCollapsed?: boolean;
43
- collapsed?: boolean;
44
- onCollapsedChange?: (collapsed: boolean) => void;
45
- } & Pick<ComponentProps<typeof RadixCollapsible.Root>, "className" | "children">;
41
+ } & Pick<ComponentProps<typeof RadixCollapsible.Root>, "defaultOpen">;
46
42
 
47
43
  /**
48
44
  * @beta
49
45
  * @since 2.46.0
50
46
  */
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
- );
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
+ });
86
64
 
87
65
  export default Collapsible;