@dbcdk/react-components 0.0.132 → 0.0.134

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 (5) hide show
  1. package/dist/components/environment-banner/EnvironmentBanner.module.css +5 -5
  2. package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.cjs +12 -7
  3. package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.js +12 -7
  4. package/dist/styles/themes/dbc/colors.css +5 -1
  5. package/package.json +1 -1
package/dist/components/environment-banner/EnvironmentBanner.module.css CHANGED
@@ -12,7 +12,7 @@
12
12
  color: var(--env-banner-fg);
13
13
  letter-spacing: var(--letter-spacing-wide);
14
14
  font-size: var(--font-size-md);
15
- font-weight: var(--font-weight-semibold);
15
+ font-weight: var(--font-weight-medium);
16
16
  text-transform: uppercase;
17
17
  line-height: var(--line-height-normal);
18
18
  user-select: none;
@@ -20,22 +20,22 @@
20
20
 
21
21
  .banner[data-severity='success'] {
22
22
  --env-banner-bg: var(--color-status-success);
23
- --env-banner-fg: var(--color-status-success-bg);
23
+ --env-banner-fg: var(--color-fg-on-status-success);
24
24
  }
25
25
 
26
26
  .banner[data-severity='warning'] {
27
27
  --env-banner-bg: var(--color-status-warning);
28
- --env-banner-fg: var(--color-status-warning-bg);
28
+ --env-banner-fg: var(--color-fg-on-status-warning);
29
29
  }
30
30
 
31
31
  .banner[data-severity='error'] {
32
32
  --env-banner-bg: var(--color-status-error);
33
- --env-banner-fg: var(--color-status-error-bg);
33
+ --env-banner-fg: var(--color-fg-on-status-error);
34
34
  }
35
35
 
36
36
  .banner[data-severity='info'] {
37
37
  --env-banner-bg: var(--color-status-info);
38
- --env-banner-fg: var(--color-status-info-bg);
38
+ --env-banner-fg: var(--color-fg-on-status-info);
39
39
  }
40
40
 
41
41
  .banner[data-severity='brand'] {
package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.cjs CHANGED
@@ -36,19 +36,24 @@ function ExpandableSidebarItem({
36
36
  isExpanded
37
37
  } = SidebarProvider.useSidebar();
38
38
  const [closing, setClosing] = react.useState(false);
39
- const ready = true;
40
39
  const expanded = react.useMemo(() => isExpanded(href), [href, isExpanded]);
41
40
  react.useEffect(() => {
42
41
  if (defaultExpanded === null) return;
43
42
  if (defaultExpanded) expandItem(href);
44
43
  else collapseItem(href);
45
44
  }, [defaultExpanded, expandItem, collapseItem, href]);
45
+ const commitCollapse = react.useCallback(() => {
46
+ collapseItem(href);
47
+ setClosing(false);
48
+ }, [collapseItem, href]);
46
49
  const handleAnimationEnd = react.useCallback(() => {
47
- if (closing) {
48
- collapseItem(href);
49
- setClosing(false);
50
- }
51
- }, [closing, ready, collapseItem, href]);
50
+ if (closing) commitCollapse();
51
+ }, [closing, commitCollapse]);
52
+ react.useEffect(() => {
53
+ if (!closing) return;
54
+ const timer = setTimeout(commitCollapse, 250);
55
+ return () => clearTimeout(timer);
56
+ }, [closing, commitCollapse]);
52
57
  const toggleAccordion = react.useCallback(
53
58
  (e, onlyExpand = false) => {
54
59
  e == null ? void 0 : e.preventDefault();
@@ -123,7 +128,7 @@ function ExpandableSidebarItem({
123
128
  "div",
124
129
  {
125
130
  onAnimationEnd: handleAnimationEnd,
126
- className: `${styles__default.default.childrenContainer} ${closing ? "animate--collapse" : ""} ${expanded ? "animate--expand" : "visually-hidden"}`,
131
+ className: `${styles__default.default.childrenContainer} ${closing ? "animate--collapse" : expanded ? "animate--expand" : "visually-hidden"}`,
127
132
  children: items.map((item, idx) => renderNavItem(item, `${href}-${idx}`))
128
133
  }
129
134
  )
package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.js CHANGED
@@ -30,19 +30,24 @@ function ExpandableSidebarItem({
30
30
  isExpanded
31
31
  } = useSidebar();
32
32
  const [closing, setClosing] = useState(false);
33
- const ready = true;
34
33
  const expanded = useMemo(() => isExpanded(href), [href, isExpanded]);
35
34
  useEffect(() => {
36
35
  if (defaultExpanded === null) return;
37
36
  if (defaultExpanded) expandItem(href);
38
37
  else collapseItem(href);
39
38
  }, [defaultExpanded, expandItem, collapseItem, href]);
39
+ const commitCollapse = useCallback(() => {
40
+ collapseItem(href);
41
+ setClosing(false);
42
+ }, [collapseItem, href]);
40
43
  const handleAnimationEnd = useCallback(() => {
41
- if (closing) {
42
- collapseItem(href);
43
- setClosing(false);
44
- }
45
- }, [closing, ready, collapseItem, href]);
44
+ if (closing) commitCollapse();
45
+ }, [closing, commitCollapse]);
46
+ useEffect(() => {
47
+ if (!closing) return;
48
+ const timer = setTimeout(commitCollapse, 250);
49
+ return () => clearTimeout(timer);
50
+ }, [closing, commitCollapse]);
46
51
  const toggleAccordion = useCallback(
47
52
  (e, onlyExpand = false) => {
48
53
  e == null ? void 0 : e.preventDefault();
@@ -117,7 +122,7 @@ function ExpandableSidebarItem({
117
122
  "div",
118
123
  {
119
124
  onAnimationEnd: handleAnimationEnd,
120
- className: `${styles.childrenContainer} ${closing ? "animate--collapse" : ""} ${expanded ? "animate--expand" : "visually-hidden"}`,
125
+ className: `${styles.childrenContainer} ${closing ? "animate--collapse" : expanded ? "animate--expand" : "visually-hidden"}`,
121
126
  children: items.map((item, idx) => renderNavItem(item, `${href}-${idx}`))
122
127
  }
123
128
  )
package/dist/styles/themes/dbc/colors.css CHANGED
@@ -48,7 +48,7 @@ html {
48
48
  --dbc-gray-600: light-dark(#4b5563, #6b7280);
49
49
 
50
50
  /* Status colors */
51
- --dbc-green-500: light-dark(#10b981, #22c55e);
51
+ --dbc-green-500: light-dark(#0da874, #22c55e);
52
52
  --dbc-green-100: light-dark(#e6f9f3, #052e1f);
53
53
  --dbc-green-700: light-dark(#065f46, #86efac);
54
54
  --dbc-green-300: light-dark(#34d399, #4ade80);
@@ -125,21 +125,25 @@ html {
125
125
 
126
126
  /* Status */
127
127
  --color-status-success: var(--dbc-green-500);
128
+ --color-fg-on-status-success: light-dark(#ffffff, #f9fafb);
128
129
  --color-status-success-bg: var(--dbc-green-100);
129
130
  --color-status-success-border: color-mix(in srgb, var(--dbc-green-500) 24%, transparent);
130
131
  --color-status-success-fg: var(--dbc-green-700);
131
132
 
132
133
  --color-status-warning: var(--dbc-amber-700);
134
+ --color-fg-on-status-warning: light-dark(#ffffff, #f9fafb);
133
135
  --color-status-warning-bg: var(--dbc-amber-100);
134
136
  --color-status-warning-border: color-mix(in srgb, var(--dbc-amber-700) 24%, transparent);
135
137
  --color-status-warning-fg: var(--dbc-amber-800);
136
138
 
137
139
  --color-status-error: var(--dbc-red-600);
140
+ --color-fg-on-status-error: light-dark(#ffffff, #f9fafb);
138
141
  --color-status-error-bg: var(--dbc-red-100);
139
142
  --color-status-error-border: color-mix(in srgb, var(--dbc-red-600) 24%, transparent);
140
143
  --color-status-error-fg: var(--dbc-red-800);
141
144
 
142
145
  --color-status-info: var(--dbc-info-500);
146
+ --color-fg-on-status-info: light-dark(#ffffff, #f9fafb);
143
147
  --color-status-info-bg: var(--dbc-info-100);
144
148
  --color-status-info-border: color-mix(in srgb, var(--dbc-info-500) 24%, transparent);
145
149
  --color-status-info-fg: var(--dbc-info-700);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dbcdk/react-components",
3
- "version": "0.0.132",
3
+ "version": "0.0.134",
4
4
  "description": "Reusable React components for DBC projects",
5
5
  "license": "ISC",
6
6
  "author": "",