@am92/react-design-system 2.7.8 → 2.8.0

package/dist/Components/DsProgressTracker/DsProgressTracker.Component.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PureComponent } from 'react';
+import { useState } from 'react';
 import { DsProgressTrackerDefaultProps } from './DsProgressTracker.Types';
 import { DsProgressStepper } from './DsProgressStepper.Component';
 import { DsProgressIndicator } from '../DsProgressIndicator';
@@ -7,38 +7,31 @@ import { DsCollapse } from '../DsCollapse';
 import { DsBox } from '../DsBox';
 import { DsTypography } from '../DsTypography';
 import { DsStack } from '../DsStack';
-export class DsProgressTracker extends PureComponent {
-    static defaultProps = DsProgressTrackerDefaultProps;
-    constructor(props) {
-        super(props);
-        const state = {
-            open: props['ds-variant'] === 'steps' ? true : false
-        };
-        this.state = state;
-    }
-    getMergedProps = () => {
+export const DsProgressTracker = (inProps) => {
+    const props = { ...DsProgressTrackerDefaultProps, ...inProps };
+    const [open, setOpen] = useState(props['ds-variant'] === 'steps' ? true : false);
+    const getMergedProps = () => {
         return {
             ...DsProgressTrackerDefaultProps,
-            ...this.props,
+            ...props,
             StepperProps: {
                 ...DsProgressTrackerDefaultProps?.StepperProps,
-                ...this.props?.StepperProps
+                ...props?.StepperProps
             }
         };
     };
-    handleToggleCollapse = () => this.setState({ open: !this.state.open });
-    renderStepper = () => {
-        const mergedProps = this.getMergedProps();
+    const handleToggleCollapse = () => setOpen(!open);
+    const renderStepper = () => {
+        const mergedProps = getMergedProps();
         // Don Not Render steps if variant is `header`
         if (mergedProps['ds-variant'] === 'header') {
             return null;
         }
         const { StepperProps, activeStep, steps } = mergedProps;
-        const { open } = this.state;
         return (_jsx(DsCollapse, { in: open, children: _jsx(DsProgressStepper, { activeStep: activeStep, steps: steps, ...StepperProps }) }));
     };
-    renderHeader = () => {
-        const mergedProps = this.getMergedProps();
+    const renderHeader = () => {
+        const mergedProps = getMergedProps();
         // Don Not Render Header if variant is `steps`
         if (mergedProps['ds-variant'] === 'steps') {
             return null;
@@ -55,13 +48,11 @@ export class DsProgressTracker extends PureComponent {
                 borderBottom: '1px solid var(--ds-colour-strokeDefault)',
                 backgroundColor: 'var(--ds-colour-surfaceBackground)',
                 cursor: mergedProps['ds-variant'] === 'default' ? 'pointer' : 'unset'
-            }, spacing: "var(--ds-spacing-bitterCold)", direction: "row", onClick: this.handleToggleCollapse, children: [_jsx(DsProgressIndicator, { activeStep: activeStep + 1, steps: steps.length }), _jsxs(DsStack, { flexGrow: 1, direction: "column", spacing: "var(--ds-spacing-quickFreeze)", children: [_jsx(DsTypography, { component: "div", textAlign: "right", color: "var(--ds-colour-actionSecondary)", variant: "headingBoldExtraSmall", children: currentStep.stepName }), haveNextStep && (_jsx(DsTypography, { component: "div", textAlign: "right", color: "var(--ds-colour-typoTertiary)", variant: "subheadingSemiboldDefault", children: isNextStepLastStep
+            }, spacing: "var(--ds-spacing-bitterCold)", direction: "row", onClick: handleToggleCollapse, children: [_jsx(DsProgressIndicator, { activeStep: activeStep + 1, steps: steps.length }), _jsxs(DsStack, { flexGrow: 1, direction: "column", spacing: "var(--ds-spacing-quickFreeze)", children: [_jsx(DsTypography, { component: "div", textAlign: "right", color: "var(--ds-colour-actionSecondary)", variant: "headingBoldExtraSmall", children: currentStep.stepName }), haveNextStep && (_jsx(DsTypography, { component: "div", textAlign: "right", color: "var(--ds-colour-typoTertiary)", variant: "subheadingSemiboldDefault", children: isNextStepLastStep
                                 ? 'Yay! you are almost done'
                                 : `${nextStepLabelPrefix}${nextStep.stepName}` }))] })] }));
     };
-    render() {
-        const mergedProps = this.props;
-        const { sx } = mergedProps;
-        return (_jsxs(DsBox, { sx: { width: '100%', ...sx }, children: [this.renderHeader(), this.renderStepper()] }));
-    }
-}
+    const mergedProps = props;
+    const { sx } = mergedProps;
+    return (_jsxs(DsBox, { sx: { width: '100%', ...sx }, children: [renderHeader(), renderStepper()] }));
+};

package/dist/Components/DsRadio/DsRadio.Component.d.ts

@@ -1,6 +1,3 @@
-import { PureComponent } from 'react';
+import { FC } from 'react';
 import { DsRadioProps } from './DsRadio.Types';
-export declare class DsRadio extends PureComponent<DsRadioProps> {
-    static defaultProps: DsRadioProps;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+export declare const DsRadio: FC<DsRadioProps>;

package/dist/Components/DsRadio/DsRadio.Component.js

@@ -1,13 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PureComponent } from 'react';
 import Radio from '@mui/material/Radio';
 import { DsRadioDefaultProps } from './DsRadio.Types';
 import { DsFormControlLabel } from '../DsFormControlLabel';
 import { DsRemixIcon } from '../DsRemixIcon';
-export class DsRadio extends PureComponent {
-    static defaultProps = DsRadioDefaultProps;
-    render() {
-        const { disabled, RadioProps, ...restProps } = this.props;
-        return (_jsx(DsFormControlLabel, { ...restProps, disabled: disabled, control: _jsx(Radio, { icon: _jsx(DsRemixIcon, { className: "ri-checkbox-blank-circle-line", sx: { fontSize: 'var(--ds-typo-fontSizeBitterCold)' } }), checkedIcon: _jsx(DsRemixIcon, { className: "ri-radio-button-line", sx: { fontSize: 'var(--ds-typo-fontSizeBitterCold)' } }), color: "secondary", ...RadioProps, disabled: disabled }) }));
-    }
-}
+export const DsRadio = (inProps) => {
+    const props = { ...inProps, ...DsRadioDefaultProps };
+    const { disabled, RadioProps, ...restProps } = props;
+    return (_jsx(DsFormControlLabel, { ...restProps, disabled: disabled, control: _jsx(Radio, { icon: _jsx(DsRemixIcon, { className: "ri-checkbox-blank-circle-line", sx: { fontSize: 'var(--ds-typo-fontSizeBitterCold)' } }), checkedIcon: _jsx(DsRemixIcon, { className: "ri-radio-button-line", sx: { fontSize: 'var(--ds-typo-fontSizeBitterCold)' } }), color: "secondary", ...RadioProps, disabled: disabled }) }));
+};

package/dist/Components/DsRemixIcon/DsRemixIcon.Component.d.ts

@@ -1,5 +1,3 @@
-import { PureComponent } from 'react';
+import { FC } from 'react';
 import { DsRemixIconProps } from './DsRemixIcon.Types';
-export declare class DsRemixIcon extends PureComponent<DsRemixIconProps> {
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+export declare const DsRemixIcon: FC<DsRemixIconProps>;

package/dist/Components/DsRemixIcon/DsRemixIcon.Component.js

@@ -1,8 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PureComponent } from 'react';
-import { DsIcon } from '../DsIcon';
-export class DsRemixIcon extends PureComponent {
-    render() {
-        return _jsx(DsIcon, { baseClassName: "", ...this.props });
-    }
-}
+import { DsIcon, DsIconDefaultProps } from '../DsIcon';
+export const DsRemixIcon = (inProps) => {
+    const props = { ...DsIconDefaultProps, ...inProps };
+    return _jsx(DsIcon, { baseClassName: "", ...props });
+};

package/dist/Components/DsSelect/DsSelect.Component.d.ts

@@ -1,7 +1,3 @@
-import React, { PureComponent } from 'react';
+import { FC } from 'react';
 import { DsSelectProps } from './DsSelect.Types';
-export declare class DsSelect extends PureComponent<DsSelectProps> {
-    static defaultProps: DsSelectProps;
-    selectRef: React.RefObject<Element>;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+export declare const DsSelect: FC<DsSelectProps>;

package/dist/Components/DsSelect/DsSelect.Component.js

@@ -1,7 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { PureComponent } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
 import Select from '@mui/material/Select';
-import { DsSelectDefaultProps } from './DsSelect.Types';
 import { DsFormControl } from '../DsFormControl';
 import { DsInputLabel } from '../DsInputLabel';
 import { DsInputBase } from '../DsInputBase';
@@ -9,54 +8,51 @@ import { DsMenuItem } from '../DsMenuItem';
 import { DsTypography } from '../DsTypography';
 import { DsRemixIcon } from '../DsRemixIcon';
 import { DsHelperText } from '../DsHelperText';
-export class DsSelect extends PureComponent {
-    static defaultProps = DsSelectDefaultProps;
-    selectRef = React.createRef();
-    render() {
-        const { id, name, placeholder, label, labelSupportText, color, helperText, success, error, sx, fullWidth, children, options, disabled, FormControlProps, InputLabelProps, FormHelperTextProps, required, ...selectProps } = this.props;
-        const customColor = success ? 'success' : color;
-        const valueMap = options.reduce((acc, item) => {
-            acc.set(item.value, item.label);
-            return acc;
-        }, new Map());
-        return (_jsxs(DsFormControl, { fullWidth: fullWidth, color: customColor, error: error, sx: sx, disabled: disabled, required: required, ...FormControlProps, children: [_jsx(DsInputLabel, { label: label, labelSupportText: labelSupportText, error: error, success: success, htmlFor: id || name, disabled: disabled, ...InputLabelProps }), _jsxs(Select, { ref: this.selectRef, id: id, name: name, IconComponent: IconComponent, displayEmpty: true, input: _jsx(DsInputBase, {}), renderValue: value => {
-                        if (!value || (value instanceof Array && !value.length)) {
-                            return (_jsx(DsTypography, { variant: "bodyRegularMedium", color: "text.disabled", children: placeholder }));
-                        }
-                        if (value instanceof Array) {
-                            return (_jsx(SelectedValueArray, { selectedValue: value, valueMap: valueMap }));
-                        }
-                        return _jsx(SelectedValue, { selectedValue: value, valueMap: valueMap });
-                    }, error: error, disabled: disabled, ...selectProps, MenuProps: {
-                        anchorEl: () => this.selectRef.current,
-                        ...selectProps?.MenuProps,
-                        sx: {
-                            marginTop: 'var(--ds-spacing-glacial)',
-                            ...selectProps?.MenuProps?.sx
-                        }
-                    }, children: [children, options.map(({ label, value }, index) => (_jsx(DsMenuItem, { value: value, sx: {
-                                '&.Mui-selected': {
-                                    backgroundColor: 'transparent',
-                                    fontWeight: 'var(--ds-typo-bodyBoldMedium-fontWeight)',
-                                    fontSize: 'var(--ds-typo-bodyBoldMedium-fontSize)',
-                                    lineHeight: 'var(--ds-typo-bodyBoldMedium-lineHeight)',
-                                    letterSpacing: 'var(--ds-typo-bodyBoldMedium-letterSpacing)'
-                                }
-                            }, children: _jsx("span", { children: label }) }, index)))] }), _jsx(DsHelperText, { helperText: helperText, color: color, success: success, error: error, ...FormHelperTextProps })] }));
-    }
-}
-const IconComponent = (props) => {
-    return (_jsx(DsRemixIcon, { ...props, className: `${props.className} ri-arrow-down-s-line` }));
-};
-const SelectedValueArray = (props) => {
-    const { selectedValue, valueMap } = props;
-    const returnValue = selectedValue
-        .map(selectedVal => valueMap.get(selectedVal))
-        .join(', ');
-    return _jsx(_Fragment, { children: returnValue });
-};
-const SelectedValue = (props) => {
-    const { selectedValue, valueMap } = props;
-    const returnValue = valueMap.get(selectedValue);
-    return _jsx(_Fragment, { children: returnValue });
+export const DsSelect = (props) => {
+    const selectRef = useRef();
+    const { id, name, placeholder, label, labelSupportText, color, helperText, success, error, sx, fullWidth, children, options, disabled, FormControlProps, InputLabelProps, FormHelperTextProps, required, ...selectProps } = props;
+    const customColor = success ? 'success' : color;
+    const valueMap = options.reduce((acc, item) => {
+        acc.set(item.value, item.label);
+        return acc;
+    }, new Map());
+    const IconComponent = (props) => {
+        return (_jsx(DsRemixIcon, { ...props, className: `${props.className} ri-arrow-down-s-line` }));
+    };
+    const SelectedValueArray = (props) => {
+        const { selectedValue, valueMap } = props;
+        const returnValue = selectedValue
+            .map(selectedVal => valueMap.get(selectedVal))
+            .join(', ');
+        return _jsx(_Fragment, { children: returnValue });
+    };
+    const SelectedValue = (props) => {
+        const { selectedValue, valueMap } = props;
+        const returnValue = valueMap.get(selectedValue);
+        return _jsx(_Fragment, { children: returnValue });
+    };
+    return (_jsxs(DsFormControl, { fullWidth: fullWidth, color: customColor, error: error, sx: sx, disabled: disabled, required: required, ...FormControlProps, children: [_jsx(DsInputLabel, { label: label, labelSupportText: labelSupportText, error: error, success: success, htmlFor: id || name, disabled: disabled, ...InputLabelProps }), _jsxs(Select, { ref: selectRef, id: id, name: name, IconComponent: IconComponent, displayEmpty: true, input: _jsx(DsInputBase, {}), renderValue: value => {
+                    if (!value || (value instanceof Array && !value.length)) {
+                        return (_jsx(DsTypography, { variant: "bodyRegularMedium", color: "text.disabled", children: placeholder }));
+                    }
+                    if (value instanceof Array) {
+                        return (_jsx(SelectedValueArray, { selectedValue: value, valueMap: valueMap }));
+                    }
+                    return _jsx(SelectedValue, { selectedValue: value, valueMap: valueMap });
+                }, error: error, disabled: disabled, ...selectProps, MenuProps: {
+                    anchorEl: () => selectRef.current,
+                    ...selectProps?.MenuProps,
+                    sx: {
+                        marginTop: 'var(--ds-spacing-glacial)',
+                        ...selectProps?.MenuProps?.sx
+                    }
+                }, children: [children, options.map(({ label, value }, index) => (_jsx(DsMenuItem, { value: value, sx: {
+                            '&.Mui-selected': {
+                                backgroundColor: 'transparent',
+                                fontWeight: 'var(--ds-typo-bodyBoldMedium-fontWeight)',
+                                fontSize: 'var(--ds-typo-bodyBoldMedium-fontSize)',
+                                lineHeight: 'var(--ds-typo-bodyBoldMedium-lineHeight)',
+                                letterSpacing: 'var(--ds-typo-bodyBoldMedium-letterSpacing)'
+                            }
+                        }, children: _jsx("span", { children: label }) }, index)))] }), _jsx(DsHelperText, { helperText: helperText, color: color, success: success, error: error, ...FormHelperTextProps })] }));
 };

package/dist/Components/DsSelect/DsSelect.Types.d.ts

@@ -6,6 +6,14 @@ interface OptionProp {
     label: string;
     value: any;
 }
+export interface SelectedValueArrayProps {
+    selectedValue: any[];
+    valueMap: Map<any, string>;
+}
+export interface SelectedValueProps {
+    selectedValue: any;
+    valueMap: Map<any, string>;
+}
 export interface DsSelectProps extends Omit<SelectProps, 'ref'> {
     ref?: React.Ref<any>;
     FormControlProps?: Omit<DsFormControlProps, 'fullWidth' | 'color' | 'error' | 'disabled'>;

package/dist/Components/DsSlider/DsSlider.Component.d.ts

@@ -1,5 +1 @@
-import * as React from 'react';
-import { DsSliderProps } from './DsSlider.Types';
-export declare class DsSlider extends React.PureComponent<DsSliderProps> {
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+export { default as DsSlider } from '@mui/material/Slider';

package/dist/Components/DsSlider/DsSlider.Component.js

@@ -1,10 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { Slider } from '@mui/material';
-import { DsSliderDefaultProps } from './DsSlider.Types';
-export class DsSlider extends React.PureComponent {
-    render() {
-        const mergedProps = { ...DsSliderDefaultProps, ...this.props };
-        return _jsx(Slider, { ...mergedProps });
-    }
-}
+export { default as DsSlider } from '@mui/material/Slider';

package/dist/Components/DsSlider/DsSlider.Overrides.d.ts

@@ -1,7 +1,7 @@
 import { DsSliderProps } from './DsSlider.Types';
 export declare const DsSliderOverrides: {
     MuiSlider: {
-        defaultProps: {};
+        defaultProps: DsSliderProps;
         variants: {
             props: Partial<DsSliderProps>;
             style: {

package/dist/Components/DsSlider/DsSlider.Overrides.js

@@ -1,7 +1,7 @@
-import { DsSlideDefaultProps } from '../DsSlide/DsSlide.Types';
+import { DsSliderDefaultProps } from './DsSlider.Types';
 export const DsSliderOverrides = {
     MuiSlider: {
-        defaultProps: DsSlideDefaultProps,
+        defaultProps: DsSliderDefaultProps,
         variants: [
             {
                 props: { 'ds-mode': 'true' },

package/dist/Components/DsSwitch/DsSwitch.Component.d.ts

@@ -1,7 +1,3 @@
-import React, { PureComponent } from 'react';
+import { FC } from 'react';
 import { DsSwitchProps } from './DsSwitch.Types';
-export declare class DsSwitch extends PureComponent<DsSwitchProps> {
-    static defaultProps: DsSwitchProps;
-    handleChange: (event: React.SyntheticEvent, value: NonNullable<any>) => void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+export declare const DsSwitch: FC<DsSwitchProps>;

package/dist/Components/DsSwitch/DsSwitch.Component.js

@@ -1,17 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PureComponent } from 'react';
 import { DsSwitchDefaultProps } from './DsSwitch.Types';
 import { DsToggleButtonGroup } from '../DsToggleButtonGroup';
 import { DsToggleButton } from '../DsToggleButton';
 import { DsTypography } from '../DsTypography';
-export class DsSwitch extends PureComponent {
-    static defaultProps = DsSwitchDefaultProps;
-    handleChange = (event, value) => {
-        const { name, onChange } = this.props;
+export const DsSwitch = (inProps) => {
+    const props = { ...DsSwitchDefaultProps, ...inProps };
+    const handleChange = (event, value) => {
+        const { name, onChange } = props;
         onChange(name, value);
     };
-    render() {
-        const { positiveLabel, positiveValue, negativeLabel, negativeValue, ...restProps } = this.props;
-        return (_jsxs(DsToggleButtonGroup, { ...restProps, "ds-variant": "switch", exclusive: true, size: "small", onChange: this.handleChange, children: [_jsx(DsToggleButton, { value: positiveValue, children: _jsx(DsTypography, { variant: "supportBoldTextButton", children: positiveLabel }) }), _jsx(DsToggleButton, { value: negativeValue, children: _jsx(DsTypography, { variant: "supportBoldTextButton", children: negativeLabel }) })] }));
-    }
-}
+    const { positiveLabel, positiveValue, negativeLabel, negativeValue, ...restProps } = props;
+    return (_jsxs(DsToggleButtonGroup, { ...restProps, "ds-variant": "switch", exclusive: true, size: "small", onChange: handleChange, children: [_jsx(DsToggleButton, { value: positiveValue, children: _jsx(DsTypography, { variant: "supportBoldTextButton", children: positiveLabel }) }), _jsx(DsToggleButton, { value: negativeValue, children: _jsx(DsTypography, { variant: "supportBoldTextButton", children: negativeLabel }) })] }));
+};

package/dist/Components/DsTag/DsTag.Component.d.ts

@@ -1,8 +1,3 @@
-import { PureComponent } from 'react';
+import { FC } from 'react';
 import { DsTagProps } from './DsTag.Types';
-export declare class DsTag extends PureComponent<DsTagProps> {
-    static defaultProps: DsTagProps;
-    handleClick: () => void;
-    handleDelete: () => void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+export declare const DsTag: FC<DsTagProps>;

package/dist/Components/DsTag/DsTag.Component.js

@@ -1,25 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PureComponent } from 'react';
 import Chip from '@mui/material/Chip';
 import { DsTagDefaultProps } from './DsTag.Types';
 import { DsRemixIcon } from '../DsRemixIcon';
-export class DsTag extends PureComponent {
-    static defaultProps = DsTagDefaultProps;
-    handleClick = () => {
-        const { value, onClick } = this.props;
+export const DsTag = (inProps) => {
+    const props = { ...DsTagDefaultProps, ...inProps };
+    const handleClick = () => {
+        const { value, onClick } = props;
         if (typeof onClick === 'function') {
             onClick(value);
         }
     };
-    handleDelete = () => {
-        const { value, onDelete } = this.props;
+    const handleDelete = () => {
+        const { value, onDelete } = props;
         if (typeof onDelete === 'function') {
             onDelete(value);
         }
     };
-    render() {
-        const { selected, onClick, onDelete, ...chipProps } = this.props;
-        const color = (selected && 'secondary') || 'default';
-        return (_jsx(Chip, { deleteIcon: _jsx(DsRemixIcon, { className: "ri-close-circle-fill" }), skipFocusWhenDisabled: true, ...chipProps, clickable: true, color: color, onDelete: (onDelete && this.handleDelete) || undefined, onClick: this.handleClick }));
-    }
-}
+    const { selected, onClick, onDelete, ...chipProps } = props;
+    const color = (selected && 'secondary') || 'default';
+    return (_jsx(Chip, { deleteIcon: _jsx(DsRemixIcon, { className: "ri-close-circle-fill" }), skipFocusWhenDisabled: true, ...chipProps, clickable: true, color: color, onDelete: (onDelete && handleDelete) || undefined, onClick: handleClick }));
+};

package/dist/Components/DsTagGroup/DsTagGroup.Component.d.ts

@@ -1,8 +1,3 @@
-import { PureComponent } from 'react';
+import { FC } from 'react';
 import { DsTagGroupProps } from './DsTagGroup.Types';
-export declare class DsTagGroup extends PureComponent<DsTagGroupProps> {
-    static defaultProps: DsTagGroupProps;
-    handleUnselect: (handleValue: any) => void;
-    handleSelect: (handleValue: any) => void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+export declare const DsTagGroup: FC<DsTagGroupProps>;

package/dist/Components/DsTagGroup/DsTagGroup.Component.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { PureComponent } from 'react';
+import React from 'react';
 import { DsStack } from '../DsStack';
 import { DsTagGroupDefaultProps } from './DsTagGroup.Types';
 import { DsRemixIcon } from '../DsRemixIcon';
-export class DsTagGroup extends PureComponent {
-    static defaultProps = DsTagGroupDefaultProps;
-    handleUnselect = (handleValue) => {
-        const { name, value = [], onChange } = this.props;
-        const changedValue = value.filter((e) => e !== handleValue);
+export const DsTagGroup = (inProps) => {
+    const props = { ...DsTagGroupDefaultProps, ...inProps };
+    const handleUnselect = (handleValue) => {
+        const { name, value = [], onChange } = props;
+        const changedValue = value?.filter((e) => e !== handleValue);
         onChange(name, changedValue);
     };
-    handleSelect = (handleValue) => {
-        const { multi, name, value = [], onChange } = this.props;
+    const handleSelect = (handleValue) => {
+        const { multi, name, value = [], onChange } = props;
         let changedValue;
         if (multi) {
             changedValue = Array.from(new Set([...value, handleValue]));
@@ -21,22 +21,20 @@ export class DsTagGroup extends PureComponent {
         }
         onChange(name, changedValue);
     };
-    render() {
-        const { multi, children, value, name, onChange, ...restStackProps } = this.props;
-        const childrenArray = children instanceof Array ? children : [children];
-        return (_jsx(DsStack, { direction: 'row', spacing: 'var(--ds-spacing-glacial)', ...restStackProps, children: childrenArray.map(child => {
-                const { value: chipValue } = child.props;
-                const selected = (multi && value.includes(chipValue)) || value === chipValue;
-                const onDelete = (multi && selected && this.handleUnselect) || undefined;
-                const onClick = (selected && onDelete) || this.handleSelect;
-                const childClone = React.cloneElement(child, {
-                    value: chipValue,
-                    selected,
-                    deleteIcon: _jsx(DsRemixIcon, { className: "ri-close-circle-fill" }),
-                    onDelete,
-                    onClick
-                });
-                return childClone;
-            }) }));
-    }
-}
+    const { multi, children, value, name, onChange, ...restStackProps } = props;
+    const childrenArray = children instanceof Array ? children : [children];
+    return (_jsx(DsStack, { direction: 'row', spacing: 'var(--ds-spacing-glacial)', ...restStackProps, children: childrenArray.map(child => {
+            const { value: chipValue } = child.props;
+            const selected = (multi && value?.includes(chipValue)) || value === chipValue;
+            const onDelete = (multi && selected && handleUnselect) || undefined;
+            const onClick = (selected && onDelete) || handleSelect;
+            const childClone = React.cloneElement(child, {
+                value: chipValue,
+                selected,
+                deleteIcon: _jsx(DsRemixIcon, { className: "ri-close-circle-fill" }),
+                onDelete,
+                onClick
+            });
+            return childClone;
+        }) }));
+};

package/dist/Components/DsTextArea/DsTextArea.Component.d.ts

@@ -1,10 +1,3 @@
-import React, { PureComponent } from 'react';
-import { DsTextAreaProps, DsTextAreaState } from './DsTextArea.Types';
-export declare class DsTextArea extends PureComponent<DsTextAreaProps, DsTextAreaState> {
-    state: DsTextAreaState;
-    areRef: React.RefObject<unknown>;
-    handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: Readonly<DsTextAreaProps>, prevState: Readonly<DsTextAreaState>, snapshot?: any): void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+import { FC } from 'react';
+import { DsTextAreaProps } from './DsTextArea.Types';
+export declare const DsTextArea: FC<DsTextAreaProps>;

package/dist/Components/DsTextArea/DsTextArea.Component.js

@@ -1,67 +1,62 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { PureComponent } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { DsFormControl } from '../DsFormControl';
 import { DsTextField } from '../DsTextField';
 import { DsTypography } from '../DsTypography';
-import { DsTextAreaDefaultState } from './DsTextArea.Types';
-export class DsTextArea extends PureComponent {
-    state = DsTextAreaDefaultState;
-    areRef = React.createRef();
-    handleChange = (event) => {
-        const { onChange } = this.props;
+export const DsTextArea = (props) => {
+    const [count, setCount] = useState(0);
+    const areRef = useRef();
+    const handleChange = (event) => {
+        const { onChange } = props;
         const { target } = event;
         const { value = '' } = target;
-        let count = value.length;
-        this.setState({ count });
+        let count = value?.length;
+        setCount(count);
         if (onChange && typeof onChange === 'function') {
             onChange(event);
         }
     };
-    componentDidMount() {
-        const { value = '' } = this.props;
-        const count = value.length;
-        this.setState({ count });
-    }
-    componentDidUpdate(prevProps, prevState, snapshot) {
-        const { count: currentStateCount } = this.state;
-        const { value } = this.props;
+    useEffect(() => {
+        const { value = '' } = props;
         const count = value?.length;
-        if (count && currentStateCount !== count) {
-            this.setState({ count });
-        }
-    }
-    render() {
-        const { maxLength, hideCharacterCount, helperText, inputProps, ref, fullWidth, ...rest } = this.props;
-        const { count } = this.state;
-        // Provide counter if MaxLength Provided
-        const hasMaxLength = !!maxLength;
-        const maxLengthHandlingInputStyle = hasMaxLength
-            ? { mb: 'var(--ds-spacing-bittercold)' }
-            : {};
-        const counterStyle = {
-            position: 'absolute',
-            bottom: '8px',
-            right: '8px',
-            overflow: 'auto'
-        };
-        if (helperText) {
-            // Adjust the helper text size
-            counterStyle.bottom = 'calc(8px + 36px)';
+        setCount(count);
+    }, []);
+    useEffect(() => {
+        const { value } = props;
+        const stringCount = value?.length;
+        if (stringCount && count !== count) {
+            setCount(stringCount);
         }
-        return (_jsxs(DsFormControl, { fullWidth: fullWidth, children: [_jsx(DsTextField, { maxRows: 3, minRows: 3, ...rest, fullWidth: fullWidth, onChange: this.handleChange, multiline: true, inputProps: {
-                        ref: ref || this.areRef,
-                        ...inputProps,
-                        sx: {
-                            minWidth: '288px',
-                            ...maxLengthHandlingInputStyle,
-                            ...inputProps?.sx
-                        },
-                        maxLength: maxLength || ''
-                    }, helperText: helperText, 
-                    // TODO: To be fixed when we fix the sx passing to inputbase
-                    style: {
-                        paddingBottom: 'var(--ds-spacing-mild)',
-                        ...rest?.style
-                    } }), hasMaxLength && !hideCharacterCount && (_jsx(DsTypography, { sx: counterStyle, variant: "supportRegularFootnote", children: `${count}/${maxLength}` }))] }));
+    }, [count, props.value]);
+    const { maxLength, hideCharacterCount, helperText, inputProps, ref, fullWidth, ...rest } = props;
+    // Provide counter if MaxLength Provided
+    const hasMaxLength = !!maxLength;
+    const maxLengthHandlingInputStyle = hasMaxLength
+        ? { mb: 'var(--ds-spacing-bittercold)' }
+        : {};
+    const counterStyle = {
+        position: 'absolute',
+        bottom: '8px',
+        right: '8px',
+        overflow: 'auto'
+    };
+    if (helperText) {
+        // Adjust the helper text size
+        counterStyle.bottom = 'calc(8px + 36px)';
     }
-}
+    return (_jsxs(DsFormControl, { fullWidth: fullWidth, children: [_jsx(DsTextField, { maxRows: 3, minRows: 3, ...rest, fullWidth: fullWidth, onChange: handleChange, multiline: true, inputProps: {
+                    ref: ref || areRef,
+                    ...inputProps,
+                    sx: {
+                        minWidth: '288px',
+                        ...maxLengthHandlingInputStyle,
+                        ...inputProps?.sx
+                    },
+                    maxLength: maxLength || ''
+                }, helperText: helperText, 
+                // TODO: To be fixed when we fix the sx passing to inputbase
+                style: {
+                    paddingBottom: 'var(--ds-spacing-mild)',
+                    ...rest?.style
+                } }), hasMaxLength && !hideCharacterCount && (_jsx(DsTypography, { sx: counterStyle, variant: "supportRegularFootnote", children: `${count}/${maxLength}` }))] }));
+};