@digigov/react-core 2.0.0-76ec20a0 → 2.0.0-7d765d3c

package/lazy/index.js

@@ -152,7 +152,6 @@ export default {
   'AdminMain': lazy(() => import('@digigov/react-core/AdminMain').then((module) => ({ default: module['AdminMain'] }))),
   'AdminTopSection': lazy(() => import('@digigov/react-core/AdminTopSection').then((module) => ({ default: module['AdminTopSection'] }))),
   'AutoCompleteInputBase': lazy(() => import('@digigov/react-core/AutoCompleteInputBase').then((module) => ({ default: module['AutoCompleteInputBase'] }))),
-  'AutoCompleteInputTypeahead': lazy(() => import('@digigov/react-core/AutoCompleteInputTypeahead').then((module) => ({ default: module['AutoCompleteInputTypeahead'] }))),
   'AutoCompleteResultList': lazy(() => import('@digigov/react-core/AutoCompleteResultList').then((module) => ({ default: module['AutoCompleteResultList'] }))),
   'AutoCompleteResultListItem': lazy(() => import('@digigov/react-core/AutoCompleteResultListItem').then((module) => ({ default: module['AutoCompleteResultListItem'] }))),
   'AutoCompleteContainer': lazy(() => import('@digigov/react-core/AutoCompleteContainer').then((module) => ({ default: module['AutoCompleteContainer'] }))),
@@ -192,7 +191,7 @@ export default {
   'PaginationListItem': lazy(() => import('@digigov/react-core/PaginationListItem').then((module) => ({ default: module['PaginationListItem'] }))),
   'PaginationLabelContainer': lazy(() => import('@digigov/react-core/PaginationLabelContainer').then((module) => ({ default: module['PaginationLabelContainer'] }))),
   'LoaderContainer': lazy(() => import('@digigov/react-core/LoaderContainer').then((module) => ({ default: module['LoaderContainer'] }))),
-  'CircularProgress': lazy(() => import('@digigov/react-core/CircularProgress').then((module) => ({ default: module['CircularProgress'] }))),
+  'CircularProgressBase': lazy(() => import('@digigov/react-core/CircularProgressBase').then((module) => ({ default: module['CircularProgressBase'] }))),
   'FullPageBackground': lazy(() => import('@digigov/react-core/FullPageBackground').then((module) => ({ default: module['FullPageBackground'] }))),
   'StepNavCircleNumber': lazy(() => import('@digigov/react-core/StepNavCircleNumber').then((module) => ({ default: module['StepNavCircleNumber'] }))),
   'StepNav': lazy(() => import('@digigov/react-core/StepNav').then((module) => ({ default: module['StepNav'] }))),

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@digigov/react-core",
-  "version": "2.0.0-76ec20a0",
+  "version": "2.0.0-7d765d3c",
   "description": "@digigov react core components",
   "author": "GRNET Developers <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
   "main": "./cjs/index.js",
   "module": "./index.js",
   "peerDependencies": {
-    "@digigov/css": "2.0.0-76ec20a0",
-    "@digigov/react-icons": "2.0.0-76ec20a0",
+    "@digigov/css": "2.0.0-7d765d3c",
+    "@digigov/react-icons": "2.0.0-7d765d3c",
     "clsx": "1.1.1",
-    "react": ">=16.8.0 <19.0.0",
-    "react-dom": ">=16.8.0 <19.0.0",
+    "react": "^18.3.0 || ^19.1.0",
+    "react-dom": "^18.3.0 || ^19.1.0",
     "react-native-svg": "^15.2.0",
     "expo-router": "^3.5.14",
     "nativewind": "^4.1.1"

package/registry/index.js

@@ -4,9 +4,9 @@ import * as _digigov_react_core_Accordion from "@digigov/react-core/Accordion";
 import * as _digigov_react_core_Accordion_index_web from "@digigov/react-core/Accordion/index.web";
 import * as _digigov_react_core_AccordionControls from "@digigov/react-core/AccordionControls";
 import * as _digigov_react_core_AccordionSectionContent from "@digigov/react-core/AccordionSectionContent";
-import * as _digigov_react_core_AccordionSectionSummary from "@digigov/react-core/AccordionSectionSummary";
 import * as _digigov_react_core_AccordionSection from "@digigov/react-core/AccordionSection";
 import * as _digigov_react_core_AccordionSection_index_web from "@digigov/react-core/AccordionSection/index.web";
+import * as _digigov_react_core_AccordionSectionSummary from "@digigov/react-core/AccordionSectionSummary";
 import * as _digigov_react_core_AccordionSectionSummaryHeading from "@digigov/react-core/AccordionSectionSummaryHeading";
 import * as _digigov_react_core_AdminAside from "@digigov/react-core/AdminAside";
 import * as _digigov_react_core_AdminContainer from "@digigov/react-core/AdminContainer";
@@ -19,7 +19,6 @@ import * as _digigov_react_core_Aside from "@digigov/react-core/Aside";
 import * as _digigov_react_core_AutoCompleteAssistiveHint from "@digigov/react-core/AutoCompleteAssistiveHint";
 import * as _digigov_react_core_AutoCompleteContainer from "@digigov/react-core/AutoCompleteContainer";
 import * as _digigov_react_core_AutoCompleteInputBase from "@digigov/react-core/AutoCompleteInputBase";
-import * as _digigov_react_core_AutoCompleteInputTypeahead from "@digigov/react-core/AutoCompleteInputTypeahead";
 import * as _digigov_react_core_AutoCompleteMultipleInput from "@digigov/react-core/AutoCompleteMultipleInput";
 import * as _digigov_react_core_AutoCompleteMultipleInputContainer from "@digigov/react-core/AutoCompleteMultipleInputContainer";
 import * as _digigov_react_core_AutoCompleteResultList from "@digigov/react-core/AutoCompleteResultList";
@@ -61,7 +60,7 @@ import * as _digigov_react_core_ChipContainer from "@digigov/react-core/ChipCont
 import * as _digigov_react_core_ChipHeading from "@digigov/react-core/ChipHeading";
 import * as _digigov_react_core_ChipKeyValue from "@digigov/react-core/ChipKeyValue";
 import * as _digigov_react_core_ChoiceDividerText from "@digigov/react-core/ChoiceDividerText";
-import * as _digigov_react_core_CircularProgress from "@digigov/react-core/CircularProgress";
+import * as _digigov_react_core_CircularProgressBase from "@digigov/react-core/CircularProgressBase";
 import * as _digigov_react_core_CloseButton from "@digigov/react-core/CloseButton";
 import * as _digigov_react_core_Code from "@digigov/react-core/Code";
 import * as _digigov_react_core_CodeBlockContainer from "@digigov/react-core/CodeBlockContainer";
@@ -288,9 +287,9 @@ export default {
   '@digigov/react-core/Accordion/index.web': lazyImport(_digigov_react_core_Accordion_index_web),
   '@digigov/react-core/AccordionControls': lazyImport(_digigov_react_core_AccordionControls),
   '@digigov/react-core/AccordionSectionContent': lazyImport(_digigov_react_core_AccordionSectionContent),
-  '@digigov/react-core/AccordionSectionSummary': lazyImport(_digigov_react_core_AccordionSectionSummary),
   '@digigov/react-core/AccordionSection': lazyImport(_digigov_react_core_AccordionSection),
   '@digigov/react-core/AccordionSection/index.web': lazyImport(_digigov_react_core_AccordionSection_index_web),
+  '@digigov/react-core/AccordionSectionSummary': lazyImport(_digigov_react_core_AccordionSectionSummary),
   '@digigov/react-core/AccordionSectionSummaryHeading': lazyImport(_digigov_react_core_AccordionSectionSummaryHeading),
   '@digigov/react-core/AdminAside': lazyImport(_digigov_react_core_AdminAside),
   '@digigov/react-core/AdminContainer': lazyImport(_digigov_react_core_AdminContainer),
@@ -303,7 +302,6 @@ export default {
   '@digigov/react-core/AutoCompleteAssistiveHint': lazyImport(_digigov_react_core_AutoCompleteAssistiveHint),
   '@digigov/react-core/AutoCompleteContainer': lazyImport(_digigov_react_core_AutoCompleteContainer),
   '@digigov/react-core/AutoCompleteInputBase': lazyImport(_digigov_react_core_AutoCompleteInputBase),
-  '@digigov/react-core/AutoCompleteInputTypeahead': lazyImport(_digigov_react_core_AutoCompleteInputTypeahead),
   '@digigov/react-core/AutoCompleteMultipleInput': lazyImport(_digigov_react_core_AutoCompleteMultipleInput),
   '@digigov/react-core/AutoCompleteMultipleInputContainer': lazyImport(_digigov_react_core_AutoCompleteMultipleInputContainer),
   '@digigov/react-core/AutoCompleteResultList': lazyImport(_digigov_react_core_AutoCompleteResultList),
@@ -345,7 +343,7 @@ export default {
   '@digigov/react-core/ChipHeading': lazyImport(_digigov_react_core_ChipHeading),
   '@digigov/react-core/ChipKeyValue': lazyImport(_digigov_react_core_ChipKeyValue),
   '@digigov/react-core/ChoiceDividerText': lazyImport(_digigov_react_core_ChoiceDividerText),
-  '@digigov/react-core/CircularProgress': lazyImport(_digigov_react_core_CircularProgress),
+  '@digigov/react-core/CircularProgressBase': lazyImport(_digigov_react_core_CircularProgressBase),
   '@digigov/react-core/CloseButton': lazyImport(_digigov_react_core_CloseButton),
   '@digigov/react-core/Code': lazyImport(_digigov_react_core_Code),
   '@digigov/react-core/CodeBlockContainer': lazyImport(_digigov_react_core_CodeBlockContainer),

package/src/AccordionSectionSummaryHeading/index.tsx

@@ -2,7 +2,13 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface AccordionSectionSummaryHeadingProps extends BaseProps<'h2'> {}
+export interface AccordionSectionSummaryHeadingProps extends BaseProps<'h2'> {
+  /*
+   * The type of the icon to be displayed on the right side of the heading.
+   * @default 'default'
+   */
+  variant?: 'default' | 'arrows';
+}
 /**
  * AccordionSectionSummaryHeading should be placed inside AccordionSectionSummary.
  */
@@ -10,7 +16,7 @@ export const AccordionSectionSummaryHeading = React.forwardRef<
   HTMLHeadingElement,
   AccordionSectionSummaryHeadingProps
 >(function AccordionSectionSummaryHeading(
-  { className, children, ...props },
+  { variant, className, children, ...props },
   ref
 ) {
   return (
@@ -27,6 +33,7 @@ export const AccordionSectionSummaryHeading = React.forwardRef<
         as="span"
         className={clsx({
           'ds-accordion__section-button': true,
+          'ds-accordion__section-button--arrows': variant === 'arrows',
         })}
       >
         {children}

package/src/BannerContainer/__snapshots__/index.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`renders the BannerContainer with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-cookie-banner"
+      class="ds-banner-container"
     >
       hello
     </div>

package/src/BannerContainer/index.tsx

@@ -13,7 +13,7 @@ export const BannerContainer = React.forwardRef<
       as="div"
       ref={ref}
       className={clsx(className, {
-        'ds-cookie-banner': true,
+        'ds-banner-container': true,
       })}
       {...props}
     >

package/src/Base/compat/Input/CheckboxInput.native.tsx

@@ -1,8 +1,4 @@
-import React, {
-  DetailedHTMLProps,
-  InputHTMLAttributes,
-  LegacyRef,
-} from 'react';
+import React, { DetailedHTMLProps, InputHTMLAttributes, Ref } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 
 export type CheckboxInputProps = Omit<
@@ -28,7 +24,7 @@ export const CheckboxInput = React.forwardRef<
   return (
     // @ts-ignore
     <TouchableOpacity
-      ref={ref as LegacyRef<TouchableOpacity>}
+      ref={ref as Ref<TouchableOpacity>}
       onPress={handlePress}
       {...props}
     >

package/src/Base/compat/Input/RadioInput.native.tsx

@@ -1,8 +1,4 @@
-import React, {
-  DetailedHTMLProps,
-  InputHTMLAttributes,
-  LegacyRef,
-} from 'react';
+import React, { DetailedHTMLProps, InputHTMLAttributes, Ref } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 
 export type RadioInputProps = Omit<
@@ -26,7 +22,7 @@ export const RadioInput = React.forwardRef<HTMLInputElement, RadioInputProps>(
 
     return (
       <TouchableOpacity
-        ref={ref as LegacyRef<typeof TouchableOpacity>}
+        ref={ref as Ref<typeof TouchableOpacity>}
         onPress={handlePress}
         {...(props as any)}
       >

package/src/Base/index.native.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, type JSX } from 'react';
 import { Text, View, ViewProps } from 'react-native';
 import { BaseProps as CoreBaseProps } from '@digigov/react-core/Base/index.web';
 import { mapping } from '@digigov/react-core/Base/mapping.native';
@@ -22,7 +22,7 @@ const BooleanMapper = {
 const textHtmlTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'p', 'span'];
 
 export const Base: BaseComponent = React.forwardRef(function Base<
-  C extends React.ElementType = 'span',
+  C extends React.ElementType,
 >(
   {
     as,

package/src/Base/index.web.tsx

@@ -162,7 +162,7 @@ type BaseComponent = <C extends React.ElementType = 'span'>(
 ) => React.ReactNode | null;
 
 export const Base: BaseComponent = React.forwardRef(function Base<
-  C extends React.ElementType = 'span',
+  C extends React.ElementType,
 >(
   {
     as,

package/src/Base/mapping.native.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { Link } from 'expo-router';
 import { cssInterop } from 'nativewind';
 import { Image, View } from 'react-native';

package/src/Button/index.tsx

@@ -56,6 +56,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         className={clsx(className, {
           'ds-link': variant === 'link',
           'ds-link-warning': variant === 'link' && color === 'warning',
+          'ds-link--disabled': variant === 'link' && disabled,
           'ds-btn': variant === 'button',
           'ds-btn--dense': dense,
           'ds-btn-primary': variant === 'button' && color === 'primary',

package/src/Checkbox/__snapshots__/index.test.tsx.snap

@@ -16,7 +16,6 @@ exports[`renders the Checkbox with dense prop and CheckboxItems 1`] = `
           <input
             class="ds-checkboxes__input"
             type="checkbox"
-            value=""
           />
         </label>
       </div>
@@ -30,7 +29,6 @@ exports[`renders the Checkbox with dense prop and CheckboxItems 1`] = `
           <input
             class="ds-checkboxes__input"
             type="checkbox"
-            value=""
           />
         </label>
       </div>
@@ -55,7 +53,6 @@ exports[`renders the Checkbox with layout=horizontal and CheckboxItems 1`] = `
           <input
             class="ds-checkboxes__input"
             type="checkbox"
-            value=""
           />
         </label>
       </div>
@@ -69,7 +66,6 @@ exports[`renders the Checkbox with layout=horizontal and CheckboxItems 1`] = `
           <input
             class="ds-checkboxes__input"
             type="checkbox"
-            value=""
           />
         </label>
       </div>
@@ -106,7 +102,6 @@ exports[`renders the Checkbox with no props and CheckboxItem 1`] = `
           <input
             class="ds-checkboxes__input"
             type="checkbox"
-            value=""
           />
         </label>
       </div>

package/src/CheckboxItem/__snapshots__/index.test.tsx.snap

@@ -14,7 +14,6 @@ exports[`renders the CheckboxItem with \`disabled\` prop 1`] = `
           class="ds-checkboxes__input"
           disabled=""
           type="checkbox"
-          value=""
         />
       </label>
     </div>
@@ -40,7 +39,6 @@ exports[`renders the CheckboxItem with \`divider\` prop 1`] = `
         <input
           class="ds-checkboxes__input"
           type="checkbox"
-          value=""
         />
       </label>
     </div>
@@ -62,7 +60,6 @@ exports[`renders the CheckboxItem with \`name\` prop 1`] = `
           class="ds-checkboxes__input"
           name="example"
           type="checkbox"
-          value=""
         />
       </label>
     </div>
@@ -155,7 +152,6 @@ exports[`renders the CheckboxItem with no props 1`] = `
         <input
           class="ds-checkboxes__input"
           type="checkbox"
-          value=""
         />
       </label>
     </div>

package/src/{CircularProgress → CircularProgressBase}/__snapshots__/index.test.tsx.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`renders the CircularProgress 1`] = `
+exports[`renders the CircularProgressBase 1`] = `
 <body>
   <div>
     <svg
@@ -22,7 +22,7 @@ exports[`renders the CircularProgress 1`] = `
 </body>
 `;
 
-exports[`renders the CircularProgress with color=secondary and size lg props 1`] = `
+exports[`renders the CircularProgressBase with color=secondary and size lg props 1`] = `
 <body>
   <div>
     <svg
@@ -44,7 +44,7 @@ exports[`renders the CircularProgress with color=secondary and size lg props 1`]
 </body>
 `;
 
-exports[`renders the CircularProgress with color=secondary and size sm props 1`] = `
+exports[`renders the CircularProgressBase with color=secondary and size sm props 1`] = `
 <body>
   <div>
     <svg
@@ -66,7 +66,7 @@ exports[`renders the CircularProgress with color=secondary and size sm props 1`]
 </body>
 `;
 
-exports[`renders the CircularProgress with color=secondary prop 1`] = `
+exports[`renders the CircularProgressBase with color=secondary prop 1`] = `
 <body>
   <div>
     <svg
@@ -88,7 +88,7 @@ exports[`renders the CircularProgress with color=secondary prop 1`] = `
 </body>
 `;
 
-exports[`renders the CircularProgress with size lg 1`] = `
+exports[`renders the CircularProgressBase with size lg 1`] = `
 <body>
   <div>
     <svg
@@ -110,7 +110,7 @@ exports[`renders the CircularProgress with size lg 1`] = `
 </body>
 `;
 
-exports[`renders the CircularProgress with size sm 1`] = `
+exports[`renders the CircularProgressBase with size sm 1`] = `
 <body>
   <div>
     <svg

package/src/CircularProgressBase/index.test.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import CircularProgressBase from '@digigov/react-core/CircularProgressBase';
+
+it('renders the CircularProgressBase', () => {
+  expect(render(<CircularProgressBase />).baseElement).toMatchSnapshot();
+});
+
+it('renders the CircularProgressBase with size sm', () => {
+  expect(
+    render(<CircularProgressBase size="sm" />).baseElement
+  ).toMatchSnapshot();
+});
+
+it('renders the CircularProgressBase with size lg', () => {
+  expect(
+    render(<CircularProgressBase size="lg" />).baseElement
+  ).toMatchSnapshot();
+});
+
+it('renders the CircularProgressBase with color=secondary prop', () => {
+  expect(
+    render(<CircularProgressBase color={'secondary'} />).baseElement
+  ).toMatchSnapshot();
+});
+
+it('renders the CircularProgressBase with color=secondary and size sm props', () => {
+  expect(
+    render(<CircularProgressBase color={'secondary'} size="sm" />).baseElement
+  ).toMatchSnapshot();
+});
+
+it('renders the CircularProgressBase with color=secondary and size lg props', () => {
+  expect(
+    render(<CircularProgressBase color={'secondary'} size="lg" />).baseElement
+  ).toMatchSnapshot();
+});

package/src/{CircularProgress → CircularProgressBase}/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface CircularProgressProps extends BaseProps<'svg'> {
+export interface CircularProgressBaseProps extends BaseProps<'svg'> {
   /**
    * color prop is optional.
    * color prop is used to change the color of the loader.
@@ -22,12 +22,12 @@ export interface CircularProgressProps extends BaseProps<'svg'> {
   size?: 'sm' | 'md' | 'lg';
 }
 /**
- * Use CircularProgress component as an animated loader.
- *  CircularProgress can be used inside LoaderContainer component.
+ * Use CircularProgressBase component as an animated loader.
+ *  CircularProgressBase can be used inside LoaderContainer component.
  */
-export const CircularProgress = React.forwardRef<
-  SVGSVGElement,
-  CircularProgressProps
+export const CircularProgressBase = React.forwardRef<
+  SVGElement,
+  CircularProgressBaseProps
 >(function CircularProgress(
   { color = 'primary', size = 'md', className, ...props },
   ref
@@ -60,4 +60,4 @@ export const CircularProgress = React.forwardRef<
   );
 });
 
-export default CircularProgress;
+export default CircularProgressBase;

package/src/DetailsContent/index.tsx

@@ -2,7 +2,15 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface DetailsContentProps extends BaseProps<'div'> {}
+export interface DetailsContentProps extends BaseProps<'div'> {
+  /*
+   ** color is optional. Default value is 'primary'.
+   * @value 'primary'
+   * @value 'secondary'
+   * @default 'primary'
+   * */
+  color?: 'primary' | 'secondary';
+}
 /**
  *DetailsContent component wraps the content text.
  *It is used inside Details component as children
@@ -10,13 +18,14 @@ export interface DetailsContentProps extends BaseProps<'div'> {}
 export const DetailsContent = React.forwardRef<
   HTMLDivElement,
   DetailsContentProps
->(function DetailsContent({ className, children, ...props }, ref) {
+>(function DetailsContent({ color, className, children, ...props }, ref) {
   return (
     <Base
       as="div"
       ref={ref}
       className={clsx(className, {
         'ds-details__content': true,
+        'ds-details__content--secondary': color === 'secondary',
       })}
       {...props}
     >

package/src/Grid/index.tsx

@@ -32,13 +32,7 @@ export interface GridProps extends BaseProps<'div' | 'aside' | 'main'> {
   inline?: boolean;
   /**
    * Defines the space between the type item components. It can only be used on a type container component.
-   * @value 1
-   * @value 2
-   * @value 4
-   * @value 6
-   * @value 8
-   * @value 10
-   * @value 12
+   * @value 1 - 12
    * @value object
    * @default undefined
    */

package/src/LinkBase/index.tsx

@@ -35,6 +35,7 @@ export const LinkBase = React.forwardRef<HTMLAnchorElement, LinkBaseProps>(
           'ds-link': defaultStyle,
           'ds-link--no-underline': !underline,
         })}
+        {...(props.as && { defaultStyle: defaultStyle, underline: underline })}
         {...props}
       >
         {children}

package/src/RadioItem/__snapshots__/index.test.tsx.snap

@@ -18,7 +18,6 @@ exports[`renders the RadioItem  \`dividerText\` props 1`] = `
         <input
           class="ds-radios__input"
           type="radio"
-          value=""
         />
       </label>
     </div>
@@ -89,7 +88,6 @@ exports[`renders the RadioItem with disabled prop 1`] = `
           class="ds-radios__input"
           disabled=""
           type="radio"
-          value=""
         />
       </label>
     </div>
@@ -111,7 +109,6 @@ exports[`renders the RadioItem with name  props 1`] = `
           class="ds-radios__input"
           name="name"
           type="radio"
-          value=""
         />
       </label>
     </div>
@@ -177,7 +174,6 @@ exports[`renders the RadioItem with no props 1`] = `
         <input
           class="ds-radios__input"
           type="radio"
-          value=""
         />
       </label>
     </div>

package/src/Table/index.tsx

@@ -47,6 +47,15 @@ export interface TableProps extends BaseProps<'table'> {
    * @default 'default'
    */
   variant?: 'zebra' | 'default';
+  /**
+   * verticalAlign is optional.
+   * The verticalAlign property sets vertical alignment of the table-cells.
+   * @value 'top'
+   * @value 'middle'
+   * @value 'bottom'
+   * @default 'middle'
+   */
+  verticalAlign?: 'top' | 'middle' | 'bottom';
 }
 /**
  * Table component is used to wrap the sub components of a table
@@ -59,6 +68,7 @@ export const Table = React.forwardRef<HTMLTableElement, TableProps>(
       dense = false,
       verticalBorders = false,
       stacked = 'never',
+      verticalAlign = 'middle',
       className,
       children,
       ...props
@@ -79,6 +89,8 @@ export const Table = React.forwardRef<HTMLTableElement, TableProps>(
           'ds-table--dense': dense,
           'ds-table--zebra': variant === 'zebra',
           'ds-table--vertical-lines': verticalBorders,
+          'ds-table--align-top': verticalAlign === 'top',
+          'ds-table--align-bottom': verticalAlign === 'bottom',
         })}
         {...props}
       >

package/src/TableDataCell/__snapshots__/index.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`renders the Table with dataType numeric prop 1`] = `
           class="ds-table__row"
         >
           <td
-            class="ds-table__cell ds-table__cell--numeric"
+            class="ds-table__cell ds-table__cell--border ds-table__cell--numeric"
           >
             hello
           </td>
@@ -37,7 +37,7 @@ exports[`renders the Table with no props 1`] = `
           class="ds-table__row"
         >
           <td
-            class="ds-table__cell"
+            class="ds-table__cell ds-table__cell--border"
           >
             hello
           </td>

package/src/TableDataCell/index.tsx

@@ -13,6 +13,19 @@ export interface TableDataCellProps extends BaseProps<'td'> {
    * @default 'text'
    */
   dataType?: 'text' | 'numeric';
+  /**
+   * variant is optional.
+   * Use this prop to control the bottom border of the table-cell.
+   * @value 'border'
+   * @value 'none'
+   * @default 'border'
+   */
+  variant?: 'border' | 'none';
+  /**
+   * wordBreak is optional.
+   * Use this prop to control the word break of the table-cell contents.
+   */
+  wordBreak?: 'break-all' | 'none';
 }
 /**
  * Use TableDataCell inside the Table component to fill the data of a cell in a table.
@@ -21,7 +34,14 @@ export const TableDataCell = React.forwardRef<
   HTMLTableCellElement,
   TableDataCellProps
 >(function TableDataCell(
-  { dataType = 'text', className, children, ...props },
+  {
+    dataType = 'text',
+    variant = 'border',
+    wordBreak = 'none',
+    className,
+    children,
+    ...props
+  },
   ref
 ) {
   return (
@@ -30,6 +50,8 @@ export const TableDataCell = React.forwardRef<
       ref={ref}
       className={clsx(className, {
         'ds-table__cell': true,
+        'ds-table__cell--border': variant === 'border',
+        'ds-table__cell--break-all': wordBreak === 'break-all',
         'ds-table__cell--numeric': dataType === 'numeric',
       })}
       {...props}