@speakapbv/dough-component-library 9.29.0 → 9.30.0
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.
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { ReactNode } from "react";
|
|
2
2
|
import { Colors, DoughDataAttributes } from "../../utils/constants";
|
|
3
3
|
import "./tabs.scss";
|
|
4
|
+
import { BoxProps } from "../containers/box/box";
|
|
4
5
|
export interface TabsContainerProps {
|
|
5
6
|
className?: string;
|
|
6
7
|
children?: ReactNode;
|
|
@@ -8,8 +9,11 @@ export interface TabsContainerProps {
|
|
|
8
9
|
borderOnTop?: boolean;
|
|
9
10
|
showDivider?: boolean;
|
|
10
11
|
color?: Colors;
|
|
12
|
+
padding?: BoxProps["padding"];
|
|
13
|
+
withBorderOnHover?: boolean;
|
|
11
14
|
stretchTabs?: boolean;
|
|
12
15
|
small?: boolean;
|
|
16
|
+
compact?: boolean;
|
|
13
17
|
iconOnly?: boolean;
|
|
14
18
|
onChange(selectedTabId: string): void;
|
|
15
19
|
value?: string;
|
package/dist/index.es.js
CHANGED
|
@@ -4614,14 +4614,20 @@ var Notification = function (props) {
|
|
|
4614
4614
|
};
|
|
4615
4615
|
Notification.displayName = "Notification";
|
|
4616
4616
|
|
|
4617
|
-
var css_248z$z = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-
|
|
4617
|
+
var css_248z$z = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-tab-item-selection-border {\n position: absolute;\n right: 0;\n left: 0;\n z-index: 5;\n width: auto;\n height: 4px;\n border-radius: 12px;\n transform: translate3d(0, 0, 0);\n opacity: 1;\n}\n.dough-tab-item-selection-border.dough-tabs-container-top-border {\n top: 0;\n}\n.dough-tab-item-selection-border:not(.dough-tabs-container-top-border) {\n bottom: 0;\n}\nbody:not(.no-transition) .dough-tab-item-selection-border {\n transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-tab-item-selection-border {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n\n.dough-tab-item-button {\n width: 100% !important;\n height: 100% !important;\n min-width: 40px;\n color: rgb(158, 158, 158);\n color: var(--dough-color-text-light);\n cursor: pointer;\n font-size: 0.75rem;\n font-weight: 700;\n font-family: \"Roboto\", sans-serif;\n line-height: 1.5;\n}\n.dough-tab-item-button .dough-box {\n max-height: 60px;\n min-height: 60px;\n}\n.dough-tab-item-button.dough-item-small .dough-box {\n max-height: 40px;\n min-height: 40px;\n}\n\n.dough-tab-item {\n padding: 0 !important;\n overflow: hidden;\n position: relative;\n height: 100%;\n}\nbody:not(.no-transition) .dough-tab-item {\n transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-tab-item {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-tab-item.dough-tab-item-stretch-tabs {\n flex-grow: 1;\n}\n.dough-tab-item .dough-tab-item-selection-border {\n opacity: 0;\n}\n.dough-tab-item:hover .dough-tab-item-button {\n color: rgb(68, 68, 68);\n color: var(--dough-color-text-dark);\n}\n.dough-tab-item:hover .dough-tab-item-selection-border.dough-tab-item-selection-border-hover {\n opacity: 0.25;\n}\n.dough-tab-item.active .dough-tab-item-button {\n color: rgb(68, 68, 68);\n color: var(--dough-color-text-dark);\n}\n\n.dough-tabs-container {\n position: relative;\n flex-flow: row nowrap !important;\n align-items: stretch !important;\n width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n margin-bottom: -1px;\n}\n.dough-tabs-container.dough-tabs-container-divider {\n border-top: 1px solid rgb(230, 230, 230);\n}\n.dough-tabs-container.dough-tabs-container-divider.dough-tabs-container-top-border {\n border-top: 1px solid var(--dough-color-gray-5);\n}\n.dough-tabs-container.dough-tabs-container-divider.dough-tabs-container-bottom-border {\n border-bottom: 1px solid var(--dough-color-gray-5);\n}\n.dough-tabs-container.dough-tabs-container-compact .dough-tab-item + .dough-tab-item {\n margin-left: 16px;\n}\n.dough-tabs-container.dough-tabs-container-compact .dough-tab-item-button {\n padding-bottom: 16px;\n}\n.dough-tabs-container.dough-tabs-container-compact .dough-tab-item-button .dough-box {\n max-height: unset;\n min-height: 0;\n}\n.dough-tabs-container.dough-tabs-container-compact.dough-tabs-container-top-border .dough-tab-item.dough-tab-item-compact .dough-tab-item-button {\n padding-bottom: 0;\n padding-top: 16px;\n}";
|
|
4618
4618
|
styleInject(css_248z$z);
|
|
4619
4619
|
|
|
4620
4620
|
var simplifyKey = function (key) {
|
|
4621
4621
|
return key ? key.slice(key.indexOf("$") + 1) : key;
|
|
4622
4622
|
};
|
|
4623
4623
|
|
|
4624
|
+
var Border = function (props) { return (React.createElement("span", { className: cn("dough-tab-item-selection-border", props.color ? props.color : Colors.HEADER, {
|
|
4625
|
+
"dough-tab-item-selection-border-hover": props.withBorderOnHover,
|
|
4626
|
+
"dough-tabs-container-top-border": props.borderOnTop,
|
|
4627
|
+
}), style: props.style })); };
|
|
4624
4628
|
var TabsContainer = function (props) {
|
|
4629
|
+
var tabRefs = useRef({});
|
|
4630
|
+
var _a = useState(undefined), selectedIndex = _a[0], setSelectedIndex = _a[1];
|
|
4625
4631
|
var handleChange = function (val) {
|
|
4626
4632
|
if (val && val !== props.value) {
|
|
4627
4633
|
if (props.onChange) {
|
|
@@ -4629,34 +4635,52 @@ var TabsContainer = function (props) {
|
|
|
4629
4635
|
}
|
|
4630
4636
|
}
|
|
4631
4637
|
};
|
|
4638
|
+
var currentTab = selectedIndex === undefined
|
|
4639
|
+
? undefined
|
|
4640
|
+
: tabRefs.current[selectedIndex];
|
|
4641
|
+
var underlineWidth = currentTab === null || currentTab === void 0 ? void 0 : currentTab.clientWidth;
|
|
4642
|
+
var underlineLeftPosition = currentTab === null || currentTab === void 0 ? void 0 : currentTab.offsetLeft;
|
|
4632
4643
|
return (React.createElement(Box, { display: BoxDisplay.FLEX, direction: BoxDirection.ROW, className: cn("dough-tabs-container", props.className, {
|
|
4633
4644
|
"dough-tabs-container-divider": props.showDivider !== false,
|
|
4634
4645
|
"dough-tabs-container-top-border": props.borderOnTop,
|
|
4635
|
-
"dough-tabs-container-bottom-border": props.borderOnTop !==
|
|
4636
|
-
|
|
4637
|
-
|
|
4638
|
-
|
|
4639
|
-
|
|
4640
|
-
|
|
4641
|
-
|
|
4642
|
-
|
|
4643
|
-
|
|
4644
|
-
|
|
4645
|
-
"dough-
|
|
4646
|
-
})
|
|
4647
|
-
|
|
4648
|
-
|
|
4649
|
-
|
|
4650
|
-
|
|
4651
|
-
|
|
4652
|
-
|
|
4653
|
-
|
|
4654
|
-
|
|
4655
|
-
|
|
4656
|
-
|
|
4657
|
-
|
|
4658
|
-
|
|
4659
|
-
|
|
4646
|
+
"dough-tabs-container-bottom-border": props.borderOnTop !== true,
|
|
4647
|
+
"dough-tabs-container-compact": props.compact,
|
|
4648
|
+
}), padding: props.padding, dataAttributes: props.dataAttributes },
|
|
4649
|
+
props.children &&
|
|
4650
|
+
Children.toArray(props.children).map(function (child, index) {
|
|
4651
|
+
var simplifiedKey = simplifyKey(child.key);
|
|
4652
|
+
var isActive = props.value === simplifiedKey;
|
|
4653
|
+
return (React.createElement(Box, { className: cn("dough-tab-item", {
|
|
4654
|
+
active: props.value === simplifiedKey,
|
|
4655
|
+
"dough-tab-item-small": props.small || props.iconOnly,
|
|
4656
|
+
"dough-tab-item-stretch-tabs": props.stretchTabs,
|
|
4657
|
+
}), ref: function (ref) {
|
|
4658
|
+
tabRefs.current[index] = ref;
|
|
4659
|
+
if (isActive) {
|
|
4660
|
+
setSelectedIndex(index);
|
|
4661
|
+
}
|
|
4662
|
+
}, key: "tab-" + simplifiedKey + "-wrapper" },
|
|
4663
|
+
React.createElement(Border, { borderOnTop: props.borderOnTop, color: props.color, withBorderOnHover: props.withBorderOnHover }),
|
|
4664
|
+
React.createElement("div", { className: cn("dough-tab-item-button", {
|
|
4665
|
+
"dough-tab-item-button-disabled": child.props.disabled,
|
|
4666
|
+
}), onClick: function (e) {
|
|
4667
|
+
cancelEvent(e);
|
|
4668
|
+
hideLastDoughTooltip();
|
|
4669
|
+
setSelectedIndex(index);
|
|
4670
|
+
handleChange(simplifiedKey);
|
|
4671
|
+
} },
|
|
4672
|
+
React.createElement(Box, { height: "100%", display: BoxDisplay.FLEX, justifyContent: BoxJustifyContent.CENTER, alignItems: BoxAlign.CENTER, padding: props.iconOnly
|
|
4673
|
+
? Sizes.XS
|
|
4674
|
+
: props.small
|
|
4675
|
+
? Sizes.SMALL
|
|
4676
|
+
: props.compact
|
|
4677
|
+
? undefined
|
|
4678
|
+
: Sizes.NORMAL }, child))));
|
|
4679
|
+
}),
|
|
4680
|
+
selectedIndex !== undefined && (React.createElement(Border, { borderOnTop: props.borderOnTop, color: props.color, withBorderOnHover: props.withBorderOnHover, style: {
|
|
4681
|
+
width: underlineWidth || 0,
|
|
4682
|
+
left: underlineLeftPosition,
|
|
4683
|
+
} }))));
|
|
4660
4684
|
};
|
|
4661
4685
|
TabsContainer.displayName = "TabsContainer";
|
|
4662
4686
|
|
package/dist/index.js
CHANGED
|
@@ -4597,14 +4597,20 @@ var Notification = function (props) {
|
|
|
4597
4597
|
};
|
|
4598
4598
|
Notification.displayName = "Notification";
|
|
4599
4599
|
|
|
4600
|
-
var css_248z$z = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-
|
|
4600
|
+
var css_248z$z = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-tab-item-selection-border {\n position: absolute;\n right: 0;\n left: 0;\n z-index: 5;\n width: auto;\n height: 4px;\n border-radius: 12px;\n transform: translate3d(0, 0, 0);\n opacity: 1;\n}\n.dough-tab-item-selection-border.dough-tabs-container-top-border {\n top: 0;\n}\n.dough-tab-item-selection-border:not(.dough-tabs-container-top-border) {\n bottom: 0;\n}\nbody:not(.no-transition) .dough-tab-item-selection-border {\n transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-tab-item-selection-border {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n\n.dough-tab-item-button {\n width: 100% !important;\n height: 100% !important;\n min-width: 40px;\n color: rgb(158, 158, 158);\n color: var(--dough-color-text-light);\n cursor: pointer;\n font-size: 0.75rem;\n font-weight: 700;\n font-family: \"Roboto\", sans-serif;\n line-height: 1.5;\n}\n.dough-tab-item-button .dough-box {\n max-height: 60px;\n min-height: 60px;\n}\n.dough-tab-item-button.dough-item-small .dough-box {\n max-height: 40px;\n min-height: 40px;\n}\n\n.dough-tab-item {\n padding: 0 !important;\n overflow: hidden;\n position: relative;\n height: 100%;\n}\nbody:not(.no-transition) .dough-tab-item {\n transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-tab-item {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-tab-item.dough-tab-item-stretch-tabs {\n flex-grow: 1;\n}\n.dough-tab-item .dough-tab-item-selection-border {\n opacity: 0;\n}\n.dough-tab-item:hover .dough-tab-item-button {\n color: rgb(68, 68, 68);\n color: var(--dough-color-text-dark);\n}\n.dough-tab-item:hover .dough-tab-item-selection-border.dough-tab-item-selection-border-hover {\n opacity: 0.25;\n}\n.dough-tab-item.active .dough-tab-item-button {\n color: rgb(68, 68, 68);\n color: var(--dough-color-text-dark);\n}\n\n.dough-tabs-container {\n position: relative;\n flex-flow: row nowrap !important;\n align-items: stretch !important;\n width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n margin-bottom: -1px;\n}\n.dough-tabs-container.dough-tabs-container-divider {\n border-top: 1px solid rgb(230, 230, 230);\n}\n.dough-tabs-container.dough-tabs-container-divider.dough-tabs-container-top-border {\n border-top: 1px solid var(--dough-color-gray-5);\n}\n.dough-tabs-container.dough-tabs-container-divider.dough-tabs-container-bottom-border {\n border-bottom: 1px solid var(--dough-color-gray-5);\n}\n.dough-tabs-container.dough-tabs-container-compact .dough-tab-item + .dough-tab-item {\n margin-left: 16px;\n}\n.dough-tabs-container.dough-tabs-container-compact .dough-tab-item-button {\n padding-bottom: 16px;\n}\n.dough-tabs-container.dough-tabs-container-compact .dough-tab-item-button .dough-box {\n max-height: unset;\n min-height: 0;\n}\n.dough-tabs-container.dough-tabs-container-compact.dough-tabs-container-top-border .dough-tab-item.dough-tab-item-compact .dough-tab-item-button {\n padding-bottom: 0;\n padding-top: 16px;\n}";
|
|
4601
4601
|
styleInject(css_248z$z);
|
|
4602
4602
|
|
|
4603
4603
|
var simplifyKey = function (key) {
|
|
4604
4604
|
return key ? key.slice(key.indexOf("$") + 1) : key;
|
|
4605
4605
|
};
|
|
4606
4606
|
|
|
4607
|
+
var Border = function (props) { return (React__default.createElement("span", { className: cn("dough-tab-item-selection-border", props.color ? props.color : exports.Colors.HEADER, {
|
|
4608
|
+
"dough-tab-item-selection-border-hover": props.withBorderOnHover,
|
|
4609
|
+
"dough-tabs-container-top-border": props.borderOnTop,
|
|
4610
|
+
}), style: props.style })); };
|
|
4607
4611
|
var TabsContainer = function (props) {
|
|
4612
|
+
var tabRefs = React.useRef({});
|
|
4613
|
+
var _a = React.useState(undefined), selectedIndex = _a[0], setSelectedIndex = _a[1];
|
|
4608
4614
|
var handleChange = function (val) {
|
|
4609
4615
|
if (val && val !== props.value) {
|
|
4610
4616
|
if (props.onChange) {
|
|
@@ -4612,34 +4618,52 @@ var TabsContainer = function (props) {
|
|
|
4612
4618
|
}
|
|
4613
4619
|
}
|
|
4614
4620
|
};
|
|
4621
|
+
var currentTab = selectedIndex === undefined
|
|
4622
|
+
? undefined
|
|
4623
|
+
: tabRefs.current[selectedIndex];
|
|
4624
|
+
var underlineWidth = currentTab === null || currentTab === void 0 ? void 0 : currentTab.clientWidth;
|
|
4625
|
+
var underlineLeftPosition = currentTab === null || currentTab === void 0 ? void 0 : currentTab.offsetLeft;
|
|
4615
4626
|
return (React__default.createElement(Box, { display: exports.BoxDisplay.FLEX, direction: exports.BoxDirection.ROW, className: cn("dough-tabs-container", props.className, {
|
|
4616
4627
|
"dough-tabs-container-divider": props.showDivider !== false,
|
|
4617
4628
|
"dough-tabs-container-top-border": props.borderOnTop,
|
|
4618
|
-
"dough-tabs-container-bottom-border": props.borderOnTop !==
|
|
4619
|
-
|
|
4620
|
-
|
|
4621
|
-
|
|
4622
|
-
|
|
4623
|
-
|
|
4624
|
-
|
|
4625
|
-
|
|
4626
|
-
|
|
4627
|
-
|
|
4628
|
-
"dough-
|
|
4629
|
-
})
|
|
4630
|
-
|
|
4631
|
-
|
|
4632
|
-
|
|
4633
|
-
|
|
4634
|
-
|
|
4635
|
-
|
|
4636
|
-
|
|
4637
|
-
|
|
4638
|
-
|
|
4639
|
-
|
|
4640
|
-
|
|
4641
|
-
|
|
4642
|
-
|
|
4629
|
+
"dough-tabs-container-bottom-border": props.borderOnTop !== true,
|
|
4630
|
+
"dough-tabs-container-compact": props.compact,
|
|
4631
|
+
}), padding: props.padding, dataAttributes: props.dataAttributes },
|
|
4632
|
+
props.children &&
|
|
4633
|
+
React.Children.toArray(props.children).map(function (child, index) {
|
|
4634
|
+
var simplifiedKey = simplifyKey(child.key);
|
|
4635
|
+
var isActive = props.value === simplifiedKey;
|
|
4636
|
+
return (React__default.createElement(Box, { className: cn("dough-tab-item", {
|
|
4637
|
+
active: props.value === simplifiedKey,
|
|
4638
|
+
"dough-tab-item-small": props.small || props.iconOnly,
|
|
4639
|
+
"dough-tab-item-stretch-tabs": props.stretchTabs,
|
|
4640
|
+
}), ref: function (ref) {
|
|
4641
|
+
tabRefs.current[index] = ref;
|
|
4642
|
+
if (isActive) {
|
|
4643
|
+
setSelectedIndex(index);
|
|
4644
|
+
}
|
|
4645
|
+
}, key: "tab-" + simplifiedKey + "-wrapper" },
|
|
4646
|
+
React__default.createElement(Border, { borderOnTop: props.borderOnTop, color: props.color, withBorderOnHover: props.withBorderOnHover }),
|
|
4647
|
+
React__default.createElement("div", { className: cn("dough-tab-item-button", {
|
|
4648
|
+
"dough-tab-item-button-disabled": child.props.disabled,
|
|
4649
|
+
}), onClick: function (e) {
|
|
4650
|
+
cancelEvent(e);
|
|
4651
|
+
hideLastDoughTooltip();
|
|
4652
|
+
setSelectedIndex(index);
|
|
4653
|
+
handleChange(simplifiedKey);
|
|
4654
|
+
} },
|
|
4655
|
+
React__default.createElement(Box, { height: "100%", display: exports.BoxDisplay.FLEX, justifyContent: exports.BoxJustifyContent.CENTER, alignItems: exports.BoxAlign.CENTER, padding: props.iconOnly
|
|
4656
|
+
? exports.Sizes.XS
|
|
4657
|
+
: props.small
|
|
4658
|
+
? exports.Sizes.SMALL
|
|
4659
|
+
: props.compact
|
|
4660
|
+
? undefined
|
|
4661
|
+
: exports.Sizes.NORMAL }, child))));
|
|
4662
|
+
}),
|
|
4663
|
+
selectedIndex !== undefined && (React__default.createElement(Border, { borderOnTop: props.borderOnTop, color: props.color, withBorderOnHover: props.withBorderOnHover, style: {
|
|
4664
|
+
width: underlineWidth || 0,
|
|
4665
|
+
left: underlineLeftPosition,
|
|
4666
|
+
} }))));
|
|
4643
4667
|
};
|
|
4644
4668
|
TabsContainer.displayName = "TabsContainer";
|
|
4645
4669
|
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, import("./tabs").TabsContainerProps>;
|
|
2
|
+
export default _default;
|
|
3
|
+
export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("./tabs").TabsContainerProps>;
|
|
4
|
+
export declare const Compact: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("./tabs").TabsContainerProps>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@speakapbv/dough-component-library",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.30.0",
|
|
4
4
|
"description": "DOUGH: Speakap React Component Library",
|
|
5
5
|
"author": "Speakap",
|
|
6
6
|
"license": "MIT",
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"module": "dist/index.es.js",
|
|
11
11
|
"jsnext:main": "dist/index.es.js",
|
|
12
12
|
"engines": {
|
|
13
|
-
"node": ">=
|
|
13
|
+
"node": ">=16.17.1",
|
|
14
14
|
"npm": ">=5"
|
|
15
15
|
},
|
|
16
16
|
"scripts": {
|