From fb5e3830b3940d0ce3f169625c3f60c4190d274c Mon Sep 17 00:00:00 2001
From: Alaa Yahia <alaay873@live.com>
Date: Mon, 8 Apr 2024 04:18:24 +0200
Subject: [PATCH 01/10] feat(Chip): libs-553 add chipGroup component

---
 components/chip/src/chip-group/chip-group.js  | 75 +++++++++++++++++++
 components/chip/src/chip-group/index.js       |  1 +
 components/chip/src/{ => chip}/chip.js        |  9 ++-
 .../chip/src/{ => chip}/chip.stories.e2e.js   |  0
 .../chip/src/{ => chip}/chip.stories.js       |  0
 components/chip/src/{ => chip}/content.js     |  0
 .../features/accepts_children.feature         |  0
 .../features/accepts_children/index.js        |  0
 .../{ => chip}/features/accepts_icon.feature  |  0
 .../{ => chip}/features/accepts_icon/index.js |  0
 .../{ => chip}/features/is_clickable.feature  |  0
 .../{ => chip}/features/is_clickable/index.js |  0
 .../{ => chip}/features/is_removable.feature  |  0
 .../{ => chip}/features/is_removable/index.js |  0
 components/chip/src/{ => chip}/icon.js        |  0
 components/chip/src/chip/index.js             |  1 +
 components/chip/src/{ => chip}/remove.js      |  0
 components/chip/src/index.js                  |  3 +-
 18 files changed, 85 insertions(+), 4 deletions(-)
 create mode 100644 components/chip/src/chip-group/chip-group.js
 create mode 100644 components/chip/src/chip-group/index.js
 rename components/chip/src/{ => chip}/chip.js (97%)
 rename components/chip/src/{ => chip}/chip.stories.e2e.js (100%)
 rename components/chip/src/{ => chip}/chip.stories.js (100%)
 rename components/chip/src/{ => chip}/content.js (100%)
 rename components/chip/src/{ => chip}/features/accepts_children.feature (100%)
 rename components/chip/src/{ => chip}/features/accepts_children/index.js (100%)
 rename components/chip/src/{ => chip}/features/accepts_icon.feature (100%)
 rename components/chip/src/{ => chip}/features/accepts_icon/index.js (100%)
 rename components/chip/src/{ => chip}/features/is_clickable.feature (100%)
 rename components/chip/src/{ => chip}/features/is_clickable/index.js (100%)
 rename components/chip/src/{ => chip}/features/is_removable.feature (100%)
 rename components/chip/src/{ => chip}/features/is_removable/index.js (100%)
 rename components/chip/src/{ => chip}/icon.js (100%)
 create mode 100644 components/chip/src/chip/index.js
 rename components/chip/src/{ => chip}/remove.js (100%)

diff --git a/components/chip/src/chip-group/chip-group.js b/components/chip/src/chip-group/chip-group.js
new file mode 100644
index 0000000000..859d49fe7a
--- /dev/null
+++ b/components/chip/src/chip-group/chip-group.js
@@ -0,0 +1,75 @@
+import { theme } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React, { useRef } from 'react'
+
+const ChipGroup = ({ className, dataTest, children }) => {
+    const chipContainer = useRef(null)
+
+    const handleKeyDown = (event) => {
+        const currentFocus = document.activeElement
+
+        if (chipContainer.current && chipContainer.current === currentFocus) {
+            const chips = Array.from(
+                chipContainer.current.querySelectorAll('[role="option"]')
+            )
+
+            chips[0].focus()
+            return
+        }
+
+        const role = currentFocus.getAttribute('role')
+
+        if (role !== 'option') {
+            return
+        }
+
+        const chips = Array.from(
+            chipContainer.current.querySelectorAll('[role="option"]')
+        )
+
+        const currentIndex = chips.indexOf(currentFocus)
+
+        if (event.key === 'ArrowRight') {
+            event.preventDefault()
+            const nextIndex = (currentIndex + 1) % chips.length
+            chips[nextIndex].focus()
+        }
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault()
+            const prevIndex = (currentIndex - 1 + chips.length) % chips.length
+            chips[prevIndex].focus()
+        }
+    }
+    return (
+        <div
+            className={className}
+            data-test={dataTest}
+            onKeyDown={handleKeyDown}
+            ref={chipContainer}
+            tabIndex={0}
+        >
+            {children}
+            <style jsx>{`
+                div {
+                    display: flex;
+                    gap: 4px;
+                }
+                div:focus {
+                    outline: 1px solid ${theme.focus};
+                }
+            `}</style>
+        </div>
+    )
+}
+
+ChipGroup.defaultProps = {
+    dataTest: 'dhis2-uicore-chipgroup',
+}
+
+ChipGroup.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+}
+
+export { ChipGroup }
diff --git a/components/chip/src/chip-group/index.js b/components/chip/src/chip-group/index.js
new file mode 100644
index 0000000000..d94f294e98
--- /dev/null
+++ b/components/chip/src/chip-group/index.js
@@ -0,0 +1 @@
+export { ChipGroup } from './chip-group.js'
diff --git a/components/chip/src/chip.js b/components/chip/src/chip/chip.js
similarity index 97%
rename from components/chip/src/chip.js
rename to components/chip/src/chip/chip.js
index 221bf677cd..8ab06c39e7 100644
--- a/components/chip/src/chip.js
+++ b/components/chip/src/chip/chip.js
@@ -27,7 +27,8 @@ const Chip = ({
     marginInlineStart,
     marginInlineEnd,
 }) => (
-    <span
+    <button
+        role="option"
         onClick={(e) => {
             if (!disabled && onClick) {
                 onClick({}, e)
@@ -40,13 +41,14 @@ const Chip = ({
             dragging,
         })}
         data-test={dataTest}
+        tabIndex={-1}
     >
         <Icon icon={icon} dataTest={`${dataTest}-icon`} />
         <Content overflow={overflow}>{children}</Content>
         <Remove onRemove={onRemove} dataTest={`${dataTest}-remove`} />
 
         <style jsx>{`
-            span {
+            button {
                 display: inline-flex;
                 align-items: center;
                 height: 32px;
@@ -57,6 +59,7 @@ const Chip = ({
                 cursor: pointer;
                 user-select: none;
                 color: ${colors.grey900};
+                padding: 0;
             }
 
             .dense {
@@ -111,7 +114,7 @@ const Chip = ({
                 ${marginTop && `margin-top: ${marginTop}px`}
             }
         `}</style>
-    </span>
+    </button>
 )
 
 Chip.defaultProps = {
diff --git a/components/chip/src/chip.stories.e2e.js b/components/chip/src/chip/chip.stories.e2e.js
similarity index 100%
rename from components/chip/src/chip.stories.e2e.js
rename to components/chip/src/chip/chip.stories.e2e.js
diff --git a/components/chip/src/chip.stories.js b/components/chip/src/chip/chip.stories.js
similarity index 100%
rename from components/chip/src/chip.stories.js
rename to components/chip/src/chip/chip.stories.js
diff --git a/components/chip/src/content.js b/components/chip/src/chip/content.js
similarity index 100%
rename from components/chip/src/content.js
rename to components/chip/src/chip/content.js
diff --git a/components/chip/src/features/accepts_children.feature b/components/chip/src/chip/features/accepts_children.feature
similarity index 100%
rename from components/chip/src/features/accepts_children.feature
rename to components/chip/src/chip/features/accepts_children.feature
diff --git a/components/chip/src/features/accepts_children/index.js b/components/chip/src/chip/features/accepts_children/index.js
similarity index 100%
rename from components/chip/src/features/accepts_children/index.js
rename to components/chip/src/chip/features/accepts_children/index.js
diff --git a/components/chip/src/features/accepts_icon.feature b/components/chip/src/chip/features/accepts_icon.feature
similarity index 100%
rename from components/chip/src/features/accepts_icon.feature
rename to components/chip/src/chip/features/accepts_icon.feature
diff --git a/components/chip/src/features/accepts_icon/index.js b/components/chip/src/chip/features/accepts_icon/index.js
similarity index 100%
rename from components/chip/src/features/accepts_icon/index.js
rename to components/chip/src/chip/features/accepts_icon/index.js
diff --git a/components/chip/src/features/is_clickable.feature b/components/chip/src/chip/features/is_clickable.feature
similarity index 100%
rename from components/chip/src/features/is_clickable.feature
rename to components/chip/src/chip/features/is_clickable.feature
diff --git a/components/chip/src/features/is_clickable/index.js b/components/chip/src/chip/features/is_clickable/index.js
similarity index 100%
rename from components/chip/src/features/is_clickable/index.js
rename to components/chip/src/chip/features/is_clickable/index.js
diff --git a/components/chip/src/features/is_removable.feature b/components/chip/src/chip/features/is_removable.feature
similarity index 100%
rename from components/chip/src/features/is_removable.feature
rename to components/chip/src/chip/features/is_removable.feature
diff --git a/components/chip/src/features/is_removable/index.js b/components/chip/src/chip/features/is_removable/index.js
similarity index 100%
rename from components/chip/src/features/is_removable/index.js
rename to components/chip/src/chip/features/is_removable/index.js
diff --git a/components/chip/src/icon.js b/components/chip/src/chip/icon.js
similarity index 100%
rename from components/chip/src/icon.js
rename to components/chip/src/chip/icon.js
diff --git a/components/chip/src/chip/index.js b/components/chip/src/chip/index.js
new file mode 100644
index 0000000000..8214f999ee
--- /dev/null
+++ b/components/chip/src/chip/index.js
@@ -0,0 +1 @@
+export { Chip } from './chip.js'
diff --git a/components/chip/src/remove.js b/components/chip/src/chip/remove.js
similarity index 100%
rename from components/chip/src/remove.js
rename to components/chip/src/chip/remove.js
diff --git a/components/chip/src/index.js b/components/chip/src/index.js
index 8214f999ee..9d4b3062bd 100644
--- a/components/chip/src/index.js
+++ b/components/chip/src/index.js
@@ -1 +1,2 @@
-export { Chip } from './chip.js'
+export { Chip } from './chip/index.js'
+export { ChipGroup } from './chip-group/index.js'

From a428d2b0019ad9185ab8fcd40cc0c3a854048c54 Mon Sep 17 00:00:00 2001
From: Alaa Yahia <alaay873@live.com>
Date: Mon, 8 Apr 2024 05:04:02 +0200
Subject: [PATCH 02/10] feat(Chip): libs-554 make chip keyboard accessible

---
 components/chip/src/chip/chip.js | 174 +++++++++++++++++--------------
 1 file changed, 93 insertions(+), 81 deletions(-)

diff --git a/components/chip/src/chip/chip.js b/components/chip/src/chip/chip.js
index 8ab06c39e7..0a2fb58d27 100644
--- a/components/chip/src/chip/chip.js
+++ b/components/chip/src/chip/chip.js
@@ -26,96 +26,108 @@ const Chip = ({
     marginTop,
     marginInlineStart,
     marginInlineEnd,
-}) => (
-    <button
-        role="option"
-        onClick={(e) => {
-            if (!disabled && onClick) {
-                onClick({}, e)
-            }
-        }}
-        className={cx(className, {
-            selected,
-            dense,
-            disabled,
-            dragging,
-        })}
-        data-test={dataTest}
-        tabIndex={-1}
-    >
-        <Icon icon={icon} dataTest={`${dataTest}-icon`} />
-        <Content overflow={overflow}>{children}</Content>
-        <Remove onRemove={onRemove} dataTest={`${dataTest}-remove`} />
+}) => {
+    const handleKeyDown = (event) => {
+        if (!onRemove) {
+            return
+        }
+        if (event.key === 'Backspace' || event.key === 'Delete') {
+            onRemove({}, event)
+        }
+    }
 
-        <style jsx>{`
-            button {
-                display: inline-flex;
-                align-items: center;
-                height: 32px;
-                border-radius: 16px;
-                background-color: ${colors.grey200};
-                font-size: 14px;
-                line-height: 16px;
-                cursor: pointer;
-                user-select: none;
-                color: ${colors.grey900};
-                padding: 0;
-            }
+    return (
+        <button
+            onClick={(e) => {
+                if (!disabled && onClick) {
+                    onClick({}, e)
+                }
+            }}
+            onKeyDown={handleKeyDown}
+            className={cx(className, {
+                selected,
+                dense,
+                disabled,
+                dragging,
+            })}
+            data-test={dataTest}
+            tabIndex={-1}
+            role="option"
+        >
+            <Icon icon={icon} dataTest={`${dataTest}-icon`} />
+            <Content overflow={overflow}>{children}</Content>
+            <Remove onRemove={onRemove} dataTest={`${dataTest}-remove`} />
 
-            .dense {
-                height: 24px;
-                font-size: 13px;
-                line-height: 15px;
-            }
+            <style jsx>{`
+                button {
+                    display: inline-flex;
+                    align-items: center;
+                    height: 32px;
+                    border-radius: 16px;
+                    background-color: ${colors.grey200};
+                    font-size: 14px;
+                    line-height: 16px;
+                    cursor: pointer;
+                    user-select: none;
+                    color: ${colors.grey900};
+                    padding: 0;
+                }
 
-            span:hover {
-                background-color: ${colors.grey300};
-            }
+                .dense {
+                    height: 24px;
+                    font-size: 13px;
+                    line-height: 15px;
+                }
 
-            .selected {
-                background-color: ${theme.secondary600};
-                font-weight: 500;
-            }
+                button:hover {
+                    background-color: ${colors.grey300};
+                }
 
-            .selected:hover {
-                background-color: #00695c;
-            }
+                .selected {
+                    background-color: ${theme.secondary600};
+                    font-weight: 500;
+                }
 
-            .selected,
-            .selected .icon,
-            .selected .remove-icon {
-                color: ${colors.white};
-            }
+                .selected:hover {
+                    background-color: #00695c;
+                }
 
-            .disabled {
-                cursor: not-allowed;
-                opacity: 0.3;
-            }
+                .selected,
+                .selected .icon,
+                .selected .remove-icon {
+                    color: ${colors.white};
+                }
 
-            .disabled .remove-icon {
-                pointer-events: none;
-            }
+                .disabled {
+                    cursor: not-allowed;
+                    opacity: 0.3;
+                }
 
-            .dragging {
-                box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
-                    0 2px 2px 0 rgba(0, 0, 0, 0.14),
-                    0 1px 5px 0 rgba(0, 0, 0, 0.12);
-            }
-        `}</style>
-        <style jsx>{`
-            span {
-                ${marginBottom && `margin-bottom: ${marginBottom}px;`}
-                margin-inline-start: ${marginInlineStart ??
-                marginLeft ??
-                DEFAULT_INLINE_MARGIN}px;
-                margin-inline-end: ${marginInlineEnd ??
-                marginRight ??
-                DEFAULT_INLINE_MARGIN}px;
-                ${marginTop && `margin-top: ${marginTop}px`}
-            }
-        `}</style>
-    </button>
-)
+                .disabled .remove-icon {
+                    pointer-events: none;
+                }
+
+                .dragging {
+                    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+                        0 2px 2px 0 rgba(0, 0, 0, 0.14),
+                        0 1px 5px 0 rgba(0, 0, 0, 0.12);
+                }
+            `}</style>
+            <style jsx>{`
+                button {
+                    ${marginBottom && `margin-bottom: ${marginBottom}px;`}
+                    margin-inline-start: ${marginInlineStart ??
+                    marginLeft ??
+                    DEFAULT_INLINE_MARGIN}px;
+                    margin-inline-end: ${marginInlineEnd ??
+                    marginRight ??
+                    DEFAULT_INLINE_MARGIN}px;
+                    ${marginTop && `margin-top: ${marginTop}px`}
+                }
+            `}</style>
+        </button>
+    )
+}
 
 Chip.defaultProps = {
     dataTest: 'dhis2-uicore-chip',

From 8c0c379b6a246e5b5b8b01e63e2643fd58ba8e11 Mon Sep 17 00:00:00 2001
From: Alaa Yahia <alaay873@live.com>
Date: Mon, 8 Apr 2024 05:06:12 +0200
Subject: [PATCH 03/10] feat(Chip): libs-555 add chip aria attributes

---
 components/chip/src/chip/chip.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/chip/src/chip/chip.js b/components/chip/src/chip/chip.js
index 0a2fb58d27..fb2ef9fa6c 100644
--- a/components/chip/src/chip/chip.js
+++ b/components/chip/src/chip/chip.js
@@ -53,6 +53,8 @@ const Chip = ({
             data-test={dataTest}
             tabIndex={-1}
             role="option"
+            aria-selected={selected ? 'true' : 'false'}
+            aria-disabled={disabled ? 'true' : 'false'}
         >
             <Icon icon={icon} dataTest={`${dataTest}-icon`} />
             <Content overflow={overflow}>{children}</Content>

From 51770e1a80fbb00c833cecb3bb7084ca26350bbd Mon Sep 17 00:00:00 2001
From: Alaa Yahia <alaay873@live.com>
Date: Wed, 17 Apr 2024 23:15:20 +0200
Subject: [PATCH 04/10] fix(chip): move focus to next chip when chip removed

---
 components/chip/src/chip-group/chip-group.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/components/chip/src/chip-group/chip-group.js b/components/chip/src/chip-group/chip-group.js
index 859d49fe7a..b2064314b7 100644
--- a/components/chip/src/chip-group/chip-group.js
+++ b/components/chip/src/chip-group/chip-group.js
@@ -12,8 +12,9 @@ const ChipGroup = ({ className, dataTest, children }) => {
             const chips = Array.from(
                 chipContainer.current.querySelectorAll('[role="option"]')
             )
-
-            chips[0].focus()
+            if (chips.length > 0) {
+                chips[0].focus()
+            }
             return
         }
 
@@ -39,6 +40,10 @@ const ChipGroup = ({ className, dataTest, children }) => {
             const prevIndex = (currentIndex - 1 + chips.length) % chips.length
             chips[prevIndex].focus()
         }
+        if (event.key === 'Backspace' || event.key === 'Delete') {
+            const nextIndex = (currentIndex + 1) % chips.length
+            chips[nextIndex].focus()
+        }
     }
     return (
         <div

From 3b87bba86725d9dbe094502bc19403472055ce54 Mon Sep 17 00:00:00 2001
From: Alaa Yahia <alaay873@live.com>
Date: Sat, 13 Jul 2024 00:02:07 +0300
Subject: [PATCH 05/10] chore: avoid refs

---
 components/chip/src/chip-group/chip-group.js | 60 +++++++++++++++++++-
 components/chip/src/chip/chip.js             | 14 ++---
 2 files changed, 63 insertions(+), 11 deletions(-)

diff --git a/components/chip/src/chip-group/chip-group.js b/components/chip/src/chip-group/chip-group.js
index b2064314b7..6356e832a9 100644
--- a/components/chip/src/chip-group/chip-group.js
+++ b/components/chip/src/chip-group/chip-group.js
@@ -1,13 +1,66 @@
 import { theme } from '@dhis2/ui-constants'
 import PropTypes from 'prop-types'
-import React, { useRef } from 'react'
+import React, { useRef, useEffect, useState } from 'react'
 
 const ChipGroup = ({ className, dataTest, children }) => {
     const chipContainer = useRef(null)
+    const [childrenToFocus, setChildrenToFocus] = useState([])
+
+    useEffect(() => {
+        if (chipContainer.current) {
+            const controlsDiv = chipContainer.current.querySelectorAll(
+                '[role="option"]'
+            )
+            if (controlsDiv) {
+                const childElements = Array.from(controlsDiv)
+                childElements.forEach((child) => {
+                    child.tabIndex = -1
+                    child.role = 'option'
+                })
+                setChildrenToFocus(childElements)
+            }
+        }
+    }, [children])
 
     const handleKeyDown = (event) => {
         const currentFocus = document.activeElement
 
+        if (chipContainer.current && chipContainer.current === currentFocus) {
+            if (childrenToFocus.length > 0 && childrenToFocus[0]) {
+                childrenToFocus[0].focus()
+            }
+            return
+        }
+        if (!childrenToFocus.length) {
+            return
+        }
+
+        const currentIndex = childrenToFocus.findIndex(
+            (element) => element === currentFocus
+        )
+
+        if (currentIndex === -1) {
+            return
+        }
+
+        if (event.key === 'ArrowRight') {
+            event.preventDefault()
+            const nextIndex = (currentIndex + 1) % childrenToFocus.length
+            childrenToFocus[nextIndex].focus()
+        }
+
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault()
+            const prevIndex =
+                (currentIndex - 1 + childrenToFocus.length) %
+                childrenToFocus.length
+            childrenToFocus[prevIndex].focus()
+        }
+    }
+
+    /*     const handleKeyDown = (event) => {
+        const currentFocus = document.activeElement
+
         if (chipContainer.current && chipContainer.current === currentFocus) {
             const chips = Array.from(
                 chipContainer.current.querySelectorAll('[role="option"]')
@@ -44,7 +97,7 @@ const ChipGroup = ({ className, dataTest, children }) => {
             const nextIndex = (currentIndex + 1) % chips.length
             chips[nextIndex].focus()
         }
-    }
+    } */
     return (
         <div
             className={className}
@@ -53,7 +106,8 @@ const ChipGroup = ({ className, dataTest, children }) => {
             ref={chipContainer}
             tabIndex={0}
         >
-            {children}
+            <div role="listbox">{children}</div>
+
             <style jsx>{`
                 div {
                     display: flex;
diff --git a/components/chip/src/chip/chip.js b/components/chip/src/chip/chip.js
index fb2ef9fa6c..c3e9e818f1 100644
--- a/components/chip/src/chip/chip.js
+++ b/components/chip/src/chip/chip.js
@@ -35,9 +35,8 @@ const Chip = ({
             onRemove({}, event)
         }
     }
-
     return (
-        <button
+        <span
             onClick={(e) => {
                 if (!disabled && onClick) {
                     onClick({}, e)
@@ -61,7 +60,7 @@ const Chip = ({
             <Remove onRemove={onRemove} dataTest={`${dataTest}-remove`} />
 
             <style jsx>{`
-                button {
+                span {
                     display: inline-flex;
                     align-items: center;
                     height: 32px;
@@ -72,7 +71,6 @@ const Chip = ({
                     cursor: pointer;
                     user-select: none;
                     color: ${colors.grey900};
-                    padding: 0;
                 }
 
                 .dense {
@@ -81,7 +79,7 @@ const Chip = ({
                     line-height: 15px;
                 }
 
-                button:hover {
+                span:hover {
                     background-color: ${colors.grey300};
                 }
 
@@ -116,7 +114,7 @@ const Chip = ({
                 }
             `}</style>
             <style jsx>{`
-                button {
+                span {
                     ${marginBottom && `margin-bottom: ${marginBottom}px;`}
                     margin-inline-start: ${marginInlineStart ??
                     marginLeft ??
@@ -127,7 +125,7 @@ const Chip = ({
                     ${marginTop && `margin-top: ${marginTop}px`}
                 }
             `}</style>
-        </button>
+        </span>
     )
 }
 
@@ -163,4 +161,4 @@ Chip.propTypes = {
     onRemove: PropTypes.func,
 }
 
-export { Chip }
+export { Chip }
\ No newline at end of file

From 27b0671575b111e091d407147db87457a3b6fa0c Mon Sep 17 00:00:00 2001
From: Alaa Yahia <alaay873@live.com>
Date: Tue, 16 Jul 2024 13:15:12 +0300
Subject: [PATCH 06/10] fix: avoid using refs

---
 components/chip/src/chip-group/chip-group.js | 44 --------------------
 1 file changed, 44 deletions(-)

diff --git a/components/chip/src/chip-group/chip-group.js b/components/chip/src/chip-group/chip-group.js
index 6356e832a9..890c615c9f 100644
--- a/components/chip/src/chip-group/chip-group.js
+++ b/components/chip/src/chip-group/chip-group.js
@@ -13,10 +13,6 @@ const ChipGroup = ({ className, dataTest, children }) => {
             )
             if (controlsDiv) {
                 const childElements = Array.from(controlsDiv)
-                childElements.forEach((child) => {
-                    child.tabIndex = -1
-                    child.role = 'option'
-                })
                 setChildrenToFocus(childElements)
             }
         }
@@ -58,46 +54,6 @@ const ChipGroup = ({ className, dataTest, children }) => {
         }
     }
 
-    /*     const handleKeyDown = (event) => {
-        const currentFocus = document.activeElement
-
-        if (chipContainer.current && chipContainer.current === currentFocus) {
-            const chips = Array.from(
-                chipContainer.current.querySelectorAll('[role="option"]')
-            )
-            if (chips.length > 0) {
-                chips[0].focus()
-            }
-            return
-        }
-
-        const role = currentFocus.getAttribute('role')
-
-        if (role !== 'option') {
-            return
-        }
-
-        const chips = Array.from(
-            chipContainer.current.querySelectorAll('[role="option"]')
-        )
-
-        const currentIndex = chips.indexOf(currentFocus)
-
-        if (event.key === 'ArrowRight') {
-            event.preventDefault()
-            const nextIndex = (currentIndex + 1) % chips.length
-            chips[nextIndex].focus()
-        }
-        if (event.key === 'ArrowLeft') {
-            event.preventDefault()
-            const prevIndex = (currentIndex - 1 + chips.length) % chips.length
-            chips[prevIndex].focus()
-        }
-        if (event.key === 'Backspace' || event.key === 'Delete') {
-            const nextIndex = (currentIndex + 1) % chips.length
-            chips[nextIndex].focus()
-        }
-    } */
     return (
         <div
             className={className}

From 35780fcac26ecbd49de25330645951f803ba0084 Mon Sep 17 00:00:00 2001
From: alaa-yahia <alaay873@live.com>
Date: Mon, 2 Sep 2024 21:08:18 +0300
Subject: [PATCH 07/10] feat: add accessibility improvements to chip

---
 collections/forms/i18n/en.pot                |  4 +-
 components/chip/API.md                       | 18 ++++++++
 components/chip/src/chip-group/chip-group.js | 45 ++++++++++++++------
 3 files changed, 51 insertions(+), 16 deletions(-)

diff --git a/collections/forms/i18n/en.pot b/collections/forms/i18n/en.pot
index e65ed246e0..b2c2ec5558 100644
--- a/collections/forms/i18n/en.pot
+++ b/collections/forms/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-02-12T14:58:56.792Z\n"
-"PO-Revision-Date: 2024-02-12T14:58:56.792Z\n"
+"POT-Creation-Date: 2024-09-02T17:18:35.684Z\n"
+"PO-Revision-Date: 2024-09-02T17:18:35.684Z\n"
 
 msgid "Upload file"
 msgstr "Upload file"
diff --git a/components/chip/API.md b/components/chip/API.md
index a0842b9609..460cfeea2b 100644
--- a/components/chip/API.md
+++ b/components/chip/API.md
@@ -1,3 +1,21 @@
+### ChipGroup
+
+#### Usage
+
+**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+
+```js
+import { ChipGroup } from '@dhis2-ui/chip'
+```
+
+#### Props
+
+|Name|Type|Default|Required|Description|
+|---|---|---|---|---|
+|children|node|||The Chip components to be rendered within the group|
+|className|string|||Additional CSS class for the chip group|
+|dataTest|string|`'dhis2-uicore-chipgroup'`||Data test id for testing purposes|
+
 ### Chip
 
 #### Usage
diff --git a/components/chip/src/chip-group/chip-group.js b/components/chip/src/chip-group/chip-group.js
index 890c615c9f..9b6ee58b13 100644
--- a/components/chip/src/chip-group/chip-group.js
+++ b/components/chip/src/chip-group/chip-group.js
@@ -8,29 +8,23 @@ const ChipGroup = ({ className, dataTest, children }) => {
 
     useEffect(() => {
         if (chipContainer.current) {
-            const controlsDiv = chipContainer.current.querySelectorAll(
+            const chips = chipContainer.current.querySelectorAll(
                 '[role="option"]'
             )
-            if (controlsDiv) {
-                const childElements = Array.from(controlsDiv)
-                setChildrenToFocus(childElements)
+            if (chips.length > 0) {
+                const childrenToFocus = Array.from(chips)
+                setChildrenToFocus(childrenToFocus)
             }
         }
     }, [children])
 
     const handleKeyDown = (event) => {
-        const currentFocus = document.activeElement
-
-        if (chipContainer.current && chipContainer.current === currentFocus) {
-            if (childrenToFocus.length > 0 && childrenToFocus[0]) {
-                childrenToFocus[0].focus()
-            }
-            return
-        }
         if (!childrenToFocus.length) {
             return
         }
 
+        const currentFocus = document.activeElement
+
         const currentIndex = childrenToFocus.findIndex(
             (element) => element === currentFocus
         )
@@ -52,6 +46,28 @@ const ChipGroup = ({ className, dataTest, children }) => {
                 childrenToFocus.length
             childrenToFocus[prevIndex].focus()
         }
+
+        if (event.key === 'Backspace' || event.key === 'Delete') {
+            event.preventDefault()
+            event.stopPropagation()
+            const nextIndex = (currentIndex + 1) % childrenToFocus.length
+            childrenToFocus[nextIndex].focus()
+        }
+    }
+
+    const handleFocus = (event) => {
+        if (!childrenToFocus.length) {
+            return
+        }
+        if (event.target === chipContainer.current) {
+            const selectedChild = childrenToFocus.find(
+                (child) => child.getAttribute('aria-selected') === 'true'
+            )
+            if (!selectedChild) {
+                childrenToFocus[0].focus()
+            }
+            selectedChild.focus()
+        }
     }
 
     return (
@@ -59,11 +75,12 @@ const ChipGroup = ({ className, dataTest, children }) => {
             className={className}
             data-test={dataTest}
             onKeyDown={handleKeyDown}
+            onFocus={handleFocus}
             ref={chipContainer}
             tabIndex={0}
+            role="listbox"
         >
-            <div role="listbox">{children}</div>
-
+            {children}
             <style jsx>{`
                 div {
                     display: flex;

From bb6f402cbee952be72a8fe55eec8c0483926e767 Mon Sep 17 00:00:00 2001
From: alaa-yahia <alaay873@live.com>
Date: Mon, 2 Sep 2024 21:18:57 +0300
Subject: [PATCH 08/10] fix: filea placement

---
 collections/forms/i18n/en.pot                 |   4 +-
 .../chip/src/{ => chip}/chip.e2e.stories.js   |   0
 .../chip/src/{ => chip}/chip.prod.stories.js  |   0
 components/chip/src/chip/chip.stories.js      | 135 ------------------
 4 files changed, 2 insertions(+), 137 deletions(-)
 rename components/chip/src/{ => chip}/chip.e2e.stories.js (100%)
 rename components/chip/src/{ => chip}/chip.prod.stories.js (100%)
 delete mode 100644 components/chip/src/chip/chip.stories.js

diff --git a/collections/forms/i18n/en.pot b/collections/forms/i18n/en.pot
index 589f3f8baa..7451179c93 100644
--- a/collections/forms/i18n/en.pot
+++ b/collections/forms/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-07-17T14:10:05.852Z\n"
-"PO-Revision-Date: 2024-07-17T14:10:05.853Z\n"
+"POT-Creation-Date: 2024-09-02T18:17:51.871Z\n"
+"PO-Revision-Date: 2024-09-02T18:17:51.873Z\n"
 
 msgid "Upload file"
 msgstr "Upload file"
diff --git a/components/chip/src/chip.e2e.stories.js b/components/chip/src/chip/chip.e2e.stories.js
similarity index 100%
rename from components/chip/src/chip.e2e.stories.js
rename to components/chip/src/chip/chip.e2e.stories.js
diff --git a/components/chip/src/chip.prod.stories.js b/components/chip/src/chip/chip.prod.stories.js
similarity index 100%
rename from components/chip/src/chip.prod.stories.js
rename to components/chip/src/chip/chip.prod.stories.js
diff --git a/components/chip/src/chip/chip.stories.js b/components/chip/src/chip/chip.stories.js
deleted file mode 100644
index 015fbfbc5b..0000000000
--- a/components/chip/src/chip/chip.stories.js
+++ /dev/null
@@ -1,135 +0,0 @@
-import React from 'react'
-import { Chip } from './chip.js'
-
-const subtitle = `Chips are useful for displaying a selection of defined choices and filters to the user.`
-
-const description = `
-Chips are used to display a list of defined options, filters or views for a related view. Chips are always a secondary content to a main element, for example a data table or a dashboard.
-See an example application of chips [here](https://github.com/dhis2/design-system/blob/master/atoms/chip.md#usage).
-
-#### Chip vs. Button
-
-Chips should only be used for filtering or selecting an option. Do not use filters to trigger actions such as 'Save', 'Exit' or 'Open'. Use a [button](../?path=/docs/actions-buttons-button--basic) to trigger actions.
-
-#### Displaying chips
-
-- Chips should be displayed in a horizontal list, where space permits.
-- Do not stack single chips on top of one another if there is space to display them inline.
-- Do not use horizontal scrolling to display a large number of chips. Always wrap chips onto a new line below.
-
-\`\`\`js
-import { Chip } from '@dhis2/ui'
-\`\`\`
-`
-
-window.onClick = (payload, event) => {
-    console.log('onClick payload', payload)
-    console.log('onClick event', event)
-}
-
-window.onRemove = (payload, event) => {
-    console.log('onRemove payload', payload)
-    console.log('onRemove event', event)
-}
-
-const onClick = (...args) => window.onClick(...args)
-const onRemove = (...args) => window.onRemove(...args)
-
-export default {
-    title: 'Chip',
-    component: Chip,
-    parameters: {
-        componentSubtitle: subtitle,
-        docs: { description: { component: description } },
-    },
-    args: { onClick },
-}
-
-const Template = (args) => <Chip {...args} />
-
-export const Default = Template.bind({})
-Default.args = { children: 'Chippy' }
-
-export const Selected = Template.bind({})
-Selected.args = { selected: true, children: 'Chipmunk' }
-
-export const Overflow = Template.bind({})
-Overflow.args = {
-    overflow: true,
-    selected: true,
-    children: 'A super long chip which should definitely truncate',
-}
-
-export const Removable = Template.bind({})
-Removable.args = { ...Default.args, onRemove }
-
-const Globe = () => (
-    <svg role="img" viewBox="0 0 24 24" height="100px" width="100px">
-        <title>LGTM icon</title>
-        <path d="M12.008 4.866c-2.914 0-5.377.679-6.995 2.11-.05-.088-.085-.163-.141-.253-.17-.273-.328-.583-.828-.89a2.699 2.699 0 0 0-1.014-.387 2.14 2.14 0 0 0-.47-.001l.099-.013c-.91 0-1.442.546-1.788 1.016-.344.47-.566.999-.71 1.577-.285 1.155-.289 2.651.81 3.767.575.588 1.251.863 1.863 1.027.118.032.223.04.336.063.399 1.892 1.58 3.492 3.158 4.381v.001h.002c.929.522 1.81.761 2.472 1.014.924.357 1.9.751 3.036.85l.06.006h.15c1.306 0 2.296-.527 3.152-.855.655-.25 1.54-.482 2.477-1.008a6.156 6.156 0 0 0 1.196-.88 6.759 6.759 0 0 0 1.967-3.45 3.913 3.913 0 0 0 2.19-1.15c1.098-1.115 1.094-2.611.809-3.766-.144-.578-.366-1.106-.71-1.577-.345-.47-.879-1.016-1.788-1.016l.1.013a2.14 2.14 0 0 0-.472.002 2.695 2.695 0 0 0-1.01.385c-.499.307-.658.616-.827.888-.055.089-.09.163-.139.249-1.617-1.426-4.076-2.103-6.985-2.103zm.023 1.37c3.557 0 6.013 1.065 7.057 2.97.63-.243 1.093-1.89 1.612-2.209.42-.26.665-.195.665-.195.95 0 1.93 2.797.712 4.032-.644.657-1.83.842-2.422.795-.045 1.906-1.155 3.626-2.624 4.45-.748.42-1.552.64-2.296.924-.921.352-1.786.763-2.662.763h-.092c-.872-.076-1.74-.407-2.662-.763-.744-.285-1.548-.51-2.296-.93-1.46-.824-2.571-2.54-2.616-4.445-.587.05-1.788-.132-2.436-.794-1.217-1.235-.238-4.032.712-4.032 0 0 .246-.064.666.195.521.321.987 1.984 1.62 2.214C6.013 7.3 8.47 6.236 12.032 6.236zm-3.876 2.33a3.053 3.053 0 1 0 0 6.105 3.053 3.053 0 0 0 0-6.105zm7.751 0a3.052 3.052 0 1 0 0 6.105 3.052 3.052 0 0 0 0-6.105zM8.591 10.28a1.357 1.357 0 0 1 0 2.713 1.356 1.356 0 0 1-1.313-1.694.57.57 0 0 0 1.098-.216.57.57 0 0 0-.547-.57 1.35 1.35 0 0 1 .762-.233zm6.888 0a1.357 1.357 0 0 1 0 2.713 1.356 1.356 0 0 1-1.314-1.694.57.57 0 1 0 .552-.785 1.35 1.35 0 0 1 .762-.234zM11.52 14.93c-.239.02-.377.146-.377.476 0 .21.138.365.378.365a.143.143 0 0 0 .033-.282c-.022-.005-.13-.044-.13-.136 0-.093 0-.125.183-.15.078-.012.116-.105.092-.18-.024-.075-.094-.1-.18-.093zm1.023 0c-.085-.006-.156.018-.18.093-.024.075.015.168.093.18.182.025.182.057.182.15 0 .092-.107.131-.13.136a.143.143 0 0 0 .033.282c.24 0 .379-.155.379-.365 0-.33-.139-.456-.377-.476z" />
-    </svg>
-)
-
-export const Icon = Template.bind({})
-Icon.args = { icon: <Globe />, children: 'With an icon' }
-
-const GlobeResizable = () => (
-    <svg
-        role="img"
-        viewBox="0 0 24 24"
-        style={{
-            height: '100%',
-            width: 'auto',
-        }}
-    >
-        <title>LGTM icon</title>
-        <path d="M12.008 4.866c-2.914 0-5.377.679-6.995 2.11-.05-.088-.085-.163-.141-.253-.17-.273-.328-.583-.828-.89a2.699 2.699 0 0 0-1.014-.387 2.14 2.14 0 0 0-.47-.001l.099-.013c-.91 0-1.442.546-1.788 1.016-.344.47-.566.999-.71 1.577-.285 1.155-.289 2.651.81 3.767.575.588 1.251.863 1.863 1.027.118.032.223.04.336.063.399 1.892 1.58 3.492 3.158 4.381v.001h.002c.929.522 1.81.761 2.472 1.014.924.357 1.9.751 3.036.85l.06.006h.15c1.306 0 2.296-.527 3.152-.855.655-.25 1.54-.482 2.477-1.008a6.156 6.156 0 0 0 1.196-.88 6.759 6.759 0 0 0 1.967-3.45 3.913 3.913 0 0 0 2.19-1.15c1.098-1.115 1.094-2.611.809-3.766-.144-.578-.366-1.106-.71-1.577-.345-.47-.879-1.016-1.788-1.016l.1.013a2.14 2.14 0 0 0-.472.002 2.695 2.695 0 0 0-1.01.385c-.499.307-.658.616-.827.888-.055.089-.09.163-.139.249-1.617-1.426-4.076-2.103-6.985-2.103zm.023 1.37c3.557 0 6.013 1.065 7.057 2.97.63-.243 1.093-1.89 1.612-2.209.42-.26.665-.195.665-.195.95 0 1.93 2.797.712 4.032-.644.657-1.83.842-2.422.795-.045 1.906-1.155 3.626-2.624 4.45-.748.42-1.552.64-2.296.924-.921.352-1.786.763-2.662.763h-.092c-.872-.076-1.74-.407-2.662-.763-.744-.285-1.548-.51-2.296-.93-1.46-.824-2.571-2.54-2.616-4.445-.587.05-1.788-.132-2.436-.794-1.217-1.235-.238-4.032.712-4.032 0 0 .246-.064.666.195.521.321.987 1.984 1.62 2.214C6.013 7.3 8.47 6.236 12.032 6.236zm-3.876 2.33a3.053 3.053 0 1 0 0 6.105 3.053 3.053 0 0 0 0-6.105zm7.751 0a3.052 3.052 0 1 0 0 6.105 3.052 3.052 0 0 0 0-6.105zM8.591 10.28a1.357 1.357 0 0 1 0 2.713 1.356 1.356 0 0 1-1.313-1.694.57.57 0 0 0 1.098-.216.57.57 0 0 0-.547-.57 1.35 1.35 0 0 1 .762-.233zm6.888 0a1.357 1.357 0 0 1 0 2.713 1.356 1.356 0 0 1-1.314-1.694.57.57 0 1 0 .552-.785 1.35 1.35 0 0 1 .762-.234zM11.52 14.93c-.239.02-.377.146-.377.476 0 .21.138.365.378.365a.143.143 0 0 0 .033-.282c-.022-.005-.13-.044-.13-.136 0-.093 0-.125.183-.15.078-.012.116-.105.092-.18-.024-.075-.094-.1-.18-.093zm1.023 0c-.085-.006-.156.018-.18.093-.024.075.015.168.093.18.182.025.182.057.182.15 0 .092-.107.131-.13.136a.143.143 0 0 0 .033.282c.24 0 .379-.155.379-.365 0-.33-.139-.456-.377-.476z" />
-    </svg>
-)
-
-export const IconContent = Template.bind({})
-IconContent.args = {
-    children: (
-        <span className="container">
-            <span className="text">With an icon</span>
-
-            <span className="icon">
-                <GlobeResizable />
-            </span>
-
-            <style jsx>{`
-                .container {
-                    display: flex;
-                    align-content: center;
-                    justify-content: center;
-                }
-
-                .text {
-                    margin-right: 4px;
-                }
-
-                .icon {
-                    display: inline-block;
-                    height: 16px;
-                }
-            `}</style>
-        </span>
-    ),
-}
-
-export const Dense = () => <Chip dense>I am dense</Chip>
-Dense.args = { dense: true, children: 'I am dense' }
-
-export const DenseRemoveable = Template.bind({})
-DenseRemoveable.args = {
-    ...Dense.args,
-    ...Removable.args,
-    children: 'Removable and dense',
-}
-
-export const RTLRemovable = (args) => (
-    <div dir="rtl">
-        <Chip {...args}>RTL removable</Chip>
-    </div>
-)
-RTLRemovable.args = { ...Removable.args }

From e20053e688f64f2f226c86309eaef8f3df9e7b40 Mon Sep 17 00:00:00 2001
From: alaa-yahia <alaay873@live.com>
Date: Mon, 2 Sep 2024 23:31:08 +0300
Subject: [PATCH 09/10] feat: pass compoenet a to chip

---
 components/chip/src/chip-group/chip-group.js |   2 +-
 components/chip/src/chip/chip.js             | 119 +++++++++++--------
 2 files changed, 68 insertions(+), 53 deletions(-)

diff --git a/components/chip/src/chip-group/chip-group.js b/components/chip/src/chip-group/chip-group.js
index 9b6ee58b13..7ae8b014e1 100644
--- a/components/chip/src/chip-group/chip-group.js
+++ b/components/chip/src/chip-group/chip-group.js
@@ -63,7 +63,7 @@ const ChipGroup = ({ className, dataTest, children }) => {
             const selectedChild = childrenToFocus.find(
                 (child) => child.getAttribute('aria-selected') === 'true'
             )
-            if (!selectedChild) {
+            if (!selectedChild && childrenToFocus[0]) {
                 childrenToFocus[0].focus()
             }
             selectedChild.focus()
diff --git a/components/chip/src/chip/chip.js b/components/chip/src/chip/chip.js
index c3e9e818f1..b463c8de32 100644
--- a/components/chip/src/chip/chip.js
+++ b/components/chip/src/chip/chip.js
@@ -26,6 +26,9 @@ const Chip = ({
     marginTop,
     marginInlineStart,
     marginInlineEnd,
+    component: Component,
+    href,
+    to,
 }) => {
     const handleKeyDown = (event) => {
         if (!onRemove) {
@@ -35,32 +38,49 @@ const Chip = ({
             onRemove({}, event)
         }
     }
-    return (
-        <span
-            onClick={(e) => {
-                if (!disabled && onClick) {
-                    onClick({}, e)
-                }
-            }}
-            onKeyDown={handleKeyDown}
-            className={cx(className, {
-                selected,
-                dense,
-                disabled,
-                dragging,
-            })}
-            data-test={dataTest}
-            tabIndex={-1}
-            role="option"
-            aria-selected={selected ? 'true' : 'false'}
-            aria-disabled={disabled ? 'true' : 'false'}
-        >
+
+    const chipProps = {
+        onClick: (e) => {
+            if (!disabled && onClick) {
+                onClick({}, e)
+            }
+        },
+        onKeyDown: handleKeyDown,
+        className: cx('chip', className, {
+            selected,
+            dense,
+            disabled,
+            dragging,
+        }),
+        'data-test': dataTest,
+        tabIndex: -1,
+        role: 'option',
+        'aria-selected': selected ? 'true' : 'false',
+        'aria-disabled': disabled ? 'true' : 'false',
+    }
+
+    const content = (
+        <>
             <Icon icon={icon} dataTest={`${dataTest}-icon`} />
             <Content overflow={overflow}>{children}</Content>
             <Remove onRemove={onRemove} dataTest={`${dataTest}-remove`} />
+        </>
+    )
+
+    const chipElement =
+        Component === 'a' ? (
+            <Component {...chipProps} href={href} to={to}>
+                {content}
+            </Component>
+        ) : (
+            <span {...chipProps}>{content}</span>
+        )
 
+    return (
+        <>
+            {chipElement}
             <style jsx>{`
-                span {
+                :global(.chip) {
                     display: inline-flex;
                     align-items: center;
                     height: 32px;
@@ -71,61 +91,59 @@ const Chip = ({
                     cursor: pointer;
                     user-select: none;
                     color: ${colors.grey900};
+                    text-decoration: none;
+                    ${marginBottom && `margin-bottom: ${marginBottom}px;`}
+                    margin-inline-start: ${marginInlineStart ??
+                    marginLeft ??
+                    DEFAULT_INLINE_MARGIN}px;
+                    margin-inline-end: ${marginInlineEnd ??
+                    marginRight ??
+                    DEFAULT_INLINE_MARGIN}px;
+                    ${marginTop && `margin-top: ${marginTop}px`}
                 }
 
-                .dense {
+                :global(.chip.dense) {
                     height: 24px;
                     font-size: 13px;
                     line-height: 15px;
                 }
 
-                span:hover {
+                :global(.chip:hover) {
                     background-color: ${colors.grey300};
                 }
 
-                .selected {
+                :global(.chip.selected) {
                     background-color: ${theme.secondary600};
                     font-weight: 500;
                 }
 
-                .selected:hover {
+                :global(.chip.selected:hover) {
                     background-color: #00695c;
                 }
 
-                .selected,
-                .selected .icon,
-                .selected .remove-icon {
+                :global(.chip.selected),
+                :global(.chip.selected .icon),
+                :global(.chip.selected .remove-icon) {
                     color: ${colors.white};
                 }
 
-                .disabled {
+                :global(.chip.disabled) {
                     cursor: not-allowed;
                     opacity: 0.3;
                 }
 
-                .disabled .remove-icon {
+                :global(.chip.disabled .remove-icon) {
                     pointer-events: none;
                 }
 
-                .dragging {
-                    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+                :global(.chip.dragging) {
+                    box-shadow:
+                        0 3px 1px -2px rgba(0, 0, 0, 0.2),
                         0 2px 2px 0 rgba(0, 0, 0, 0.14),
                         0 1px 5px 0 rgba(0, 0, 0, 0.12);
                 }
             `}</style>
-            <style jsx>{`
-                span {
-                    ${marginBottom && `margin-bottom: ${marginBottom}px;`}
-                    margin-inline-start: ${marginInlineStart ??
-                    marginLeft ??
-                    DEFAULT_INLINE_MARGIN}px;
-                    margin-inline-end: ${marginInlineEnd ??
-                    marginRight ??
-                    DEFAULT_INLINE_MARGIN}px;
-                    ${marginTop && `margin-top: ${marginTop}px`}
-                }
-            `}</style>
-        </span>
+        </>
     )
 }
 
@@ -138,27 +156,24 @@ Chip.defaultProps = {
 Chip.propTypes = {
     children: PropTypes.any,
     className: PropTypes.string,
+    component: PropTypes.oneOf(['a', 'span']),
     dataTest: PropTypes.string,
     dense: PropTypes.bool,
     disabled: PropTypes.bool,
     dragging: PropTypes.bool,
+    href: PropTypes.string,
     icon: PropTypes.element,
-    /** `margin-bottom` value, applied in `px`  */
     marginBottom: PropTypes.number,
-    /** `margin-inline-end` value, applied in `px`  */
     marginInlineEnd: PropTypes.number,
-    /** `margin-inline-start` value, applied in `px`  */
     marginInlineStart: PropTypes.number,
-    /** `margin-inline-start` value, applied in `px`  */
     marginLeft: PropTypes.number,
-    /** `margin-inline-end` value, applied in `px`  */
     marginRight: PropTypes.number,
-    /** `margin-top` value, applied in `px`  */
     marginTop: PropTypes.number,
     overflow: PropTypes.bool,
     selected: PropTypes.bool,
+    to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
     onClick: PropTypes.func,
     onRemove: PropTypes.func,
 }
 
-export { Chip }
\ No newline at end of file
+export { Chip }

From 6a11cced07d90b67b24f08193c3cf84a225d5467 Mon Sep 17 00:00:00 2001
From: alaa-yahia <alaay873@live.com>
Date: Mon, 2 Sep 2024 23:43:32 +0300
Subject: [PATCH 10/10] fix: linter issues

---
 components/chip/src/chip-group/chip-group.js | 5 ++---
 components/chip/src/chip/chip.js             | 3 +--
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/components/chip/src/chip-group/chip-group.js b/components/chip/src/chip-group/chip-group.js
index 7ae8b014e1..d8b62458f3 100644
--- a/components/chip/src/chip-group/chip-group.js
+++ b/components/chip/src/chip-group/chip-group.js
@@ -8,9 +8,8 @@ const ChipGroup = ({ className, dataTest, children }) => {
 
     useEffect(() => {
         if (chipContainer.current) {
-            const chips = chipContainer.current.querySelectorAll(
-                '[role="option"]'
-            )
+            const chips =
+                chipContainer.current.querySelectorAll('[role="option"]')
             if (chips.length > 0) {
                 const childrenToFocus = Array.from(chips)
                 setChildrenToFocus(childrenToFocus)
diff --git a/components/chip/src/chip/chip.js b/components/chip/src/chip/chip.js
index b463c8de32..a8eaef83f9 100644
--- a/components/chip/src/chip/chip.js
+++ b/components/chip/src/chip/chip.js
@@ -137,8 +137,7 @@ const Chip = ({
                 }
 
                 :global(.chip.dragging) {
-                    box-shadow:
-                        0 3px 1px -2px rgba(0, 0, 0, 0.2),
+                    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
                         0 2px 2px 0 rgba(0, 0, 0, 0.14),
                         0 1px 5px 0 rgba(0, 0, 0, 0.12);
                 }