@lattice-ui/accordion 0.3.2 → 0.4.1

package/.turbo/turbo-build.log

@@ -0,0 +1,4 @@
+
+> @lattice-ui/accordion@0.4.1 build C:\Users\retur\OneDrive\Desktop\Workspace\rojo\lattice-ui\packages\accordion
+> rbxtsc -p tsconfig.json
+

package/.turbo/turbo-typecheck.log

@@ -0,0 +1,4 @@
+
+> @lattice-ui/accordion@0.4.1 typecheck C:\Users\retur\OneDrive\Desktop\Workspace\rojo\lattice-ui\packages\accordion
+> tsc -p tsconfig.typecheck.json
+

package/README.md

@@ -15,4 +15,3 @@ Headless accordion primitives for Roblox UI with single and multiple disclosure
 
 - Supports `type="single" | "multiple"`.
 - Supports controlled/uncontrolled `value`.
-- Keyboard navigation is integrated with roving focus.

package/out/Accordion/AccordionRoot.luau

@@ -3,28 +3,22 @@ local TS = _G[script]
 local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
 local React = _core.React
 local useControllableState = _core.useControllableState
-local RovingFocusGroup = TS.import(script, TS.getModule(script, "@lattice-ui", "focus").out).RovingFocusGroup
 local AccordionContextProvider = TS.import(script, script.Parent, "context").AccordionContextProvider
 local _state = TS.import(script, script.Parent, "state")
 local nextAccordionValues = _state.nextAccordionValues
 local normalizeAccordionValue = _state.normalizeAccordionValue
 local function AccordionRoot(props)
 	local accordionType = props.type or "single"
-	local _condition = props.loop
+	local _condition = props.collapsible
 	if _condition == nil then
-		_condition = true
+		_condition = false
 	end
-	local loop = _condition
-	local _condition_1 = props.collapsible
+	local collapsible = _condition
+	local _condition_1 = props.defaultValue
 	if _condition_1 == nil then
-		_condition_1 = false
+		_condition_1 = (if accordionType == "single" then "" else {})
 	end
-	local collapsible = _condition_1
-	local _condition_2 = props.defaultValue
-	if _condition_2 == nil then
-		_condition_2 = (if accordionType == "single" then "" else {})
-	end
-	local defaultValue = _condition_2
+	local defaultValue = _condition_1
 	local _binding = useControllableState({
 		value = props.value,
 		defaultValue = defaultValue,
@@ -36,11 +30,11 @@ local function AccordionRoot(props)
 	local toggleItem = React.useCallback(function(candidateValue)
 		local nextValues = nextAccordionValues(accordionType, openValues, candidateValue, collapsible)
 		if accordionType == "single" then
-			local _condition_3 = nextValues[1]
-			if _condition_3 == nil then
-				_condition_3 = ""
+			local _condition_2 = nextValues[1]
+			if _condition_2 == nil then
+				_condition_2 = ""
 			end
-			setRawValue(_condition_3)
+			setRawValue(_condition_2)
 			return nil
 		end
 		setRawValue(nextValues)
@@ -49,18 +43,12 @@ local function AccordionRoot(props)
 		return {
 			type = accordionType,
 			openValues = openValues,
-			loop = loop,
 			toggleItem = toggleItem,
 		}
-	end, { accordionType, loop, openValues, toggleItem })
+	end, { accordionType, openValues, toggleItem })
 	return React.createElement(AccordionContextProvider, {
 		value = contextValue,
-	}, React.createElement(RovingFocusGroup, {
-		active = true,
-		autoFocus = "none",
-		loop = loop,
-		orientation = "vertical",
-	}, props.children))
+	}, props.children)
 end
 return {
 	AccordionRoot = AccordionRoot,

package/out/Accordion/AccordionTrigger.luau

@@ -3,7 +3,6 @@ local TS = _G[script]
 local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
 local React = _core.React
 local Slot = _core.Slot
-local RovingFocusItem = TS.import(script, TS.getModule(script, "@lattice-ui", "focus").out).RovingFocusItem
 local _context = TS.import(script, script.Parent, "context")
 local useAccordionContext = _context.useAccordionContext
 local useAccordionItemContext = _context.useAccordionItemContext
@@ -37,25 +36,19 @@ local function AccordionTrigger(props)
 		if not child then
 			error("[AccordionTrigger] `asChild` requires a child element.")
 		end
-		return React.createElement(RovingFocusItem, {
-			asChild = true,
-			disabled = disabled,
-		}, React.createElement(Slot, {
+		return React.createElement(Slot, {
 			Active = not disabled,
 			Event = eventHandlers,
-			Selectable = not disabled,
-		}, child))
+			Selectable = false,
+		}, child)
 	end
-	return React.createElement(RovingFocusItem, {
-		asChild = true,
-		disabled = disabled,
-	}, React.createElement("textbutton", {
+	return React.createElement("textbutton", {
 		Active = not disabled,
 		AutoButtonColor = false,
 		BackgroundColor3 = Color3.fromRGB(41, 48, 63),
 		BorderSizePixel = 0,
 		Event = eventHandlers,
-		Selectable = not disabled,
+		Selectable = false,
 		Size = UDim2.fromOffset(260, 34),
 		Text = if itemContext.open then "Collapse" else "Expand",
 		TextColor3 = if disabled then Color3.fromRGB(143, 150, 165) else Color3.fromRGB(236, 241, 249),
@@ -63,7 +56,7 @@ local function AccordionTrigger(props)
 		TextXAlignment = Enum.TextXAlignment.Left,
 	}, React.createElement("uipadding", {
 		PaddingLeft = UDim.new(0, 10),
-	}), props.children))
+	}), props.children)
 end
 return {
 	AccordionTrigger = AccordionTrigger,

package/out/Accordion/types.d.ts

@@ -3,7 +3,6 @@ import type { AccordionType } from "./state";
 export type AccordionContextValue = {
     type: AccordionType;
     openValues: Array<string>;
-    loop: boolean;
     toggleItem: (value: string) => void;
 };
 export type AccordionItemContextValue = {
@@ -17,7 +16,6 @@ export type AccordionProps = {
     defaultValue?: string | Array<string>;
     onValueChange?: (value: string | Array<string>) => void;
     collapsible?: boolean;
-    loop?: boolean;
     children?: React.ReactNode;
 };
 export type AccordionItemProps = {

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@lattice-ui/accordion",
-  "version": "0.3.2",
+  "version": "0.4.1",
   "private": false,
   "main": "out/init.luau",
   "types": "out/index.d.ts",
   "dependencies": {
-    "@lattice-ui/core": "0.3.2",
-    "@lattice-ui/focus": "0.3.2"
+    "@lattice-ui/core": "0.4.1"
   },
   "devDependencies": {
     "@rbxts/react": "17.3.7-ts.1",

package/src/Accordion/AccordionRoot.tsx

@@ -1,12 +1,10 @@
 import { React, useControllableState } from "@lattice-ui/core";
-import { RovingFocusGroup } from "@lattice-ui/focus";
 import { AccordionContextProvider } from "./context";
 import { nextAccordionValues, normalizeAccordionValue } from "./state";
 import type { AccordionProps } from "./types";
 
 export function AccordionRoot(props: AccordionProps) {
   const accordionType = props.type ?? "single";
-  const loop = props.loop ?? true;
   const collapsible = props.collapsible ?? false;
 
   const defaultValue = props.defaultValue ?? (accordionType === "single" ? "" : []);
@@ -36,19 +34,12 @@ export function AccordionRoot(props: AccordionProps) {
     () => ({
       type: accordionType,
       openValues,
-      loop,
       toggleItem,
     }),
-    [accordionType, loop, openValues, toggleItem],
+    [accordionType, openValues, toggleItem],
   );
 
-  return (
-    <AccordionContextProvider value={contextValue}>
-      <RovingFocusGroup active autoFocus="none" loop={loop} orientation="vertical">
-        {props.children}
-      </RovingFocusGroup>
-    </AccordionContextProvider>
-  );
+  return <AccordionContextProvider value={contextValue}>{props.children}</AccordionContextProvider>;
 }
 
 export { AccordionRoot as Accordion };

package/src/Accordion/AccordionTrigger.tsx

@@ -1,5 +1,4 @@
 import { React, Slot } from "@lattice-ui/core";
-import { RovingFocusItem } from "@lattice-ui/focus";
 import { useAccordionContext, useAccordionItemContext } from "./context";
 import type { AccordionTriggerProps } from "./types";
 
@@ -45,32 +44,28 @@ export function AccordionTrigger(props: AccordionTriggerProps) {
     }
 
     return (
-      <RovingFocusItem asChild disabled={disabled}>
-        <Slot Active={!disabled} Event={eventHandlers} Selectable={!disabled}>
-          {child}
-        </Slot>
-      </RovingFocusItem>
+      <Slot Active={!disabled} Event={eventHandlers} Selectable={false}>
+        {child}
+      </Slot>
     );
   }
 
   return (
-    <RovingFocusItem asChild disabled={disabled}>
-      <textbutton
-        Active={!disabled}
-        AutoButtonColor={false}
-        BackgroundColor3={Color3.fromRGB(41, 48, 63)}
-        BorderSizePixel={0}
-        Event={eventHandlers}
-        Selectable={!disabled}
-        Size={UDim2.fromOffset(260, 34)}
-        Text={itemContext.open ? "Collapse" : "Expand"}
-        TextColor3={disabled ? Color3.fromRGB(143, 150, 165) : Color3.fromRGB(236, 241, 249)}
-        TextSize={14}
-        TextXAlignment={Enum.TextXAlignment.Left}
-      >
-        <uipadding PaddingLeft={new UDim(0, 10)} />
-        {props.children}
-      </textbutton>
-    </RovingFocusItem>
+    <textbutton
+      Active={!disabled}
+      AutoButtonColor={false}
+      BackgroundColor3={Color3.fromRGB(41, 48, 63)}
+      BorderSizePixel={0}
+      Event={eventHandlers}
+      Selectable={false}
+      Size={UDim2.fromOffset(260, 34)}
+      Text={itemContext.open ? "Collapse" : "Expand"}
+      TextColor3={disabled ? Color3.fromRGB(143, 150, 165) : Color3.fromRGB(236, 241, 249)}
+      TextSize={14}
+      TextXAlignment={Enum.TextXAlignment.Left}
+    >
+      <uipadding PaddingLeft={new UDim(0, 10)} />
+      {props.children}
+    </textbutton>
   );
 }

package/src/Accordion/types.ts

@@ -4,7 +4,6 @@ import type { AccordionType } from "./state";
 export type AccordionContextValue = {
   type: AccordionType;
   openValues: Array<string>;
-  loop: boolean;
   toggleItem: (value: string) => void;
 };
 
@@ -20,7 +19,6 @@ export type AccordionProps = {
   defaultValue?: string | Array<string>;
   onValueChange?: (value: string | Array<string>) => void;
   collapsible?: boolean;
-  loop?: boolean;
   children?: React.ReactNode;
 };