chore: add indicator

chakra-ui · Dec 31, 2024 · 6fb5d57 · 6fb5d57
1 parent c8665f1
commit 6fb5d57
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 1 deletion.
diff --git a/examples/next-ts/pages/cascader.tsx b/examples/next-ts/pages/cascader.tsx
@@ -90,7 +90,7 @@ export default function Page() {
           <div {...api.getControlProps()}>
             <button {...api.getTriggerProps()}>
               <span>{api.selectedItems.map((i) => i.label).join(", ") || "Select option"}</span>
-              {/* <span {...api.getIndicatorProps()}>▼</span> */}
+              <span {...api.getIndicatorProps()}>▼</span>
             </button>
             <button {...api.getClearTriggerProps()}>X</button>
           </div>

diff --git a/packages/machines/cascader/src/cascader.anatomy.ts b/packages/machines/cascader/src/cascader.anatomy.ts
@@ -9,6 +9,7 @@ export const anatomy = createAnatomy("cascader").parts(
   "positioner",
   "content",
   "list",
+  "indicator",
   "item",
   "itemText",
 )

diff --git a/packages/machines/cascader/src/cascader.connect.ts b/packages/machines/cascader/src/cascader.connect.ts
@@ -339,6 +339,18 @@ export function connect<T extends PropTypes, V = any>(
       })
     },
 
+    getIndicatorProps() {
+      return normalize.element({
+        ...parts.indicator.attrs,
+        dir: state.context.dir,
+        "aria-hidden": true,
+        "data-state": open ? "open" : "closed",
+        "data-disabled": dataAttr(disabled),
+        "data-invalid": dataAttr(invalid),
+        "data-readonly": dataAttr(readOnly),
+      })
+    },
+
     getItemProps(props) {
       const itemState = getNodeState(props)
 

diff --git a/packages/machines/cascader/src/cascader.types.ts b/packages/machines/cascader/src/cascader.types.ts
@@ -317,6 +317,7 @@ export interface MachineApi<T extends PropTypes = PropTypes, V = TreeNode> {
   getLabelProps(): T["label"]
   getControlProps(): T["element"]
   getTriggerProps(): T["button"]
+  getIndicatorProps(): T["element"]
   getClearTriggerProps(): T["button"]
   getPositionerProps(): T["element"]
   getContentProps(): T["element"]