@pingux/astro 2.33.0-alpha.6 → 2.33.0-alpha.8

package/lib/cjs/components/Tabs/Tabs.stories.js

@@ -196,11 +196,11 @@ var ContentSlots = function ContentSlots() {
     marginLeft: 6,
     marginTop: 10
   };
-  var afterTabNode = (0, _react2.jsx)(_index.Badge, {
+  var afterTabNode = (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Badge, {
     variant: "countNeutral",
     sx: nodeSx,
     label: "14"
-  });
+  }));
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Tabs, {
     items: tabs,
     mb: 50

package/lib/cjs/components/Tabs/Tabs.style.js

@@ -24,7 +24,6 @@ var tab = {
   display: 'inline-flex',
   outline: 'none',
   transform: 'translateY(1px)',
-  width: '100%',
   '&.is-focused': {
     '& > span': _objectSpread({}, _Buttons.focusWithCroppedOutline)
   },

package/lib/cjs/hooks/useField/useField.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-/// <reference types="react" />
+import { Key } from 'react';
+import { AriaLabelingProps, CollectionChildren, DOMProps } from '@react-types/shared';
 import { LabelProps as ThemeUILabelProps } from 'theme-ui';
 import { BoxProps } from '../../types';
 /**
@@ -22,7 +22,29 @@ interface LabelProps extends ThemeUILabelProps {
         [className: string]: boolean;
     };
 }
-interface ControlProps<T> extends React.HTMLAttributes<T> {
+export interface FieldControlInputProps extends AriaLabelingProps, DOMProps {
+    autoComplete?: string;
+    autoCorrect?: string;
+    autoFocus?: boolean;
+    className?: string;
+    defaultSelected?: boolean;
+    defaultValue?: string | number;
+    disabled?: boolean;
+    id?: string;
+    isFocused?: boolean;
+    isIndeterminate?: boolean;
+    maxLength?: number;
+    name?: string;
+    onChange: (event: CustomChangeEventType | React.ChangeEvent) => void | undefined;
+    placeholder?: string;
+    readOnly?: boolean;
+    required?: boolean;
+    role?: string;
+    spellCheck?: boolean;
+    type?: string;
+    value?: string | number;
+}
+export interface ControlProps extends React.HTMLAttributes<Element> {
     statusClasses?: {
         [className: string]: boolean;
     };
@@ -31,14 +53,14 @@ export interface UseFieldProps<T> {
     autocomplete?: string;
     autoComplete?: string;
     autoCorrect?: string;
-    children?: React.ReactNode;
+    children?: React.ReactNode | CollectionChildren<T>;
     className?: string;
     containerProps?: ContainerProps;
-    controlProps?: ControlProps<T>;
+    controlProps?: ControlProps;
     defaultText?: string;
     defaultValue?: string | number;
     direction?: string;
-    disabledKeys?: string[];
+    disabledKeys?: string[] | Iterable<Key>;
     hasAutoFocus?: boolean;
     hasNoStatusIndicator?: boolean;
     helperText?: string;
@@ -62,7 +84,7 @@ export interface UseFieldProps<T> {
     onFocus?: (e: React.FocusEvent) => void;
     onFocusChange?: (isFocused: boolean) => void;
     onLoadMore?: () => void;
-    onOpenChange?: () => void;
+    onOpenChange?: (isOpen: boolean) => unknown;
     onSelectionChange?: (key: string) => void;
     placeholder?: string | number;
     role?: string;
@@ -84,32 +106,7 @@ type CustomChangeEventType = {
 };
 declare const useField: <T>(props: UseFieldProps<T>) => {
     fieldContainerProps: any;
-    fieldControlInputProps: {
-        'aria-label'?: string | undefined;
-        'aria-labelledby'?: string | undefined;
-        'aria-describedby'?: string | undefined;
-        'aria-details'?: string | undefined;
-        id: string | undefined;
-        autoComplete: string | undefined;
-        autoCorrect: string | undefined;
-        autoFocus: boolean | undefined;
-        className: string;
-        defaultSelected: boolean | undefined;
-        defaultValue: string | number | undefined;
-        disabled: boolean | undefined;
-        isFocused: boolean;
-        isIndeterminate: boolean | undefined;
-        maxLength: number | undefined;
-        name: string | undefined;
-        onChange: (e: CustomChangeEventType) => any;
-        placeholder: string | number | undefined;
-        readOnly: boolean | undefined;
-        required: boolean | undefined;
-        role: string | undefined;
-        spellCheck: string | undefined;
-        type: string | undefined;
-        value: string | number | undefined;
-    };
+    fieldControlInputProps: FieldControlInputProps;
     fieldControlWrapperProps: {
         id?: string | undefined;
         statusClasses?: {
@@ -120,6 +117,7 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
         isDisabled?: boolean | undefined;
         variant?: string | undefined;
         as?: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react").ReactPortal | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | null | undefined;
+        style?: string | import("react").CSSProperties | undefined;
         grid?: import("theme-ui").StylePropertyValue<import("csstype").Property.Grid | undefined>;
         accentColor?: import("theme-ui").StylePropertyValue<import("csstype").Property.AccentColor | undefined>;
         alignContent?: import("theme-ui").StylePropertyValue<import("csstype").Property.AlignContent | undefined>;
@@ -1118,7 +1116,7 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
         color?: string | undefined;
         content?: string | undefined;
         translate?: "yes" | "no" | undefined;
-        key?: import("react").Key | null | undefined;
+        key?: Key | null | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined;
@@ -1433,7 +1431,7 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
         color?: string | undefined;
         content?: string | undefined;
         translate?: "yes" | "no" | undefined;
-        key?: import("react").Key | null | undefined;
+        key?: Key | null | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined;

package/lib/cjs/hooks/useField/useField.js

@@ -25,7 +25,7 @@ var _constants = require("../../components/Label/constants");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _ = require("..");
-var _excluded = ["autocomplete", "autoComplete", "autoCorrect", "className", "containerProps", "controlProps", "defaultValue", "hasAutoFocus", "hasNoStatusIndicator", "hintText", "id", "isDefaultSelected", "isDisabled", "isIndeterminate", "isReadOnly", "isRequired", "isRestrictiveMultivalues", "label", "labelMode", "labelProps", "maxLength", "name", "onBlur", "onChange", "onFocus", "placeholder", "role", "spellCheck", "status", "statusClasses", "type", "value", "wrapperProps"];
+var _excluded = ["autocomplete", "autoComplete", "autoCorrect", "className", "containerProps", "controlProps", "defaultValue", "hasAutoFocus", "hasNoStatusIndicator", "hintText", "id", "isDefaultSelected", "isDisabled", "isIndeterminate", "isReadOnly", "isRequired", "isRestrictiveMultivalues", "label", "labelMode", "labelProps", "maxLength", "name", "onBlur", "onChange", "onFocus", "placeholder", "role", "spellCheck", "status", "statusClasses", "type", "value", "wrapperProps"]; // eslint-disable-next-line import/no-unresolved
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 /**

package/lib/cjs/hooks/useSelectField/index.d.ts

@@ -0,0 +1 @@
+export { default } from './useSelectField';

package/lib/cjs/hooks/useSelectField/useSelectField.d.ts

@@ -0,0 +1,55 @@
+import React, { DOMAttributes, Key } from 'react';
+import { AriaButtonProps } from 'react-aria';
+import { SelectState } from 'react-stately';
+import { CollectionChildren } from '@react-types/shared';
+import { LabelProps as ThemeUILabelProps } from 'theme-ui';
+import { Axis, BoxProps, FocusableElement, PlacementAxis, ReactRef, StyleProps } from '../../types';
+import { FieldControlInputProps } from '../useField/useField';
+interface UseSelectFieldProps<T> {
+    children: CollectionChildren<T>;
+    align?: PlacementAxis;
+    defaultSelectedKey?: string;
+    defaultText?: string;
+    direction?: Axis;
+    disabledKeys?: Iterable<Key>;
+    hasNoEmptySelection?: boolean;
+    isDefaultOpen?: boolean;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    isNotFlippable?: boolean;
+    isOpen?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+    items?: Iterable<T>;
+    label?: string;
+    listboxStyle?: React.CSSProperties;
+    name?: string;
+    placeholder?: string;
+    selectedKey?: string;
+    onLoadMore?: () => unknown;
+    onOpenChange?: (isOpen: boolean) => unknown;
+    onSelectionChange?: (key: Key) => unknown;
+    controlProps?: React.HTMLAttributes<Element>;
+    scrollBoxProps?: BoxProps;
+    listBoxProps?: BoxProps;
+    labelProps?: ThemeUILabelProps;
+    containerProps?: BoxProps;
+    labelMode: 'default' | 'float' | 'left';
+}
+interface UseSelectFieldReturnProps {
+    columnStyleProps: StyleProps;
+    fieldContainerProps: BoxProps;
+    fieldControlInputProps: FieldControlInputProps;
+    fieldControlWrapperProps: BoxProps;
+    fieldLabelProps: ThemeUILabelProps;
+    isLoadingInitial?: boolean;
+    listBoxRef: ReactRef;
+    overlay: React.ReactNode;
+    popoverRef: ReactRef;
+    state: SelectState<object>;
+    triggerProps: AriaButtonProps<'button'>;
+    triggerRef: ReactRef;
+    valueProps: DOMAttributes<FocusableElement>;
+}
+declare const useSelectField: <T extends object>(props: UseSelectFieldProps<T>, ref: ReactRef) => UseSelectFieldReturnProps;
+export default useSelectField;

package/lib/cjs/hooks/useSelectField/useSelectField.js

@@ -24,7 +24,7 @@ var _reactAria = require("react-aria");
 var _reactStately = require("react-stately");
 var _utils = require("@react-aria/utils");
 var _constants = require("../../components/Label/constants");
-var _ListBox = _interopRequireDefault(require("../../components/ListBox"));
+var _ListBox = _interopRequireDefault(require("../../components/ListBox/ListBox"));
 var _PopoverContainer = _interopRequireDefault(require("../../components/PopoverContainer"));
 var _ScrollBox = _interopRequireDefault(require("../../components/ScrollBox"));
 var _ = require("..");
@@ -32,7 +32,7 @@ var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; } // eslint-disable-next-line import/no-unresolved
 var useSelectField = function useSelectField(props, ref) {
   var _context;
   var align = props.align,
@@ -64,8 +64,7 @@ var useSelectField = function useSelectField(props, ref) {
   // We use falsy booleans as defaults, but React Aria has this as true by default so we need to
   // negate this.
   var shouldFlip = !isNotFlippable;
-  var selectProps = _objectSpread({
-    children: children,
+  var selectProps = _objectSpread(_objectSpread({
     defaultSelectedKey: defaultSelectedKey,
     defaultText: defaultText,
     disabledKeys: disabledKeys,
@@ -87,13 +86,14 @@ var useSelectField = function useSelectField(props, ref) {
     disallowEmptySelection: disallowEmptySelection,
     // must match React Aria API
     shouldFlip: shouldFlip
-  }, controlProps);
+  }, controlProps), {}, {
+    children: children
+  });
   // Create state based on the incoming props
   var state = (0, _reactStately.useSelectState)(selectProps);
   var popoverRef = (0, _react.useRef)();
-  var triggerRef = (0, _react.useRef)();
   var listBoxRef = (0, _react.useRef)();
-
+  var triggerRef = (0, _react.useRef)();
   /* istanbul ignore next */
   (0, _react.useImperativeHandle)(ref, function () {
     return triggerRef.current;
@@ -120,7 +120,7 @@ var useSelectField = function useSelectField(props, ref) {
       placeholder: props.labelMode === _constants.modes.FLOAT ? '' : placeholder,
       labelProps: _objectSpread(_objectSpread({}, props.labelProps), labelProps),
       containerProps: _objectSpread({
-        isFloatLabelActive: state.selectedItem
+        isFloatLabelActive: !!state.selectedItem
       }, props.containerProps)
     })),
     fieldContainerProps = _useField.fieldContainerProps,
@@ -152,7 +152,7 @@ var useSelectField = function useSelectField(props, ref) {
   }, [state.isOpen, updatePosition]);
 
   // Measure the width of the input to inform the width of the listbox (below).
-  var _useState = (0, _react.useState)(null),
+  var _useState = (0, _react.useState)(0),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     buttonWidth = _useState2[0],
     setButtonWidth = _useState2[1];
@@ -161,7 +161,7 @@ var useSelectField = function useSelectField(props, ref) {
     if (triggerRef.current) {
       setButtonWidth(triggerRef.current.offsetWidth);
     }
-  }, [triggerRef, setButtonWidth, state.isOpen]);
+  }, [triggerRef, setButtonWidth]);
   (0, _utils.useResizeObserver)({
     ref: triggerRef,
     onResize: onResize

package/lib/cjs/types/item.d.ts

@@ -1,17 +1,14 @@
-import { CSSProperties, ElementType } from 'react';
+import { ElementType } from 'react';
 import type { ItemProps } from '@react-types/shared';
 import { DOMAttributes, StyleProps } from './shared';
-export interface StylingProps extends DOMAttributes, StyleProps {
-    style?: CSSProperties | string;
-}
 declare module '@react-types/shared' {
     interface ItemProps<T> extends StyleProps, DOMAttributes {
         /** The rendered label for the item. */
         label?: string;
         /** Props for the accordion item content element. */
-        regionProps?: StylingProps;
+        regionProps?: StyleProps;
         /** Props for the accordion item content element. */
-        containerProps?: StylingProps;
+        containerProps?: StyleProps;
         /** Whether the item has a separator */
         isSeparator?: boolean;
         /** Whether the item is pressed */
@@ -23,7 +20,7 @@ declare module '@react-types/shared' {
         /** A URL to link to if elementType="a". */
         href?: string;
         /** Inline styling prop for item */
-        sx?: StylingProps;
+        sx?: StyleProps;
     }
 }
 export default ItemProps;

package/lib/cjs/types/popoverContainer.d.ts

@@ -16,6 +16,7 @@ export interface PopoverContainerProps extends StylePropsExtended, DOMAttributes
     isKeyboardDismissDisabled?: boolean;
     isNonModal?: boolean;
     isDismissable?: boolean;
+    isOpen?: boolean;
 }
 export interface PopoverWrapperProps extends PopoverContainerProps {
     isOpen?: boolean;

package/lib/cjs/types/shared/style.d.ts

@@ -8,4 +8,10 @@ export interface StyleProps extends ThemeUICSSProperties, SxProp {
     variant?: string;
     /** The base HTML tag name or React component type to render */
     as?: string | React.ReactNode | React.ElementType;
+    /** Inline style object that allows you to directly apply CSS styles to the element. */
+    style?: React.CSSProperties | string;
 }
+export type Placement = 'bottom' | 'bottom left' | 'bottom right' | 'bottom start' | 'bottom end' | 'top' | 'top left' | 'top right' | 'top start' | 'top end' | 'left' | 'left top' | 'left bottom' | 'start' | 'start top' | 'start bottom' | 'right' | 'right top' | 'right bottom' | 'end' | 'end top' | 'end bottom';
+export type Axis = 'top' | 'bottom' | 'left' | 'right';
+export type SizeAxis = 'width' | 'height';
+export type PlacementAxis = Axis | 'center';

package/lib/components/Tabs/Tabs.stories.js

@@ -4,7 +4,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import React, { useState } from 'react';
 import LockIcon from '@pingux/mdi-react/LockIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Badge, Icon, Tab, Tabs, Text } from '../../index';
+import { Badge, Box, Icon, Tab, Tabs, Text } from '../../index';
 import TabsReadme from './Tabs.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -174,11 +174,11 @@ export var ContentSlots = function ContentSlots() {
     marginLeft: 6,
     marginTop: 10
   };
-  var afterTabNode = ___EmotionJSX(Badge, {
+  var afterTabNode = ___EmotionJSX(Box, null, ___EmotionJSX(Badge, {
     variant: "countNeutral",
     sx: nodeSx,
     label: "14"
-  });
+  }));
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Tabs, {
     items: tabs,
     mb: 50

package/lib/components/Tabs/Tabs.style.js

@@ -17,7 +17,6 @@ export var tab = {
   display: 'inline-flex',
   outline: 'none',
   transform: 'translateY(1px)',
-  width: '100%',
   '&.is-focused': {
     '& > span': _objectSpread({}, focusWithCroppedOutline)
   },

package/lib/hooks/useField/useField.js

@@ -15,6 +15,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { useEffect, useState } from 'react';
 import { mergeProps, useFocusRing, useLabel } from 'react-aria';
 import { useFocusWithin } from '@react-aria/interactions';
+// eslint-disable-next-line import/no-unresolved
+
 import noop from 'lodash/noop';
 import omit from 'lodash/omit';
 import { modes as labelModes } from '../../components/Label/constants';

package/lib/hooks/useSelectField/useSelectField.js

@@ -16,8 +16,10 @@ import React, { useCallback, useImperativeHandle, useLayoutEffect, useRef, useSt
 import { DismissButton, FocusScope, useOverlayPosition, useSelect } from 'react-aria';
 import { useSelectState } from 'react-stately';
 import { useResizeObserver } from '@react-aria/utils';
+// eslint-disable-next-line import/no-unresolved
+
 import { modes } from '../../components/Label/constants';
-import ListBox from '../../components/ListBox';
+import ListBox from '../../components/ListBox/ListBox';
 import PopoverContainer from '../../components/PopoverContainer';
 import ScrollBox from '../../components/ScrollBox';
 import { useColumnStyles, useDeprecationWarning, useField } from '..';
@@ -53,8 +55,7 @@ var useSelectField = function useSelectField(props, ref) {
   // We use falsy booleans as defaults, but React Aria has this as true by default so we need to
   // negate this.
   var shouldFlip = !isNotFlippable;
-  var selectProps = _objectSpread({
-    children: children,
+  var selectProps = _objectSpread(_objectSpread({
     defaultSelectedKey: defaultSelectedKey,
     defaultText: defaultText,
     disabledKeys: disabledKeys,
@@ -76,13 +77,14 @@ var useSelectField = function useSelectField(props, ref) {
     disallowEmptySelection: disallowEmptySelection,
     // must match React Aria API
     shouldFlip: shouldFlip
-  }, controlProps);
+  }, controlProps), {}, {
+    children: children
+  });
   // Create state based on the incoming props
   var state = useSelectState(selectProps);
   var popoverRef = useRef();
-  var triggerRef = useRef();
   var listBoxRef = useRef();
-
+  var triggerRef = useRef();
   /* istanbul ignore next */
   useImperativeHandle(ref, function () {
     return triggerRef.current;
@@ -109,7 +111,7 @@ var useSelectField = function useSelectField(props, ref) {
       placeholder: props.labelMode === modes.FLOAT ? '' : placeholder,
       labelProps: _objectSpread(_objectSpread({}, props.labelProps), labelProps),
       containerProps: _objectSpread({
-        isFloatLabelActive: state.selectedItem
+        isFloatLabelActive: !!state.selectedItem
       }, props.containerProps)
     })),
     fieldContainerProps = _useField.fieldContainerProps,
@@ -141,7 +143,7 @@ var useSelectField = function useSelectField(props, ref) {
   }, [state.isOpen, updatePosition]);
 
   // Measure the width of the input to inform the width of the listbox (below).
-  var _useState = useState(null),
+  var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     buttonWidth = _useState2[0],
     setButtonWidth = _useState2[1];
@@ -150,7 +152,7 @@ var useSelectField = function useSelectField(props, ref) {
     if (triggerRef.current) {
       setButtonWidth(triggerRef.current.offsetWidth);
     }
-  }, [triggerRef, setButtonWidth, state.isOpen]);
+  }, [triggerRef, setButtonWidth]);
   useResizeObserver({
     ref: triggerRef,
     onResize: onResize

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.33.0-alpha.6",
+  "version": "2.33.0-alpha.8",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",