@dmsi/wedgekit-react 0.0.291 → 0.0.292

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/dist/components/AccessChangerTabItem.cjs +1 -1
  2. package/dist/components/AccessChangerTabItem.js +1 -1
  3. package/dist/components/ContentTabs.cjs +14 -6
  4. package/dist/components/ContentTabs.js +14 -6
  5. package/package.json +1 -1
  6. package/src/components/AccessChangerTabItem.tsx +61 -46
  7. package/src/components/ContentTabs.tsx +17 -8
package/dist/components/AccessChangerTabItem.cjs CHANGED
@@ -314,7 +314,7 @@ function AccessChangerTabItem(props) {
314
314
  selected ? "text-text-action-primary-normal" : "text-text-primary-normal hover:text-text-action-primary-normal"
315
315
  ),
316
316
  onClick: (e) => {
317
- if (selected || loading || disabled) {
317
+ if (loading || disabled) {
318
318
  return;
319
319
  }
320
320
  onClick == null ? void 0 : onClick(e);
package/dist/components/AccessChangerTabItem.js CHANGED
@@ -47,7 +47,7 @@ function AccessChangerTabItem(props) {
47
47
  selected ? "text-text-action-primary-normal" : "text-text-primary-normal hover:text-text-action-primary-normal"
48
48
  ),
49
49
  onClick: (e) => {
50
- if (selected || loading || disabled) {
50
+ if (loading || disabled) {
51
51
  return;
52
52
  }
53
53
  onClick == null ? void 0 : onClick(e);
package/dist/components/ContentTabs.cjs CHANGED
@@ -422,16 +422,18 @@ ContentTab.displayName = "ContentTab";
422
422
  // src/components/ContentTabs.tsx
423
423
  var import_jsx_runtime3 = require("react/jsx-runtime");
424
424
  var afterClasses = "after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-border-primary-normal z-0";
425
- var ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id, testid, selectedTab }) => {
425
+ var ContentTabs = ({
426
+ tabs,
427
+ onTabChange,
428
+ fullWidthTabs,
429
+ id,
430
+ testid,
431
+ selectedTab
432
+ }) => {
426
433
  var _a, _b;
427
434
  const [selectedTabId, setSelectedTabId] = (0, import_react2.useState)(((_a = tabs[0]) == null ? void 0 : _a.id) || "");
428
435
  const [focusedTabIndex, setFocusedTabIndex] = (0, import_react2.useState)(0);
429
436
  const tabRefs = (0, import_react2.useRef)([]);
430
- (0, import_react2.useEffect)(() => {
431
- if (selectedTab) {
432
- handleTabClick(selectedTab.id, selectedTab.index);
433
- }
434
- }, [selectedTab]);
435
437
  const handleTabClick = (0, import_react2.useCallback)(
436
438
  (id2, index) => {
437
439
  setSelectedTabId(id2);
@@ -440,6 +442,11 @@ var ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id, testid, selectedTab }
440
442
  },
441
443
  [onTabChange]
442
444
  );
445
+ (0, import_react2.useEffect)(() => {
446
+ if (selectedTab) {
447
+ handleTabClick(selectedTab.id, selectedTab.index);
448
+ }
449
+ }, [selectedTab, handleTabClick]);
443
450
  const handleKeyDown = (e) => {
444
451
  var _a2;
445
452
  let newIndex = focusedTabIndex;
@@ -474,6 +481,7 @@ var ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id, testid, selectedTab }
474
481
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
475
482
  ContentTab,
476
483
  {
484
+ disabled: tab.disabled,
477
485
  fullWidth: fullWidthTabs,
478
486
  id: id ? `${id}-tab-${tab.id}` : void 0,
479
487
  testid: testid ? `${testid}-tab-${tab.id}` : void 0,
package/dist/components/ContentTabs.js CHANGED
@@ -11,16 +11,18 @@ import clsx from "clsx";
11
11
  import { useState, useRef, useCallback, useEffect } from "react";
12
12
  import { jsx, jsxs } from "react/jsx-runtime";
13
13
  var afterClasses = "after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-border-primary-normal z-0";
14
- var ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id, testid, selectedTab }) => {
14
+ var ContentTabs = ({
15
+ tabs,
16
+ onTabChange,
17
+ fullWidthTabs,
18
+ id,
19
+ testid,
20
+ selectedTab
21
+ }) => {
15
22
  var _a, _b;
16
23
  const [selectedTabId, setSelectedTabId] = useState(((_a = tabs[0]) == null ? void 0 : _a.id) || "");
17
24
  const [focusedTabIndex, setFocusedTabIndex] = useState(0);
18
25
  const tabRefs = useRef([]);
19
- useEffect(() => {
20
- if (selectedTab) {
21
- handleTabClick(selectedTab.id, selectedTab.index);
22
- }
23
- }, [selectedTab]);
24
26
  const handleTabClick = useCallback(
25
27
  (id2, index) => {
26
28
  setSelectedTabId(id2);
@@ -29,6 +31,11 @@ var ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id, testid, selectedTab }
29
31
  },
30
32
  [onTabChange]
31
33
  );
34
+ useEffect(() => {
35
+ if (selectedTab) {
36
+ handleTabClick(selectedTab.id, selectedTab.index);
37
+ }
38
+ }, [selectedTab, handleTabClick]);
32
39
  const handleKeyDown = (e) => {
33
40
  var _a2;
34
41
  let newIndex = focusedTabIndex;
@@ -63,6 +70,7 @@ var ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id, testid, selectedTab }
63
70
  return /* @__PURE__ */ jsx(
64
71
  ContentTab,
65
72
  {
73
+ disabled: tab.disabled,
66
74
  fullWidth: fullWidthTabs,
67
75
  id: id ? `${id}-tab-${tab.id}` : void 0,
68
76
  testid: testid ? `${testid}-tab-${tab.id}` : void 0,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@dmsi/wedgekit-react",
3
3
  "private": false,
4
- "version": "0.0.291",
4
+ "version": "0.0.292",
5
5
  "type": "module",
6
6
  "scripts": {
7
7
  "build": "tsup",
package/src/components/AccessChangerTabItem.tsx CHANGED
@@ -3,54 +3,69 @@ import { ComponentProps } from "react";
3
3
  import { Subheader } from "./Subheader";
4
4
  import { Icon } from "./Icon";
5
5
 
6
- export function AccessChangerTabItem(props: ComponentProps<"div"> & { selected?: boolean, loading?: boolean, disabled?: boolean, additionalText?: string, borderTop?: boolean, borderBottom?: boolean }) {
7
- const {
8
- additionalText,
9
- borderTop,
10
- borderBottom,
11
- selected,
12
- children,
13
- loading,
14
- disabled,
15
- onClick,
16
- ...rest
17
- } = props;
6
+ export function AccessChangerTabItem(
7
+ props: ComponentProps<"div"> & {
8
+ selected?: boolean;
9
+ loading?: boolean;
10
+ disabled?: boolean;
11
+ additionalText?: string;
12
+ borderTop?: boolean;
13
+ borderBottom?: boolean;
14
+ },
15
+ ) {
16
+ const {
17
+ additionalText,
18
+ borderTop,
19
+ borderBottom,
20
+ selected,
21
+ children,
22
+ loading,
23
+ disabled,
24
+ onClick,
25
+ ...rest
26
+ } = props;
18
27
 
19
- return (
20
- <div
21
- className={clsx(
22
- "flex items-center justify-between",
23
- "py-[15px] px-4 gap-4",
24
- "bg-background-grouped-primary-normal cursor-pointer",
25
- borderTop && 'border-t',
26
- borderBottom && 'border-b',
27
- borderTop || borderBottom ? "border-border-primary-normal" : "border-transparent",
28
- selected ? "text-text-action-primary-normal" : "text-text-primary-normal hover:text-text-action-primary-normal",
29
- )}
30
- onClick={(e) => {
31
- if (selected || loading || disabled) {
32
- return;
33
- }
28
+ return (
29
+ <div
30
+ className={clsx(
31
+ "flex items-center justify-between",
32
+ "py-[15px] px-4 gap-4",
33
+ "bg-background-grouped-primary-normal cursor-pointer",
34
+ borderTop && "border-t",
35
+ borderBottom && "border-b",
36
+ borderTop || borderBottom
37
+ ? "border-border-primary-normal"
38
+ : "border-transparent",
39
+ selected
40
+ ? "text-text-action-primary-normal"
41
+ : "text-text-primary-normal hover:text-text-action-primary-normal",
42
+ )}
43
+ onClick={(e) => {
44
+ if (loading || disabled) {
45
+ return;
46
+ }
34
47
 
35
- onClick?.(e);
36
- }}
37
- {...rest}
38
- >
39
- <div className="flex flex-col gap-0.5">
40
- <Subheader>{children}</Subheader>
41
- {additionalText && <p className="text-text-primary-normal text-[13px] leading-[1.38462] font-normal">{additionalText}</p>}
42
- </div>
48
+ onClick?.(e);
49
+ }}
50
+ {...rest}
51
+ >
52
+ <div className="flex flex-col gap-0.5">
53
+ <Subheader>{children}</Subheader>
54
+ {additionalText && (
55
+ <p className="text-text-primary-normal text-[13px] leading-[1.38462] font-normal">
56
+ {additionalText}
57
+ </p>
58
+ )}
59
+ </div>
43
60
 
44
- {loading && !selected && (
45
- <Icon name="cached" size={16} />
46
- )}
61
+ {loading && !selected && <Icon name="cached" size={16} />}
47
62
 
48
- {selected && (
49
- <div className="flex items-center gap-1">
50
- <div className="rounded-full size-2 bg-text-action-primary-normal"></div>
51
- <Subheader>Active</Subheader>
52
- </div>
53
- )}
63
+ {selected && (
64
+ <div className="flex items-center gap-1">
65
+ <div className="rounded-full size-2 bg-text-action-primary-normal"></div>
66
+ <Subheader>Active</Subheader>
54
67
  </div>
55
- )
56
- }
68
+ )}
69
+ </div>
70
+ );
71
+ }
package/src/components/ContentTabs.tsx CHANGED
@@ -7,11 +7,12 @@ type Tab = {
7
7
  id: string;
8
8
  label: string;
9
9
  content?: ReactNode;
10
+ disabled?: boolean;
10
11
  };
11
12
 
12
13
  export type SelectedTab = Omit<Tab, "content" | "label"> & {
13
14
  index: number;
14
- }
15
+ };
15
16
 
16
17
  export type ContentTabsProps = {
17
18
  tabs: Tab[];
@@ -25,17 +26,18 @@ export type ContentTabsProps = {
25
26
  const afterClasses =
26
27
  "after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-border-primary-normal z-0";
27
28
 
28
- export const ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id, testid, selectedTab }: ContentTabsProps) => {
29
+ export const ContentTabs = ({
30
+ tabs,
31
+ onTabChange,
32
+ fullWidthTabs,
33
+ id,
34
+ testid,
35
+ selectedTab,
36
+ }: ContentTabsProps) => {
29
37
  const [selectedTabId, setSelectedTabId] = useState<string>(tabs[0]?.id || "");
30
38
  const [focusedTabIndex, setFocusedTabIndex] = useState<number>(0);
31
39
  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
32
40
 
33
- useEffect(() => {
34
- if (selectedTab) {
35
- handleTabClick(selectedTab.id, selectedTab.index)
36
- }
37
- }, [selectedTab])
38
-
39
41
  const handleTabClick = useCallback(
40
42
  (id: string, index: number) => {
41
43
  setSelectedTabId(id);
@@ -45,6 +47,12 @@ export const ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id, testid, sele
45
47
  [onTabChange],
46
48
  );
47
49
 
50
+ useEffect(() => {
51
+ if (selectedTab) {
52
+ handleTabClick(selectedTab.id, selectedTab.index);
53
+ }
54
+ }, [selectedTab, handleTabClick]);
55
+
48
56
  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
49
57
  let newIndex = focusedTabIndex;
50
58
  if (e.key === "ArrowRight") {
@@ -80,6 +88,7 @@ export const ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id, testid, sele
80
88
  const isSelected = selectedTabId === tab.id;
81
89
  return (
82
90
  <ContentTab
91
+ disabled={tab.disabled}
83
92
  fullWidth={fullWidthTabs}
84
93
  key={tab.id}
85
94
  id={id ? `${id}-tab-${tab.id}` : undefined}