datastake-daf 0.6.190 → 0.6.192

package/.env

@@ -0,0 +1,8 @@
+REACT_APP_API_KEY=
+REACT_APP_AUTH_DOMAIN=
+REACT_APP_PROJECT_ID=
+REACT_APP_STORAGE_BUCKED=
+REACT_APP_SENDER_ID=
+REACT_APP_APP_ID=
+REACT_APP_MEASUREMENT_ID=
+REACT_APP_VAPID_KEY=

package/.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+	"cSpell.words": ["cukura"],
+	"files.autoSave": "afterDelay",
+	"editor.wordWrap": "on",
+	"editor.autoClosingBrackets": "always",
+	"editor.autoClosingComments": "always",
+	"editor.autoClosingQuotes": "always",
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"editor.formatOnPaste": true,
+	"editor.formatOnSave": true,
+	"notebook.defaultFormatter": "esbenp.prettier-vscode",
+	"javascript.format.semicolons": "insert"
+}

package/dist/components/index.js

@@ -11067,7 +11067,7 @@ var _templateObject$c;
 const _excluded$s = ["size", "maxHeight", "containerHeight", "dataSource", "columns", "pagination", "doEmptyRows"];
 function StickyTable(_ref) {
   let {
-      size = null,
+      size = "small",
       maxHeight = 300,
       containerHeight = 525,
       dataSource = [],
@@ -11077,6 +11077,9 @@ function StickyTable(_ref) {
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded$s);
   const data = React__default["default"].useMemo(() => {
+    if (!doEmptyRows) {
+      return dataSource;
+    }
     const MIN_ROWS = 4;
     if (dataSource.length < MIN_ROWS) {
       const paddedData = [...dataSource];
@@ -11088,7 +11091,7 @@ function StickyTable(_ref) {
       return paddedData;
     }
     return dataSource;
-  }, [dataSource]);
+  }, [dataSource, doEmptyRows]);
   const Wrapper = React__default["default"].useMemo(() => {
     return data.length > 5 ? ComponentWithFocus : "div";
   }, [data.length]);
@@ -11118,7 +11121,7 @@ function StickyTable(_ref) {
     })
   });
 }
-const Style$I = dt.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n  max-width: calc(100% - 48px);\n  margin-left: var(--size-lg);\n  overflow: hidden;\n\n  .daf-table {\n    padding: 0px;\n    margin-top: 0px;\n\n    .ant-tag {\n      text-align: center;\n    }\n  }\n\n  .daf-select-filters .filters {\n    padding-top: 16px;\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  .daf-table {\n    padding-top: 16px;\n  }\n"])));
+const Style$I = dt.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n\tmax-width: calc(100% - 48px);\n\tmargin-left: var(--size-lg);\n\toverflow: hidden;\n\n\t.daf-table {\n\t\tpadding: 0px;\n\t\tmargin-top: 0px;\n\n\t\t.ant-tag {\n\t\t\ttext-align: center;\n\t\t}\n\t}\n\n\t.daf-select-filters .filters {\n\t\tpadding-top: 16px;\n\t\tpadding-left: 0;\n\t\tpadding-right: 0;\n\t}\n\n\t.daf-table {\n\t\tpadding-top: 16px;\n\t}\n"])));
 StickyTable.propTypes = {
   size: PropTypes__default["default"].any,
   maxHeight: PropTypes__default["default"].number,
@@ -14002,9 +14005,8 @@ const determineHasChildren = ({
 
 const sortByPosition = (items, getConfig) => {
   return items.sort((a, b) => {
-    var _getConfig, _getConfig2;
-    const positionA = ((_getConfig = getConfig(a)) === null || _getConfig === void 0 ? void 0 : _getConfig.position) || 0;
-    const positionB = ((_getConfig2 = getConfig(b)) === null || _getConfig2 === void 0 ? void 0 : _getConfig2.position) || 0;
+    const positionA = getConfig(a)?.position || 0;
+    const positionB = getConfig(b)?.position || 0;
     return positionA - positionB;
   });
 };
@@ -14021,7 +14023,7 @@ const resolveDynamicLabel = (labelConfig, item, defaultLabel) => {
       const parts = labelKey.split(' is ');
       if (parts.length === 2) {
         const [conditionKey, conditionValue] = parts;
-        if ((item === null || item === void 0 ? void 0 : item[conditionKey]) === conditionValue) {
+        if (item?.[conditionKey] === conditionValue) {
           return labelConfig[labelKey];
         }
       }
@@ -20921,8 +20923,8 @@ function ProjectWidget(_ref) {
       onLinkClick,
       image,
       linkIcon = "Link",
-      sdgList,
-      items,
+      sdgList = [],
+      items = [],
       onCardClick,
       hideSDGList = false,
       t = x => x
@@ -20934,9 +20936,9 @@ function ProjectWidget(_ref) {
   } = useToken$i();
   return /*#__PURE__*/jsxRuntime.jsxs(antd.Card, _objectSpread2(_objectSpread2({
     style: {
-      flex: 1,
-      width: "100%",
-      minWidth: "200px"
+      // flex: 1,
+      width: 318
+      // minWidth: "200px",
     },
     hoverable: true,
     onMouseEnter: () => setIsHovered(true),
@@ -20950,7 +20952,8 @@ function ProjectWidget(_ref) {
         }
       }) : /*#__PURE__*/jsxRuntime.jsx("div", {
         style: {
-          height: "103px"
+          height: "103px",
+          borderBottom: "1px solid var(--base-gray-30)"
         },
         children: /*#__PURE__*/jsxRuntime.jsx(antd.Empty, {
           image: antd.Empty.PRESENTED_IMAGE_SIMPLE
@@ -20994,12 +20997,6 @@ const Style$x = dt.div`
     .daf-widget {
         background-color: ${props => props.backgroundColor} !important;
         border-color: ${props => props.backgroundBorderColor} !important;
-        transition: box-shadow 0.2s ease-in-out;
-        ${props => props.width ? `width: ${props.width} !important;` : ''}
-        
-        &:hover {
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-        }
     }
 
     .widget-card-logo-icon {
@@ -21012,11 +21009,6 @@ const Style$x = dt.div`
         align-items: center;
         border: 1px solid #E5E7EB;
     }
-
-    .disabled-anchor {
-        cursor: not-allowed;
-        opacity: 0.5;
-    }
 `;
 
 const {
@@ -21034,16 +21026,12 @@ const WidgetCard = _ref => {
     loading = false,
     iconColor,
     buttonIcon,
-    imageUrl,
-    buttonConfig = {},
-    width,
-    t = () => {}
+    imageUrl
   } = _ref;
   useToken$h();
   return /*#__PURE__*/jsxRuntime.jsx(Style$x, {
     backgroundColor: backgroundColor,
     backgroundBorderColor: backgroundBorderColor,
-    width: width,
     children: /*#__PURE__*/jsxRuntime.jsxs(Widget, {
       title: /*#__PURE__*/jsxRuntime.jsxs("div", {
         style: {
@@ -21068,24 +21056,19 @@ const WidgetCard = _ref => {
       addedHeader: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
           className: "flex-1"
-        }), /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-          title: buttonConfig !== null && buttonConfig !== void 0 && buttonConfig.disabled ? (buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.tooltipText) || t("Currently unavailable") : "",
-          children: /*#__PURE__*/jsxRuntime.jsx("a", {
-            className: formatClassname(["widget-card-logo-icon", (buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.disabled) && "disabled-anchor"]),
-            href: buttonConfig !== null && buttonConfig !== void 0 && buttonConfig.disabled ? undefined : link,
-            onClick: buttonConfig !== null && buttonConfig !== void 0 && buttonConfig.disabled ? e => e.preventDefault() : undefined,
-            children: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
-              name: buttonIcon,
-              size: 16,
-              color: buttonConfig !== null && buttonConfig !== void 0 && buttonConfig.disabled ? "#6C737F" : iconColor || antd.theme.colorPrimary
-            })
+        }), /*#__PURE__*/jsxRuntime.jsx("a", {
+          className: "widget-card-logo-icon",
+          href: link,
+          children: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+            name: buttonIcon,
+            size: 16,
+            color: iconColor || antd.theme.colorPrimary
           })
         })]
       }),
       loading: loading,
       className: "with-tabs",
       children: [description && /*#__PURE__*/jsxRuntime.jsx("p", {
-        className: "mt-4",
         children: description
       }), data === null || data === void 0 ? void 0 : data.map(item => /*#__PURE__*/jsxRuntime.jsxs("div", {
         style: {
@@ -21122,11 +21105,15 @@ function CarouselWidget(_ref) {
    * @param {number} currentSlide - The index of the current slide after change
    * @private
    */
-
+  const onChange = currentSlide => {
+    console.log(currentSlide);
+  };
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
     title: title,
     className: "with-border-header h-w-btn-header",
-    children: /*#__PURE__*/jsxRuntime.jsx(antd.Carousel, _objectSpread2(_objectSpread2({}, rest), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsx(antd.Carousel, _objectSpread2(_objectSpread2({
+      afterChange: onChange
+    }, rest), {}, {
       children: children
     }))
   });

package/dist/utils/index.js

@@ -6180,7 +6180,6 @@ const userHasInterface = (user, app, intf) => {
 };
 
 const en = {
-  "Currently unavailable": "Currently unavailable",
   Description: "Description",
   "missing-inputs": "Missing Inputs",
   "all-inputs-fullfilled": "All inputs in this section are fullfilled",
@@ -7373,7 +7372,6 @@ const en = {
 };
 
 const fr = {
-  "Currently unavailable": "Actuellement indisponible",
   "Description": "Description",
   "missing-inputs": "Données Manquantes",
   "all-inputs-fullfilled": "Toutes les données de cette section ont été saisies.",
@@ -9206,7 +9204,6 @@ const fr = {
 };
 
 const sp = {
-  "Currently unavailable": "Actualmente no disponible",
   "Description": "Descripción",
   "missing-inputs": "Datos que Faltan",
   "all-inputs-fullfilled": "Todas las entradas de esta sección están completas.",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.190",
+	"version": "0.6.192",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/@daf/core/components/Dashboard/Widget/CarouselWidget/index.jsx

@@ -53,13 +53,16 @@ function CarouselWidget({title, children, ...rest}) {
    * @param {number} currentSlide - The index of the current slide after change
    * @private
    */
+  const onChange = (currentSlide) => {
+    console.log(currentSlide);
+  };
 
   return (
     <Widget
       title={title}
       className="with-border-header h-w-btn-header"
     >
-      <Carousel {...rest}>
+      <Carousel afterChange={onChange} {...rest}>
         {children}
       </Carousel>
     </Widget>

package/src/@daf/core/components/Dashboard/Widget/ProjectWidget/index.jsx

@@ -7,85 +7,86 @@ const { Meta } = Card;
 const { useToken } = theme;
 
 export default function ProjectWidget({
-  title,
-  description,
-  onLinkClick,
-  image,
-  linkIcon = "Link",
-  sdgList,
-  items,
-  onCardClick,
-  hideSDGList = false,
-  t = (x) => x,
-  ...props
+	title,
+	description,
+	onLinkClick,
+	image,
+	linkIcon = "Link",
+	sdgList = [],
+	items = [],
+	onCardClick,
+	hideSDGList = false,
+	t = (x) => x,
+	...props
 }) {
-  const [isHovered, setIsHovered] = React.useState(false);
-  const { token } = useToken();
+	const [isHovered, setIsHovered] = React.useState(false);
+	const { token } = useToken();
 
-  return (
-    <Card
-      style={{
-        flex: 1,
-        width: "100%",
-        minWidth: "200px",
-      }}
-      hoverable
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-      onClick={onCardClick}
-      cover={
-        <ImageContainer>
-          {image ? (
-            <div
-              className="image"
-              style={{
-                backgroundImage: `url(${image})`,
-              }}
-            />
-          ) : (
-            <div
-              style={{
-                height: "103px",
-              }}
-            >
-              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
-            </div>
-          )}
+	return (
+		<Card
+			style={{
+				// flex: 1,
+				width: 318,
+				// minWidth: "200px",
+			}}
+			hoverable
+			onMouseEnter={() => setIsHovered(true)}
+			onMouseLeave={() => setIsHovered(false)}
+			onClick={onCardClick}
+			cover={
+				<ImageContainer>
+					{image ? (
+						<div
+							className="image"
+							style={{
+								backgroundImage: `url(${image})`,
+							}}
+						/>
+					) : (
+						<div
+							style={{
+								height: "103px",
+								borderBottom: "1px solid var(--base-gray-30)",
+							}}
+						>
+							<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+						</div>
+					)}
 
-          {onLinkClick && (
-            <div className="icon-container" onClick={onLinkClick}>
-              <CustomIcon
-                name={linkIcon}
-                width={16}
-                height={16}
-                color={isHovered ? token.colorPrimary7 : "black"}
-              />
-            </div>
-          )}
-        </ImageContainer>
-      }
-      {...props}
-    >
-      <Meta title={title || undefined} description={description || undefined} />
-      <ProjectWidgetItems>
-        {items.map((item, index) => (
-          <li key={index} className="project-widget-item">
-            <Label>{item.label}</Label>
-            {item.render()}
-          </li>
-        ))}
-      </ProjectWidgetItems>
+					{onLinkClick && (
+						<div className="icon-container" onClick={onLinkClick}>
+							<CustomIcon
+								name={linkIcon}
+								width={16}
+								height={16}
+								color={isHovered ? token.colorPrimary7 : "black"}
+							/>
+						</div>
+					)}
+				</ImageContainer>
+			}
+			{...props}
+		>
+			<Meta title={title || undefined} description={description || undefined} />
+			<ProjectWidgetItems>
+				{items.map((item, index) => (
+					<li key={index} className="project-widget-item">
+						<Label>{item.label}</Label>
+						{item.render()}
+					</li>
+				))}
+			</ProjectWidgetItems>
 
-      {!hideSDGList && (
-        <div
-          style={{
-            borderTop: "1px solid var(--base-gray-30)",
-            paddingTop: "10px",
-          }}
-        >
-          <SdgList sdgList={sdgList} t={t} />
-        </div>
-      )}
-    </Card>
-  );
+			{!hideSDGList && (
+				<div
+					style={{
+						borderTop: "1px solid var(--base-gray-30)",
+						paddingTop: "10px",
+					}}
+				>
+					<SdgList sdgList={sdgList} t={t} />
+				</div>
+			)}
+		</Card>
+	);
 }

package/src/@daf/core/components/Dashboard/Widget/ScrollWidget/ScrollWidget.stories.jsx

@@ -0,0 +1,39 @@
+import ScrollWidget from "./index";
+import ThemeLayout from "../../../ThemeLayout";
+import DashboardLayout from "../../DashboardLayout";
+import ProjectWidget from "../ProjectWidget";
+
+export default {
+	title: "Dashboard/Widgets/ScrollWidget",
+	component: ScrollWidget,
+	tags: ["autodocs"],
+	decorators: [
+		(Story) => (
+			<div style={{ margin: "3em" }}>
+				<ThemeLayout>
+					<Story />
+				</ThemeLayout>
+			</div>
+		),
+	],
+};
+
+export const Primary = {
+	name: "Scroll Widget",
+	args: {
+		title: "Scroll Widget Title",
+	},
+	render: (args) => (
+		<DashboardLayout>
+			<ScrollWidget {...args}>
+				<section className="nowrap">
+					<ProjectWidget hideSDGList />
+					<ProjectWidget hideSDGList />
+					<ProjectWidget hideSDGList />
+					<ProjectWidget hideSDGList />
+					<ProjectWidget hideSDGList />
+				</section>
+			</ScrollWidget>
+		</DashboardLayout>
+	),
+};

package/src/@daf/core/components/Dashboard/Widget/ScrollWidget/index.jsx

@@ -0,0 +1,22 @@
+import Widget from "../index.jsx";
+
+export default function ScrollWidget({ classname, widgetClassname, children, ...props }) {
+	return (
+		<Widget className={widgetClassname} {...props}>
+			<div
+				style={{
+					overflowX: "auto",
+					overflowY: "hidden",
+					width: "100%",
+					display: "flex",
+					gap: "10px",
+					alignItems: "stretch",
+					scrollbarWidth: "thin",
+					scrollbarColor: "#ccc transparent",
+				}}
+			>
+				{children}
+			</div>
+		</Widget>
+	);
+}

package/src/@daf/core/components/Dashboard/Widget/WidgetCard/WidgetCard.stories.js

@@ -34,11 +34,6 @@ export const Primary = {
             }
         ],
         "backgroundColor": "#F6FEF9",
-        "backgroundBorderColor": "#B0F3CB",
-        "buttonConfig": {
-            "disabled": true
-        },
-        t: (s) => s,
-        width: "300px"
+        "backgroundBorderColor": "#B0F3CB"
 	},
 };

package/src/@daf/core/components/Dashboard/Widget/WidgetCard/index.js

@@ -3,7 +3,6 @@ import Widget from '../index.jsx'
 import { theme, Tooltip, Tag } from 'antd'
 import CustomIcon from '../../../Icon/CustomIcon.jsx'
 import Style from './style.js'
-import { formatClassname } from '../../../../../../helpers/ClassesHelper.js'
 
 const { useToken } = theme;
 
@@ -19,49 +18,39 @@ const WidgetCard = ({
     iconColor, 
     buttonIcon,
     imageUrl,
-    buttonConfig = {},
-    width,
-    t = () => {},
 }) => {
     const { token } = useToken();
     return (
-        <Style backgroundColor={backgroundColor} backgroundBorderColor={backgroundBorderColor} width={width}>
+        <Style backgroundColor={backgroundColor} backgroundBorderColor={backgroundBorderColor}>
             <Widget
-                title={
-                    <div style={{display: "flex", alignItems: "center"}}>
-                        {imageUrl ? <img src={imageUrl} className="widget-card-logo-icon mr-2" /> 
-                            : <div className="widget-card-logo-icon mr-2">
-                                <CustomIcon name={logoIcon} width={25} height={25} />
-                            </div> 
-                        }
-                        <Tooltip title={title}>{title}</Tooltip>
-                    </div>
-                }
-                addedHeader={
-                    <>
-                        <div className="flex-1" />
-                        <Tooltip title={buttonConfig?.disabled ? (buttonConfig?.tooltipText || t("Currently unavailable")) : ""}>
-                            <a 
-                                className={formatClassname(["widget-card-logo-icon", buttonConfig?.disabled && "disabled-anchor"])} 
-                                href={buttonConfig?.disabled ? undefined : link}
-                                onClick={buttonConfig?.disabled ? (e) => e.preventDefault() : undefined}
-                            >
-                                <CustomIcon  name={buttonIcon} size={16} color={buttonConfig?.disabled ? "#6C737F" : (iconColor || theme.colorPrimary)} />
-                            </a>
-                        </Tooltip>
-                    </>
-                }
-                loading={loading}
-                className="with-tabs"
-            >
-                {description && <p className="mt-4">{description}</p>}
-                {data?.map((item) => (
-                    <div key={item} style={{display: "flex", justifyContent: "space-between"}}>
-                        {item.isTag ? <Tag style={{width: '90px', textAlign: 'center', borderRadius: '10px'}} color={item.tagColor || 'default'}>{item.label}</Tag> : <span>{item.label}</span>}
-                        <span>{item.value}</span>
-                    </div>
-                ))}
-            </Widget>
+            title={
+                <div style={{display: "flex", alignItems: "center"}}>
+                    {imageUrl ? <img src={imageUrl} className="widget-card-logo-icon mr-2" /> 
+                        : <div className="widget-card-logo-icon mr-2">
+                            <CustomIcon name={logoIcon} width={25} height={25} />
+                        </div> 
+                    }
+                    <Tooltip title={title}>{title}</Tooltip>
+                </div>
+            }
+            addedHeader={
+                <>
+                    <div className="flex-1" /><a className="widget-card-logo-icon" href={link}>
+                        <CustomIcon  name={buttonIcon} size={16} color={iconColor || theme.colorPrimary} />
+                    </a>
+                </>
+            }
+            loading={loading}
+            className="with-tabs"
+        >
+            {description && <p>{description}</p>}
+            {data?.map((item) => (
+                <div key={item} style={{display: "flex", justifyContent: "space-between"}}>
+                    {item.isTag ? <Tag style={{width: '90px', textAlign: 'center', borderRadius: '10px'}} color={item.tagColor || 'default'}>{item.label}</Tag> : <span>{item.label}</span>}
+                    <span>{item.value}</span>
+                </div>
+            ))}
+        </Widget>
         </Style>
     )
 }

package/src/@daf/core/components/Dashboard/Widget/WidgetCard/style.js

@@ -4,12 +4,6 @@ const Style = styled.div`
     .daf-widget {
         background-color: ${props => props.backgroundColor} !important;
         border-color: ${props => props.backgroundBorderColor} !important;
-        transition: box-shadow 0.2s ease-in-out;
-        ${props => props.width ? `width: ${props.width} !important;` : ''}
-        
-        &:hover {
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-        }
     }
 
     .widget-card-logo-icon {
@@ -22,11 +16,6 @@ const Style = styled.div`
         align-items: center;
         border: 1px solid #E5E7EB;
     }
-
-    .disabled-anchor {
-        cursor: not-allowed;
-        opacity: 0.5;
-    }
 `;
 
 export default Style;

package/src/@daf/core/components/Table/StickyTable/index.jsx

@@ -5,90 +5,94 @@ import PropTypes from "prop-types";
 import ComponentWithFocus from "../../Dashboard/ComponentWithFocus/index.jsx";
 
 export default function StickyTable({
-  size = null,
-  maxHeight = 300,
-  containerHeight = 525,
-  dataSource = [],
-  columns = {},
-  pagination = false,
-  doEmptyRows = true,
-  ...props
+	size = "small",
+	maxHeight = 300,
+	containerHeight = 525,
+	dataSource = [],
+	columns = {},
+	pagination = false,
+	doEmptyRows = true,
+	...props
 }) {
-  const data = React.useMemo(() => {
-    const MIN_ROWS = 4;
+	const data = React.useMemo(() => {
+		if (!doEmptyRows) {
+			return dataSource;
+		}
 
-    if (dataSource.length < MIN_ROWS) {
-      const paddedData = [...dataSource];
-      while (paddedData.length < MIN_ROWS) {
-        paddedData.push({ empty: true });
-      }
-      return paddedData;
-    }
+		const MIN_ROWS = 4;
 
-    return dataSource;
-  }, [dataSource]);
+		if (dataSource.length < MIN_ROWS) {
+			const paddedData = [...dataSource];
+			while (paddedData.length < MIN_ROWS) {
+				paddedData.push({ empty: true });
+			}
+			return paddedData;
+		}
 
-  const Wrapper = React.useMemo(() => {
-    return data.length > 5 ? ComponentWithFocus : "div";
-  }, [data.length]);
+		return dataSource;
+	}, [dataSource, doEmptyRows]);
 
-  return (
-    <Wrapper>
-      <Style>
-        <div
-          className="daf-table-wrapper"
-          style={{
-            maxHeight: containerHeight,
-            overflowY: "auto",
-          }}
-        >
-          <div className="daf-sticky-table">
-            <Table
-              {...props}
-              size={size}
-              scroll
-              sticky
-              style={{ maxHeight }}
-              dataSource={data}
-              columns={columns}
-              pagination={pagination}
-            />
-          </div>
-        </div>
-      </Style>
-    </Wrapper>
-  );
+	const Wrapper = React.useMemo(() => {
+		return data.length > 5 ? ComponentWithFocus : "div";
+	}, [data.length]);
+
+	return (
+		<Wrapper>
+			<Style>
+				<div
+					className="daf-table-wrapper"
+					style={{
+						maxHeight: containerHeight,
+						overflowY: "auto",
+					}}
+				>
+					<div className="daf-sticky-table">
+						<Table
+							{...props}
+							size={size}
+							scroll
+							sticky
+							style={{ maxHeight }}
+							dataSource={data}
+							columns={columns}
+							pagination={pagination}
+						/>
+					</div>
+				</div>
+			</Style>
+		</Wrapper>
+	);
 }
 
 const Style = styled.div`
-  max-width: calc(100% - 48px);
-  margin-left: var(--size-lg);
-  overflow: hidden;
+	max-width: calc(100% - 48px);
+	margin-left: var(--size-lg);
+	overflow: hidden;
 
-  .daf-table {
-    padding: 0px;
-    margin-top: 0px;
+	.daf-table {
+		padding: 0px;
+		margin-top: 0px;
 
-    .ant-tag {
-      text-align: center;
-    }
-  }
+		.ant-tag {
+			text-align: center;
+		}
+	}
 
-  .daf-select-filters .filters {
-    padding-top: 16px;
-    padding-left: 0;
-    padding-right: 0;
-  }
+	.daf-select-filters .filters {
+		padding-top: 16px;
+		padding-left: 0;
+		padding-right: 0;
+	}
 
-  .daf-table {
-    padding-top: 16px;
-  }
+	.daf-table {
+		padding-top: 16px;
+	}
 `;
 
 StickyTable.propTypes = {
-  size: PropTypes.any,
-  maxHeight: PropTypes.number,
-  dataSource: PropTypes.array,
-  columns: PropTypes.object,
-  pagination: PropTypes.any,
+	size: PropTypes.any,
+	maxHeight: PropTypes.number,
+	dataSource: PropTypes.array,
+	columns: PropTypes.object,
+	pagination: PropTypes.any,
 };

package/src/constants/locales/en/translation.js

@@ -1,5 +1,4 @@
 const en = {
-  "Currently unavailable": "Currently unavailable",
   Description: "Description",
   "missing-inputs": "Missing Inputs",
   "all-inputs-fullfilled": "All inputs in this section are fullfilled",

package/src/constants/locales/fr/translation.js

@@ -1,5 +1,4 @@
 const fr = {
-	"Currently unavailable": "Actuellement indisponible",
 	"Description": "Description",
 	"missing-inputs": "Données Manquantes",
 	"all-inputs-fullfilled": "Toutes les données de cette section ont été saisies.",

package/src/constants/locales/sp/translation.js

@@ -1,5 +1,4 @@
 const sp = {
-  "Currently unavailable": "Actualmente no disponible",
   "Description": "Descripción",
   "missing-inputs": "Datos que Faltan",
   "all-inputs-fullfilled": "Todas las entradas de esta sección están completas.",