@headlessui/react - npm Package Compare versions

Comparing version 0.0.0-ba1bd52 to 0.0.0-d60d2a5

dist/components/disclosure/disclosure.esm.js

 import { extends as _extends, objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { useReducer, useEffect, useCallback, useMemo, createContext, useContext, Fragment } from 'react';
+import React, { useReducer, useEffect, useCallback, useMemo, createContext, useRef, useContext, Fragment } from 'react';
 import { match } from '../../utils/match.esm.js';
@@ -10,2 +10,3 @@ import { render, forwardRefWithAs, Features } from '../../utils/render.esm.js';
 import { OpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed.esm.js';
+import { useResolveButtonType } from '../../hooks/use-resolve-button-type.esm.js';
 
@@ -180,3 +181,4 @@ var _reducers;
 
-  var buttonRef = useSyncRefs(ref);
+  var internalButtonRef = useRef(null);
+  var buttonRef = useSyncRefs(internalButtonRef, ref);
   var panelContext = useDisclosurePanelContext();
@@ -246,5 +248,7 @@ var isWithinPanel = panelContext === null ? false : panelContext === state.panelId;
   }, [state]);
+  var type = useResolveButtonType(props, internalButtonRef);
   var passthroughProps = props;
   var propsWeControl = isWithinPanel ? {
-    type: 'button',
+    ref: buttonRef,
+    type: type,
     onKeyDown: handleKeyDown,
@@ -255,3 +259,3 @@ onClick: handleClick
     id: state.buttonId,
-    type: 'button',
+    type: type,
     'aria-expanded': props.disabled ? undefined : state.disclosureState === DisclosureStates.Open,
@@ -258,0 +262,0 @@ 'aria-controls': state.linkedPanel ? state.panelId : undefined,

dist/components/listbox/listbox.esm.js

@@ -13,2 +13,3 @@ import { extends as _extends, objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { OpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed.esm.js';
+import { useResolveButtonType } from '../../hooks/use-resolve-button-type.esm.js';
 import { disposables } from '../../utils/disposables.esm.js';
@@ -333,3 +334,3 @@ import { useDisposables } from '../../hooks/use-disposables.esm.js';
     id: id,
-    type: 'button',
+    type: useResolveButtonType(props, state.buttonRef),
     'aria-haspopup': true,
@@ -336,0 +337,0 @@ 'aria-controls': (_state$optionsRef$cur = state.optionsRef.current) == null ? void 0 : _state$optionsRef$cur.id,

dist/components/menu/menu.esm.js

@@ -13,2 +13,3 @@ import { extends as _extends, objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { OpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed.esm.js';
+import { useResolveButtonType } from '../../hooks/use-resolve-button-type.esm.js';
 import { disposables } from '../../utils/disposables.esm.js';
@@ -274,3 +275,3 @@ import { useDisposables } from '../../hooks/use-disposables.esm.js';
     id: id,
-    type: 'button',
+    type: useResolveButtonType(props, state.buttonRef),
     'aria-haspopup': true,
@@ -277,0 +278,0 @@ 'aria-controls': (_state$itemsRef$curre = state.itemsRef.current) == null ? void 0 : _state$itemsRef$curre.id,

dist/components/popover/popover.esm.js

@@ -12,2 +12,3 @@ import { extends as _extends, objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, createForOfIteratorHelperLoose as _createForOfIteratorHelperLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { OpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed.esm.js';
+import { useResolveButtonType } from '../../hooks/use-resolve-button-type.esm.js';
 
@@ -245,3 +246,4 @@ var _reducers;
     });
-  }); // TODO: Revisit when handling Tab/Shift+Tab when using Portal's
+  });
+  var withinPanelButtonRef = useSyncRefs(internalButtonRef, ref); // TODO: Revisit when handling Tab/Shift+Tab when using Portal's
 
@@ -384,5 +386,7 @@ var activeElementRef = useRef(null);
   }, [state]);
+  var type = useResolveButtonType(props, internalButtonRef);
   var passthroughProps = props;
   var propsWeControl = isWithinPanel ? {
-    type: 'button',
+    ref: withinPanelButtonRef,
+    type: type,
     onKeyDown: handleKeyDown,
@@ -393,3 +397,3 @@ onClick: handleClick
     id: state.buttonId,
-    type: 'button',
+    type: type,
     'aria-expanded': props.disabled ? undefined : state.popoverState === PopoverStates.Open,
@@ -396,0 +400,0 @@ 'aria-controls': state.panel ? state.panelId : undefined,

dist/components/switch/switch.esm.js

 import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { useContext, useCallback, useMemo, createContext, useState, Fragment } from 'react';
+import React, { useContext, useRef, useCallback, useMemo, createContext, useState, Fragment } from 'react';
 import { render } from '../../utils/render.esm.js';
+import { useSyncRefs } from '../../hooks/use-sync-refs.esm.js';
 import { Keys } from '../keyboard.esm.js';
@@ -8,2 +9,3 @@ import { isDisabledReactIssue7711 } from '../../utils/bugs.esm.js';
 import { Description, useDescriptions } from '../description/description.esm.js';
+import { useResolveButtonType } from '../../hooks/use-resolve-button-type.esm.js';
 import { Label, useLabels } from '../label/label.esm.js';
@@ -68,2 +70,4 @@
   var groupContext = useContext(GroupContext);
+  var internalSwitchRef = useRef(null);
+  var switchRef = useSyncRefs(internalSwitchRef, groupContext === null ? null : groupContext.setSwitch);
   var toggle = useCallback(function () {
@@ -92,4 +96,5 @@ return onChange(!checked);
     id: id,
-    ref: groupContext === null ? undefined : groupContext.setSwitch,
+    ref: switchRef,
     role: 'switch',
+    type: useResolveButtonType(props, internalSwitchRef),
     tabIndex: 0,
@@ -103,9 +108,2 @@ 'aria-checked': checked,
   };
-
-  if (passThroughProps.as === 'button') {
-    Object.assign(propsWeControl, {
-      type: 'button'
-    });
-  }
-
   return render({
@@ -112,0 +110,0 @@ props: _extends({}, passThroughProps, propsWeControl),

dist/components/tabs/tabs.d.ts

@@ -9,3 +9,3 @@ import React, { ElementType } from 'react';
 }
-export declare function Tabs<TTag extends ElementType = typeof DEFAULT_TABS_TAG>(props: Props<TTag, TabsRenderPropArg> & {
+declare function Tabs<TTag extends ElementType = typeof DEFAULT_TABS_TAG>(props: Props<TTag, TabsRenderPropArg> & {
     defaultIndex?: number;
@@ -16,5 +16,15 @@ onChange?: (index: number) => void;
 }): JSX.Element;
-export declare namespace Tabs {
+interface ListRenderPropArg {
+    selectedIndex: number;
+}
+declare type ListPropsWeControl = 'role' | 'aria-orientation';
+declare let DEFAULT_TAB_TAG: "button";
+interface TabRenderPropArg {
+    selected: boolean;
+}
+declare type TabPropsWeControl = 'id' | 'role' | 'type' | 'aria-controls' | 'aria-selected' | 'tabIndex';
+export declare function Tab<TTag extends ElementType = typeof DEFAULT_TAB_TAG>(props: Props<TTag, TabRenderPropArg, TabPropsWeControl>): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null;
+export declare namespace Tab {
+    var Group: typeof Tabs;
     var List: <TTag extends React.ElementType<any> = "div">(props: Props<TTag, ListRenderPropArg, ListPropsWeControl>) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null;
-    var Tab: <TTag extends React.ElementType<any> = "button">(props: Props<TTag, TabRenderPropArg, TabPropsWeControl>) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null;
     var Panels: <TTag extends React.ElementType<any> = "div">(props: Props<TTag, PanelsRenderPropArg, "1D45E01E-AF44-47C4-988A-19A94EBAF55C">) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null;
@@ -119,10 +129,2 @@ var Panel: <TTag extends React.ElementType<any> = "div">(props: (Pick<import("../../types").PropsOf<TTag>, Exclude<keyof import("../../types").PropsOf<TTag>, "children" | "as" | "refName" | "className" | "role">> & {
 }
-interface ListRenderPropArg {
-    selectedIndex: number;
-}
-declare type ListPropsWeControl = 'role' | 'aria-orientation';
-interface TabRenderPropArg {
-    selected: boolean;
-}
-declare type TabPropsWeControl = 'id' | 'role' | 'type' | 'aria-controls' | 'aria-selected' | 'tabIndex';
 interface PanelsRenderPropArg {
@@ -129,0 +131,0 @@ selectedIndex: number;

dist/components/tabs/tabs.esm.js

 import { extends as _extends, objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { useReducer, useMemo, useRef, useEffect, createContext, Fragment, useCallback, useContext } from 'react';
+import React, { useRef, useCallback, useMemo, createContext, useContext, useReducer, useEffect, Fragment } from 'react';
 import { match } from '../../utils/match.esm.js';
@@ -10,2 +10,3 @@ import { render, Features } from '../../utils/render.esm.js';
 import { focusIn, Focus } from '../../utils/focus-management.esm.js';
+import { useResolveButtonType } from '../../hooks/use-resolve-button-type.esm.js';
 
@@ -73,3 +74,3 @@ var _reducers;
   if (context === null) {
-    var err = new Error("<" + component + " /> is missing a parent <" + Tabs.name + " /> component.");
+    var err = new Error("<" + component + " /> is missing a parent <Tab.Group /> component.");
     if (Error.captureStackTrace) Error.captureStackTrace(err, useTabsContext);
@@ -88,2 +89,3 @@ throw err;
 var DEFAULT_TABS_TAG = Fragment;
+
 function Tabs(props) {
@@ -194,6 +196,7 @@ var _props$defaultIndex = props.defaultIndex,
 
+
 var DEFAULT_LIST_TAG = 'div';
 
 function List(props) {
-  var _useTabsContext = useTabsContext([Tabs.name, List.name].join('.')),
+  var _useTabsContext = useTabsContext([Tab.name, List.name].join('.')),
       _useTabsContext$ = _useTabsContext[0],
@@ -221,9 +224,8 @@ selectedIndex = _useTabsContext$.selectedIndex,
 var DEFAULT_TAB_TAG = 'button';
-
 function Tab(props) {
-  var _props$type, _panels$myIndex, _panels$myIndex$curre;
+  var _panels$myIndex, _panels$myIndex$curre;
 
   var id = "headlessui-tabs-tab-" + useId();
 
-  var _useTabsContext2 = useTabsContext([Tabs.name, Tab.name].join('.')),
+  var _useTabsContext2 = useTabsContext(Tab.name),
       _useTabsContext2$ = _useTabsContext2[0],
@@ -310,3 +312,2 @@ selectedIndex = _useTabsContext2$.selectedIndex,
   }, [change, myIndex, internalTabRef]);
-  var type = ((_props$type = props == null ? void 0 : props.type) != null ? _props$type : (props.as || DEFAULT_TAB_TAG) === 'button') ? 'button' : undefined;
   var slot = useMemo(function () {
@@ -324,3 +325,3 @@ return {
     role: 'tab',
-    type: type,
+    type: useResolveButtonType(props, internalTabRef),
     'aria-controls': (_panels$myIndex = panels[myIndex]) == null ? void 0 : (_panels$myIndex$curre = _panels$myIndex.current) == null ? void 0 : _panels$myIndex$curre.id,
@@ -346,7 +347,6 @@ 'aria-selected': selected,
 
-
 var DEFAULT_PANELS_TAG = 'div';
 
 function Panels(props) {
-  var _useTabsContext3 = useTabsContext([Tabs.name, Panels.name].join('.')),
+  var _useTabsContext3 = useTabsContext([Tab.name, Panels.name].join('.')),
       selectedIndex = _useTabsContext3[0].selectedIndex;
@@ -374,3 +374,3 @@
 
-  var _useTabsContext4 = useTabsContext([Tabs.name, Panel.name].join('.')),
+  var _useTabsContext4 = useTabsContext([Tab.name, Panel.name].join('.')),
       _useTabsContext4$ = _useTabsContext4[0],
@@ -435,8 +435,8 @@ selectedIndex = _useTabsContext4$.selectedIndex,
 
-Tabs.List = List;
-Tabs.Tab = Tab;
-Tabs.Panels = Panels;
-Tabs.Panel = Panel;
+Tab.Group = Tabs;
+Tab.List = List;
+Tab.Panels = Panels;
+Tab.Panel = Panel;
 
-export { Tabs };
+export { Tab };
 //# sourceMappingURL=tabs.esm.js.map

dist/hooks/use-sync-refs.d.ts

 /// <reference types="react" />
-export declare function useSyncRefs<TType>(...refs: (React.MutableRefObject<TType> | ((instance: TType) => void) | null)[]): (value: TType) => void;
+export declare function useSyncRefs<TType>(...refs: (React.MutableRefObject<TType | null> | ((instance: TType) => void) | null)[]): (value: TType) => void;

dist/index.esm.js

@@ -10,4 +10,4 @@ export { Portal } from './components/portal/portal.esm.js';
 export { Switch } from './components/switch/switch.esm.js';
-export { Tabs } from './components/tabs/tabs.esm.js';
+export { Tab } from './components/tabs/tabs.esm.js';
 export { Transition } from './components/transitions/transition.esm.js';
 //# sourceMappingURL=index.esm.js.map

package.json

 {
   "name": "@headlessui/react",
-  "version": "0.0.0-ba1bd52",
+  "version": "0.0.0-d60d2a5",
   "description": "A set of completely unstyled, fully accessible UI components for React, designed to integrate beautifully with Tailwind CSS.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2375753

increased by0.82%

Number of package files

141

increased by2.17%

Lines of code

16667

increased by0.63%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes