@decky/ui 4.11.5 → 4.12.0

package/dist/custom-components/ReorderableList.d.ts

@@ -13,6 +13,7 @@ export type ReorderableListProps<T> = {
     }>;
     fieldProps?: FieldProps;
     animate?: boolean;
+    disableReordering?: boolean;
 };
 export declare function ReorderableList<T>(props: ReorderableListProps<T>): import("react/jsx-runtime").JSX.Element;
 export type ReorderableListEntryProps<T> = {

package/dist/custom-components/ReorderableList.js

@@ -9,7 +9,15 @@ export function ReorderableList(props) {
     useEffect(() => {
         setEntryList([...props.entries].sort((a, b) => a.position - b.position));
     }, [props.entries]);
+    useEffect(() => {
+        if (props.disableReordering && reorderEnabled) {
+            setReorderEnabled(false);
+            props.onSave(entryList);
+        }
+    }, [props.disableReordering, reorderEnabled, entryList]);
     function toggleReorderEnabled() {
+        if (props.disableReordering)
+            return;
         let newReorderValue = !reorderEnabled;
         setReorderEnabled(newReorderValue);
         if (!newReorderValue) {
@@ -32,7 +40,7 @@ export function ReorderableList(props) {
                 flexDirection: 'column',
                 justifyContent: 'flex-start',
                 alignContent: 'stretch',
-            }, children: _jsx(Focusable, { onSecondaryButton: toggleReorderEnabled, onSecondaryActionDescription: reorderEnabled ? 'Save Order' : 'Reorder', onClick: toggleReorderEnabled, onButtonDown: saveOnBackout, children: entryList.map((entry) => (_jsx(ReorderableItem, { animate: props.animate, listData: entryList, entryData: entry, reorderEntryFunc: setEntryList, reorderEnabled: reorderEnabled, fieldProps: props.fieldProps, children: props.interactables ? _jsx(props.interactables, { entry: entry }) : null }))) }) }) }));
+            }, children: _jsx(Focusable, { onSecondaryButton: props.disableReordering ? undefined : toggleReorderEnabled, onSecondaryActionDescription: props.disableReordering ? undefined : reorderEnabled ? 'Save Order' : 'Reorder', onClick: props.disableReordering ? undefined : toggleReorderEnabled, onButtonDown: saveOnBackout, children: entryList.map((entry) => (_jsx(ReorderableItem, { animate: props.animate, listData: entryList, entryData: entry, reorderEntryFunc: setEntryList, reorderEnabled: reorderEnabled, fieldProps: props.fieldProps, children: props.interactables ? _jsx(props.interactables, { entry: entry }) : null }))) }) }) }));
 }
 function ReorderableItem(props) {
     const [isSelected, _setIsSelected] = useState(false);

package/dist/utils/static-classes.d.ts

@@ -1,6 +1,6 @@
 type QuickAccessMenuClasses = Record<'ActiveTab' | 'AllTabContents' | 'BackgroundAnimation' | 'BatteryDetailsLabels' | 'BatteryIcon' | 'BatteryPercentageLabel' | 'BatteryProjectedLabel' | 'BatteryProjectedValue' | 'BatterySectionContainer' | 'Blocked' | 'ComingSoon' | 'Container' | 'ContentTransition' | 'Down' | 'EmptyNotifications' | 'Enter' | 'EnterActive' | 'Exit' | 'ExitActive' | 'FooterBoxShadow' | 'FriendsListTabPanel' | 'FriendsTitle' | 'FullHeight' | 'HeaderAndFooterVisible' | 'HeaderContainer' | 'ItemFocusAnim-darkGrey' | 'ItemFocusAnim-darkerGrey' | 'ItemFocusAnim-darkerGrey-nocolor' | 'ItemFocusAnim-green' | 'ItemFocusAnim-grey' | 'ItemFocusAnim-translucent-white-10' | 'ItemFocusAnim-translucent-white-20' | 'ItemFocusAnimBorder-darkGrey' | 'KeyboardButton' | 'Label' | 'LowBattery' | 'LowBatteryGauge' | 'Menu' | 'Open' | 'PanelExitAnchor' | 'PanelOuterNav' | 'PanelSection' | 'PanelSectionRow' | 'PanelSectionTitle' | 'PopupBody' | 'QuickAccessMenu' | 'QuickAccessNotifications' | 'ReallyLow' | 'Remaining' | 'Selected' | 'Tab' | 'TabContentColumn' | 'TabGroupPanel' | 'TabPanelHidden' | 'Tabs' | 'TabsWithFooter' | 'Text' | 'Title' | 'TransitionMenuDelay' | 'Up' | 'VR' | 'ViewPlaceholder' | 'VoiceTab' | 'duration-app-launch' | 'focusAnimation' | 'hoverAnimation' | 'vrgamepadui-floating-bar-popup-panel-height' | 'vrgamepadui-floating-bar-popup-panel-width' | 'vrgamepadui-floating-keyboard-height' | 'vrgamepadui-floating-keyboard-width' | 'vrgamepadui-floating-side-panel-height' | 'vrgamepadui-floating-side-panel-width', string>;
 type ScrollPanelClasses = Record<'ScrollBoth' | 'ScrollPanel' | 'ScrollX' | 'ScrollY', string>;
-type GamepadDialogClasses = Record<'ActiveAndUnfocused' | 'AlignCenter' | 'AlignLeft' | 'AlignRight' | 'BackgroundAnimation' | 'BasicTextInput' | 'BeforeChildren' | 'BottomButtons' | 'Button' | 'ChildrenWidthFixed' | 'ChildrenWidthGrow' | 'Clickable' | 'CompactPadding' | 'ControlsListChild' | 'ControlsListOuterPanel' | 'Disabled' | 'DropDownControlButtonContents' | 'DropDownRow' | 'ExtraPaddingOnChildrenBelow' | 'ExtraSpacing' | 'Field' | 'FieldChildrenInner' | 'FieldChildrenWithIcon' | 'FieldClickTarget' | 'FieldDescription' | 'FieldIcon' | 'FieldLabel' | 'FieldLabelRow' | 'FieldLabelValue' | 'Front' | 'FullWidth' | 'GamepadDialogContent' | 'GamepadDialogContent_InnerWidth' | 'HighlightOnFocus' | 'IconContainer' | 'InlineWrapShiftsChildrenBelow' | 'ItemFocusAnim-darkGrey' | 'ItemFocusAnim-darkerGrey' | 'ItemFocusAnim-darkerGrey-nocolor' | 'ItemFocusAnim-green' | 'ItemFocusAnim-grey' | 'ItemFocusAnim-translucent-white-10' | 'ItemFocusAnim-translucent-white-20' | 'ItemFocusAnimBorder-darkGrey' | 'ItemMaxSizeDesktop' | 'Label' | 'LabelFieldValue' | 'ModalClickToDismiss' | 'ModalPosition' | 'NoHeaderPadding' | 'NoMinWidth' | 'On' | 'QuickAccess-Menu' | 'ScrollWithin' | 'Spacer' | 'StandaloneFieldSeparator' | 'StandardPadding' | 'StandardSpacing' | 'Toggle' | 'ToggleRail' | 'ToggleSwitch' | 'VR' | 'VerticalAlignCenter' | 'WithBottomSeparator' | 'WithBottomSeparatorStandard' | 'WithBottomSeparatorThick' | 'WithChildrenBelow' | 'WithDescription' | 'WithFirstRow' | 'WithStandardPadding' | 'duration-app-launch' | 'focusAnimation' | 'hoverAnimation' | 'slideInAnimation', string>;
+type GamepadDialogClasses = Record<'ActiveAndUnfocused' | 'AlignCenter' | 'AlignLeft' | 'AlignRight' | 'BackgroundAnimation' | 'BasicTextInput' | 'BeforeChildren' | 'BottomButtons' | 'Button' | 'ChildrenWidthFixed' | 'ChildrenWidthGrow' | 'Clickable' | 'CompactPadding' | 'ControlsListChild' | 'ControlsListOuterPanel' | 'Disabled' | 'DropDownControlButtonContents' | 'DropDownRow' | 'ExtraPaddingOnChildrenBelow' | 'ExtraSpacing' | 'Field' | 'FieldChildrenInner' | 'FieldChildrenWithIcon' | 'FieldClickTarget' | 'FieldDescription' | 'FieldIcon' | 'FieldLabel' | 'FieldLabelRow' | 'FieldLabelValue' | 'FieldLeftColumn' | 'Front' | 'FullWidth' | 'GamepadDialogContent' | 'GamepadDialogContent_InnerWidth' | 'HighlightOnFocus' | 'IconContainer' | 'InlineWrapShiftsChildrenBelow' | 'ItemFocusAnim-darkGrey' | 'ItemFocusAnim-darkerGrey' | 'ItemFocusAnim-darkerGrey-nocolor' | 'ItemFocusAnim-green' | 'ItemFocusAnim-grey' | 'ItemFocusAnim-translucent-white-10' | 'ItemFocusAnim-translucent-white-20' | 'ItemFocusAnimBorder-darkGrey' | 'ItemMaxSizeDesktop' | 'Label' | 'LabelFieldValue' | 'ModalClickToDismiss' | 'ModalPosition' | 'NoHeaderPadding' | 'NoMinWidth' | 'On' | 'QuickAccess-Menu' | 'ScrollWithin' | 'Spacer' | 'StandaloneFieldSeparator' | 'StandardPadding' | 'StandardSpacing' | 'Toggle' | 'ToggleRail' | 'ToggleSwitch' | 'VR' | 'VerticalAlignCenter' | 'WithBottomSeparator' | 'WithBottomSeparatorStandard' | 'WithBottomSeparatorThick' | 'WithChildrenBelow' | 'WithDescription' | 'WithFirstRow' | 'WithStandardPadding' | 'duration-app-launch' | 'focusAnimation' | 'hoverAnimation' | 'slideInAnimation', string>;
 type QuickAccessControlsClasses = Record<'BackgroundAnimation' | 'BatteryDetailsLabels' | 'BatteryIcon' | 'BatteryPercentageLabel' | 'BatteryProjectedLabel' | 'BatteryProjectedValue' | 'BatterySectionContainer' | 'ComingSoon' | 'EmptyNotifications' | 'ItemFocusAnim-darkGrey' | 'ItemFocusAnim-darkerGrey' | 'ItemFocusAnim-darkerGrey-nocolor' | 'ItemFocusAnim-green' | 'ItemFocusAnim-grey' | 'ItemFocusAnim-translucent-white-10' | 'ItemFocusAnim-translucent-white-20' | 'ItemFocusAnimBorder-darkGrey' | 'Label' | 'LowBattery' | 'LowBatteryGauge' | 'PanelSection' | 'PanelSectionRow' | 'PanelSectionTitle' | 'QuickAccessNotifications' | 'ReallyLow' | 'Remaining' | 'Text' | 'VR' | 'duration-app-launch' | 'focusAnimation' | 'hoverAnimation', string>;
 type UpdaterFieldClasses = Record<'ApplyingText' | 'BackgroundAnimation' | 'BatteryLowWarning' | 'Body' | 'CurrentStatus' | 'Denominator' | 'EventDetailTitle' | 'EventDetailsBody' | 'EventDetailsSubTitle' | 'InsufficientBatteryText' | 'ItemFocusAnim-darkGrey' | 'ItemFocusAnim-darkerGrey' | 'ItemFocusAnim-darkerGrey-nocolor' | 'ItemFocusAnim-green' | 'ItemFocusAnim-grey' | 'ItemFocusAnim-translucent-white-10' | 'ItemFocusAnim-translucent-white-20' | 'ItemFocusAnimBorder-darkGrey' | 'Label' | 'Numerator' | 'OOBEUpdateStatusContainer' | 'PatchNotes' | 'PostedTime' | 'ProgressInfoContainer' | 'ProgressStatus' | 'Separator' | 'Text' | 'TextContainer' | 'TimeRemaining' | 'Title' | 'TotalUpdateSize' | 'UnsupportedHardwareWarning' | 'UpdateBytesRemaining' | 'UpdatePanel' | 'UpdateScreen' | 'UpdateStatusContainer' | 'UpdaterFieldStatusApplying' | 'UpdaterFieldStatusSuccess' | 'duration-app-launch' | 'fadeInAnimation' | 'focusAnimation' | 'hoverAnimation', string>;
 type PlaySectionClasses = Record<'AchievementCountLabel' | 'AchievementProgressRow' | 'AchievementSVG' | 'ActionSection' | 'AppButtonsContainer' | 'Arrow' | 'AvatarAndPersona' | 'BackgroundAnimation' | 'BreakNarrow' | 'BreakShort' | 'BreakTall' | 'BreakUltraWide' | 'BreakWide' | 'ButtonChild' | 'ButtonText' | 'ChooseButton' | 'ClaimButton' | 'ClaimButtonContainer' | 'ClickablePlayBarItem' | 'CloudIconSVG' | 'CloudStatusIcon' | 'CloudStatusLabel' | 'CloudStatusRow' | 'CloudStatusSyncFail' | 'CloudSyncProblem' | 'CloudSynching' | 'ComingSoon' | 'Container' | 'ControllerConfigButton' | 'ControllerSupportInfo' | 'ControllerSupportRow' | 'DetailsProgressBar' | 'DetailsProgressContainer' | 'DetailsSection' | 'DetailsSectionExtra' | 'DetailsSectionStatus' | 'Disabled' | 'DotDotDot' | 'DownloadPaused' | 'DownloadProgressBar' | 'Downloading' | 'FavoriteButton' | 'Favorited' | 'FeatureHidden' | 'GameInfoButton' | 'GameStat' | 'GameStatIcon' | 'GameStatIconForced' | 'GameStatRight' | 'GameStatsSection' | 'GamepadUIBreakNarrow' | 'GamepadUIBreakShort' | 'GamepadUIBreakWide' | 'Glassy' | 'HideWhenNarrow' | 'Icon' | 'Icons' | 'InPage' | 'InnerContainer' | 'InvalidPlatform' | 'ItemFocusAnim-darkGrey' | 'ItemFocusAnim-darkerGrey' | 'ItemFocusAnim-darkerGrey-nocolor' | 'ItemFocusAnim-green' | 'ItemFocusAnim-grey' | 'ItemFocusAnim-translucent-white-10' | 'ItemFocusAnim-translucent-white-20' | 'ItemFocusAnimBorder-darkGrey' | 'LastPlayed' | 'LastPlayedInfo' | 'LaunchOptionCallout' | 'LaunchOptionCalloutMessage' | 'LaunchOptionCalloutMessageContainer' | 'LongButton' | 'MenuActive' | 'MenuButton' | 'MenuButtonContainer' | 'MiniAchievements' | 'OfflineMode' | 'OnlyDownloadBar' | 'PermanentlyUnavailable' | 'PlayBar' | 'PlayBarCloudStatusContainer' | 'PlayBarDetailLabel' | 'PlayBarGameIcon' | 'PlayBarGameName' | 'PlayBarIconAndGame' | 'PlayBarLabel' | 'Playtime' | 'PlaytimeIcon' | 'PlaytimeIconForced' | 'PortraitBar' | 'PrivateAppActiveIndicator' | 'RecentlyUpdated' | 'RecentlyUpdatedIcon' | 'RecentlyUpdatedLink' | 'RecentlyUpdatedText' | 'RightBreakNarrow' | 'RightBreakUltraNarrow' | 'RightBreakUltraWide' | 'RightBreakWide' | 'RightControls' | 'Row' | 'SharedLibrary' | 'ShowStreaming' | 'StatusAndStats' | 'StatusNameContainer' | 'StickyHeader' | 'StickyHeaderShadow' | 'SuperimposedGridItems' | 'SyncAnim' | 'Visible' | 'duration-app-launch' | 'favorited' | 'focusAnimation' | 'hoverAnimation', string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decky/ui",
-  "version": "4.11.5",
+  "version": "4.12.0",
   "description": "A library for interacting with the Steam frontend in Decky plugins and elsewhere.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/custom-components/ReorderableList.tsx

@@ -18,6 +18,7 @@ export type ReorderableEntry<T> = {
  * Properties for a ReorderableList component of type <T>.
  *
  * @param animate If the list should animate. @default true
+ * @param disableReordering If true, prevents entering reordering mode and hides reorder instructions. @default false
  */
 export type ReorderableListProps<T> = {
   entries: ReorderableEntry<T>[];
@@ -25,6 +26,7 @@ export type ReorderableListProps<T> = {
   interactables?: JSXElementConstructor<{ entry: ReorderableEntry<T> }>;
   fieldProps?: FieldProps;
   animate?: boolean;
+  disableReordering?: boolean;
 };
 
 /**
@@ -43,7 +45,16 @@ export function ReorderableList<T>(props: ReorderableListProps<T>) {
     setEntryList([...props.entries].sort((a: ReorderableEntry<T>, b: ReorderableEntry<T>) => a.position - b.position));
   }, [props.entries]);
 
+  useEffect(() => {
+    if (props.disableReordering && reorderEnabled) {
+      setReorderEnabled(false);
+      props.onSave(entryList);
+    }
+  }, [props.disableReordering, reorderEnabled, entryList]);
+
   function toggleReorderEnabled(): void {
+    if (props.disableReordering) return;
+
     let newReorderValue = !reorderEnabled;
     setReorderEnabled(newReorderValue);
 
@@ -75,9 +86,9 @@ export function ReorderableList<T>(props: ReorderableListProps<T>) {
         }}
       >
         <Focusable
-          onSecondaryButton={toggleReorderEnabled}
-          onSecondaryActionDescription={reorderEnabled ? 'Save Order' : 'Reorder'}
-          onClick={toggleReorderEnabled}
+          onSecondaryButton={props.disableReordering ? undefined : toggleReorderEnabled}
+          onSecondaryActionDescription={props.disableReordering ? undefined : reorderEnabled ? 'Save Order' : 'Reorder'}
+          onClick={props.disableReordering ? undefined : toggleReorderEnabled}
           onButtonDown={saveOnBackout}
         >
           {entryList.map((entry: ReorderableEntry<T>) => (

package/src/utils/static-classes.ts

@@ -108,6 +108,7 @@ type GamepadDialogClasses = Record<
   | 'FieldLabel'
   | 'FieldLabelRow'
   | 'FieldLabelValue'
+  | 'FieldLeftColumn'
   | 'Front'
   | 'FullWidth'
   | 'GamepadDialogContent'