@telus-uds/components-base 1.96.0 → 1.97.1

package/lib/Listbox/Listbox.js

@@ -1,33 +1,24 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _ExpandCollapse = _interopRequireDefault(require("../ExpandCollapse"));
-var _ListboxGroup = _interopRequireDefault(require("./ListboxGroup"));
-var _ListboxItem = _interopRequireDefault(require("./ListboxItem"));
-var _ListboxContext = require("./ListboxContext");
-var _ListboxOverlay = _interopRequireDefault(require("./ListboxOverlay"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
-const styles = _StyleSheet.default.create({
+import React, { createElement as _createElement } from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
+import { useThemeTokens } from '../ThemeProvider';
+import { withLinkRouter, getTokensPropType } from '../utils';
+import ExpandCollapse from '../ExpandCollapse';
+import ListboxGroup from './ListboxGroup';
+import ListboxItem from './ListboxItem';
+import { ListboxContext } from './ListboxContext';
+import DropdownOverlay from './ListboxOverlay';
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = StyleSheet.create({
   list: {
     padding: 0,
     margin: 0
   }
 });
 const getInitialOpen = (items, selectedId) => items.filter(item => item.items && item.items.some(nestedItem => (nestedItem.id ?? nestedItem.label) === selectedId)).map(item => item.id ?? item.label);
-const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const Listbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     items = [],
     firstItemRef = null,
@@ -42,18 +33,18 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     tokens
   } = _ref;
   const initialOpen = getInitialOpen(items, defaultSelectedId);
-  const [selectedId, setSelectedId] = _react.default.useState(defaultSelectedId);
+  const [selectedId, setSelectedId] = React.useState(defaultSelectedId);
   const {
     minHeight,
     minWidth
-  } = (0, _ThemeProvider.useThemeTokens)('Listbox', variant, tokens);
+  } = useThemeTokens('Listbox', variant, tokens);
 
   // We need to keep track of each item's ref in order to be able to
   // focus on a specific item via keyboard navigation
-  const itemRefs = _react.default.useRef([]);
+  const itemRefs = React.useRef([]);
   if (firstItemRef !== null && firstItemRef !== void 0 && firstItemRef.current) itemRefs.current[0] = firstItemRef.current;
-  const [focusedIndex, setFocusedIndex] = _react.default.useState(0);
-  const handleKeydown = _react.default.useCallback(event => {
+  const [focusedIndex, setFocusedIndex] = React.useState(0);
+  const handleKeydown = React.useCallback(event => {
     const nextItemRef = itemRefs.current[focusedIndex + 1];
     const prevItemRef = itemRefs.current[focusedIndex - 1];
     if (event.key === 'ArrowUp' || event.shiftKey && event.key === 'Tab') {
@@ -62,7 +53,7 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       if (prevItemRef) {
         event.preventDefault();
         prevItemRef.focus();
-      } else if (parentRef) (_parentRef$current = parentRef.current) === null || _parentRef$current === void 0 ? void 0 : _parentRef$current.focus();
+      } else if (parentRef) (_parentRef$current = parentRef.current) === null || _parentRef$current === void 0 || _parentRef$current.focus();
       setFocusedIndex(focusedIndex - 1);
     } else if ((event.key === 'ArrowDown' || event.key === 'Tab') && nextItemRef) {
       event.preventDefault();
@@ -71,22 +62,22 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     } else if (event.key === 'Escape') {
       var _parentRef$current2, _parentRef$current3;
       // Close the dropdown
-      parentRef === null || parentRef === void 0 ? void 0 : (_parentRef$current2 = parentRef.current) === null || _parentRef$current2 === void 0 ? void 0 : _parentRef$current2.click();
+      parentRef === null || parentRef === void 0 || (_parentRef$current2 = parentRef.current) === null || _parentRef$current2 === void 0 || _parentRef$current2.click();
       // Return focus to the dropdown control after leaving the last item
-      parentRef === null || parentRef === void 0 ? void 0 : (_parentRef$current3 = parentRef.current) === null || _parentRef$current3 === void 0 ? void 0 : _parentRef$current3.focus();
+      parentRef === null || parentRef === void 0 || (_parentRef$current3 = parentRef.current) === null || _parentRef$current3 === void 0 || _parentRef$current3.focus();
       if (onClose) onClose(event);
     } else if (!nextItemRef && firstItemRef) {
       var _firstItemRef$current;
       // If the last item is focused, move the focus to the first one
       event.preventDefault();
       setFocusedIndex(0);
-      (_firstItemRef$current = firstItemRef.current) === null || _firstItemRef$current === void 0 ? void 0 : _firstItemRef$current.focus();
+      (_firstItemRef$current = firstItemRef.current) === null || _firstItemRef$current === void 0 || _firstItemRef$current.focus();
     }
   }, [focusedIndex, onClose, parentRef, firstItemRef]);
 
   // Add listeners for mouse clicks outside and for key presses
-  _react.default.useEffect(() => {
-    if (_Platform.default.OS === 'web') {
+  React.useEffect(() => {
+    if (Platform.OS === 'web') {
       window.addEventListener('click', onClose);
       window.addEventListener('keydown', handleKeydown);
       window.addEventListener('touchstart', onClose);
@@ -98,16 +89,16 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     }
     return () => {};
   }, [onClose, handleKeydown]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListboxContext.ListboxContext.Provider, {
+  return /*#__PURE__*/_jsx(ListboxContext.Provider, {
     value: {
       selectedId,
       setSelectedId
     },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default, {
+    children: /*#__PURE__*/_jsx(ExpandCollapse, {
       initialOpen: initialOpen,
       maxOpen: 1,
       ref: ref,
-      children: expandProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      children: expandProps => /*#__PURE__*/_jsx(View, {
         style: [styles.list, {
           minHeight,
           minWidth
@@ -126,7 +117,7 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
             itemRefs.current[index] = currentItemRef;
             return currentItemRef;
           };
-          return nestedItems ? /*#__PURE__*/(0, _react.createElement)(_ListboxGroup.default, {
+          return nestedItems ? /*#__PURE__*/_createElement(ListboxGroup, {
             ...item,
             expandProps: expandProps,
             LinkRouter: LinkRouter,
@@ -135,7 +126,7 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
             nextItemRef: itemRefs.current[index + 1] ?? null,
             ref: index === 0 ? firstItemRef : itemRef,
             key: itemId
-          }) : /*#__PURE__*/(0, _react.createElement)(_ListboxItem.default, {
+          }) : /*#__PURE__*/_createElement(ListboxItem, {
             ...item,
             key: itemId,
             id: itemId,
@@ -152,30 +143,29 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 });
 Listbox.displayName = 'Listbox';
 Listbox.propTypes = {
-  ..._utils.withLinkRouter.propTypes,
-  tokens: (0, _utils.getTokensPropType)('Listbox'),
+  ...withLinkRouter.propTypes,
+  tokens: getTokensPropType('Listbox'),
   /**
    * Focus will be moved to the item with this ref once within the menu.
    */
-  firstItemRef: _propTypes.default.object,
+  firstItemRef: PropTypes.object,
   /**
    * Focus will be returned to the dropdown control with this ref after leaving
    * the last menu item.
    */
-  parentRef: _propTypes.default.object,
+  parentRef: PropTypes.object,
   /**
    * `Listbox` items
    */
-  items: _propTypes.default.array,
+  items: PropTypes.array,
   /**
    * To select an item by default
    */
-  selectedId: _propTypes.default.string,
+  selectedId: PropTypes.string,
   /**
    * onClose event
    */
-  onClose: _propTypes.default.func
+  onClose: PropTypes.func
 };
-Listbox.Overlay = _ListboxOverlay.default;
-var _default = Listbox;
-exports.default = _default;
+Listbox.Overlay = DropdownOverlay;
+export default Listbox;

package/lib/Listbox/ListboxContext.js

@@ -1,12 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useListboxContext = exports.ListboxContext = void 0;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const ListboxContext = /*#__PURE__*/_react.default.createContext({});
-exports.ListboxContext = ListboxContext;
-const useListboxContext = () => _react.default.useContext(ListboxContext);
-exports.useListboxContext = useListboxContext;
+import React from 'react';
+const ListboxContext = /*#__PURE__*/React.createContext({});
+const useListboxContext = () => React.useContext(ListboxContext);
+export { ListboxContext, useListboxContext };

package/lib/Listbox/ListboxGroup.js

@@ -1,24 +1,16 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _utils = require("../utils");
-var _ExpandCollapse = _interopRequireDefault(require("../ExpandCollapse"));
-var _ListboxItem = _interopRequireDefault(require("./ListboxItem"));
-var _ListboxContext = require("./ListboxContext");
-var _GroupControl = _interopRequireDefault(require("./GroupControl"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint-disable react-native-a11y/has-valid-accessibility-role */
-
-const styles = _StyleSheet.default.create({
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
+import { withLinkRouter } from '../utils';
+import ExpandCollapse from '../ExpandCollapse';
+import ListboxItem from './ListboxItem';
+import { useListboxContext } from './ListboxContext';
+import GroupControl from './GroupControl';
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = StyleSheet.create({
   groupWrapper: {
     margin: 0,
     padding: 0,
@@ -29,12 +21,12 @@ const styles = _StyleSheet.default.create({
     padding: 0
   }
 });
-const getAccessibilityRole = () => _Platform.default.select({
+const getAccessibilityRole = () => Platform.select({
   ios: 'listitem',
   android: 'none',
   web: 'listitem'
 });
-const ListboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const ListboxGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     id,
     label,
@@ -48,14 +40,14 @@ const ListboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   } = _ref;
   const {
     selectedId
-  } = (0, _ListboxContext.useListboxContext)();
+  } = useListboxContext();
 
   // TODO: implement keyboard navigation via refs for grouped items separately here
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  return /*#__PURE__*/_jsx(View, {
     id: "test",
     style: styles.groupWrapper,
     accessibilityRole: getAccessibilityRole(),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default.Panel, {
+    children: /*#__PURE__*/_jsx(ExpandCollapse.Panel, {
       panelId: id ?? label,
       controlTokens: {
         icon: null,
@@ -71,7 +63,7 @@ const ListboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       // TODO refactor
       // eslint-disable-next-line react/no-unstable-nested-components
       ,
-      control: controlProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupControl.default, {
+      control: controlProps => /*#__PURE__*/_jsx(GroupControl, {
         id: id ?? label,
         ...controlProps,
         label: label
@@ -88,10 +80,10 @@ const ListboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         marginBottom: 0
       },
       controlRef: ref,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      children: /*#__PURE__*/_jsx(View, {
         style: styles.list,
         children: items.map((item, index) => {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListboxItem.default, {
+          return /*#__PURE__*/_jsx(ListboxItem, {
             id: item.id ?? item.label,
             ...item,
             selected: item.id && item.id === selectedId || item.label && item.label === selectedId,
@@ -115,20 +107,19 @@ const ListboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 });
 ListboxGroup.displayName = 'ListboxGroup';
 ListboxGroup.propTypes = {
-  ..._utils.withLinkRouter.propTypes,
-  label: _propTypes.default.string,
-  items: _propTypes.default.arrayOf(_propTypes.default.shape({
-    href: _propTypes.default.string,
-    label: _propTypes.default.string,
-    current: _propTypes.default.bool
+  ...withLinkRouter.propTypes,
+  label: PropTypes.string,
+  items: PropTypes.arrayOf(PropTypes.shape({
+    href: PropTypes.string,
+    label: PropTypes.string,
+    current: PropTypes.bool
   })),
-  expandProps: _propTypes.default.object,
-  nextItemRef: _propTypes.default.object,
-  prevItemRef: _propTypes.default.object,
+  expandProps: PropTypes.object,
+  nextItemRef: PropTypes.object,
+  prevItemRef: PropTypes.object,
   /**
    * Use this callback to redirect the focus after it leaves the last item of the group.
    */
-  onLastItemBlur: _propTypes.default.func
+  onLastItemBlur: PropTypes.func
 };
-var _default = ListboxGroup;
-exports.default = _default;
+export default ListboxGroup;

package/lib/Listbox/ListboxItem.js

@@ -1,20 +1,13 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _utils = require("../utils");
-var _PressableItem = _interopRequireDefault(require("./PressableItem"));
-var _ThemeProvider = require("../ThemeProvider");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs]);
-const styles = _StyleSheet.default.create({
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import { selectSystemProps, withLinkRouter, htmlAttrs } from '../utils';
+import PressableItem from './PressableItem';
+import { useThemeTokensCallback } from '../ThemeProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const styles = StyleSheet.create({
   itemContainer: {
     display: 'flex',
     margin: 0
@@ -26,7 +19,7 @@ const styles = _StyleSheet.default.create({
     paddingLeft: 24
   }
 });
-const ListboxItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const ListboxItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     href,
     label,
@@ -47,13 +40,13 @@ const ListboxItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     href,
     ...rest
   });
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Listbox', tokens, variant, {
+  const getTokens = useThemeTokensCallback('Listbox', tokens, variant, {
     isChild
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  return /*#__PURE__*/_jsx(View, {
     style: [styles.itemContainer, isChild && styles.childContainer, nestedChild && styles.nestedChildContainer],
     role: "option",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PressableItem.default, {
+    children: /*#__PURE__*/_jsx(PressableItem, {
       href: href,
       isChild: isChild,
       onPress: onPress,
@@ -71,14 +64,13 @@ const ListboxItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 ListboxItem.displayName = 'ListboxItem';
 ListboxItem.propTypes = {
   ...selectedSystemPropTypes,
-  ..._utils.withLinkRouter.propTypes,
-  href: _propTypes.default.string,
-  isChild: _propTypes.default.bool,
-  label: _propTypes.default.node.isRequired,
-  nextItemRef: _propTypes.default.object,
-  prevItemRef: _propTypes.default.object,
-  onPress: _propTypes.default.func,
-  nestedChild: _propTypes.default.bool
+  ...withLinkRouter.propTypes,
+  href: PropTypes.string,
+  isChild: PropTypes.bool,
+  label: PropTypes.node.isRequired,
+  nextItemRef: PropTypes.object,
+  prevItemRef: PropTypes.object,
+  onPress: PropTypes.func,
+  nestedChild: PropTypes.bool
 };
-var _default = (0, _utils.withLinkRouter)(ListboxItem);
-exports.default = _default;
+export default withLinkRouter(ListboxItem);

package/lib/Listbox/ListboxOverlay.js

@@ -1,27 +1,19 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _Portal = _interopRequireDefault(require("../Portal"));
-var _ThemeProvider = require("../ThemeProvider");
-var _Card = _interopRequireDefault(require("../Card"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const staticStyles = _StyleSheet.default.create({
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
+import Portal from '../Portal';
+import { useThemeTokens } from '../ThemeProvider';
+import Card from '../Card';
+import { jsx as _jsx } from "react/jsx-runtime";
+const staticStyles = StyleSheet.create({
   positioner: {
     flex: 1,
     // Grow to maxWidth when possible, shrink when not possible
     position: 'absolute',
     zIndex: 1000000000000000 // Position on top of all the other overlays, including backdrops and modals
   },
-
   hidden: {
     // Use opacity not visibility to hide the dropdown during positioning
     // so on web, children may be focused from the first render
@@ -30,7 +22,7 @@ const staticStyles = _StyleSheet.default.create({
 });
 const paddingVertical = 0;
 const paddingHorizontal = 0;
-const DropdownOverlay = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const DropdownOverlay = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     isReady = false,
@@ -39,15 +31,15 @@ const DropdownOverlay = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     minWidth,
     onLayout
   } = _ref;
-  const systemTokens = (0, _ThemeProvider.useThemeTokens)('Listbox', {}, {});
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  const systemTokens = useThemeTokens('Listbox', {}, {});
+  return /*#__PURE__*/_jsx(View, {
     ref: ref,
     onLayout: onLayout,
     style: [overlaidPosition, {
       maxWidth,
       minWidth
     }, staticStyles.positioner, !isReady && staticStyles.hidden],
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
+    children: /*#__PURE__*/_jsx(Card, {
       tokens: {
         shadow: systemTokens.shadow,
         paddingBottom: paddingVertical,
@@ -62,8 +54,8 @@ const DropdownOverlay = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 const withPortal = Overlay => {
   // eslint-disable-next-line react/display-name, react/no-multi-comp
   return props => {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Portal.default, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Overlay, {
+    return /*#__PURE__*/_jsx(Portal, {
+      children: /*#__PURE__*/_jsx(Overlay, {
         ...props
       })
     });
@@ -71,16 +63,15 @@ const withPortal = Overlay => {
 };
 DropdownOverlay.displayName = 'DropdownOverlay';
 DropdownOverlay.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  isReady: _propTypes.default.bool,
-  overlaidPosition: _propTypes.default.shape({
-    top: _propTypes.default.number,
-    left: _propTypes.default.number,
-    width: _propTypes.default.number
+  children: PropTypes.node.isRequired,
+  isReady: PropTypes.bool,
+  overlaidPosition: PropTypes.shape({
+    top: PropTypes.number,
+    left: PropTypes.number,
+    width: PropTypes.number
   }),
-  maxWidth: _propTypes.default.number,
-  minWidth: _propTypes.default.number,
-  onLayout: _propTypes.default.func
+  maxWidth: PropTypes.number,
+  minWidth: PropTypes.number,
+  onLayout: PropTypes.func
 };
-var _default = _Platform.default.OS === 'web' ? withPortal(DropdownOverlay) : DropdownOverlay;
-exports.default = _default;
+export default Platform.OS === 'web' ? withPortal(DropdownOverlay) : DropdownOverlay;

package/lib/Listbox/PressableItem.js

@@ -1,18 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
-var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
-var _utils = require("../utils");
-var _ListboxContext = require("./ListboxContext");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs]);
+import React from 'react';
+import PropTypes from 'prop-types';
+import Pressable from "react-native-web/dist/exports/Pressable";
+import Text from "react-native-web/dist/exports/Text";
+import { selectSystemProps, resolvePressableTokens, htmlAttrs } from '../utils';
+import { useListboxContext } from './ListboxContext';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const getItemStyles = _ref => {
   let {
     groupFontName,
@@ -56,7 +49,7 @@ const getItemStyles = _ref => {
     justifyContent: 'center'
   };
 };
-const PressableItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const PressableItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     href,
@@ -73,7 +66,7 @@ const PressableItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   const {
     selectedId,
     setSelectedId
-  } = (0, _ListboxContext.useListboxContext)();
+  } = useListboxContext();
   const selectTextStyles = _ref3 => {
     let {
       groupFontName,
@@ -90,7 +83,7 @@ const PressableItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     };
   };
   const resolveButtonTokens = pressableState => {
-    const themeTokens = (0, _utils.resolvePressableTokens)(tokens, pressableState, {
+    const themeTokens = resolvePressableTokens(tokens, pressableState, {
       isChild,
       current: id === selectedId && id !== undefined
     });
@@ -98,14 +91,14 @@ const PressableItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   };
   const handleKeyPress = event => {
     if (['Enter', ' '].includes(event === null || event === void 0 ? void 0 : event.key)) {
-      onPress === null || onPress === void 0 ? void 0 : onPress(event);
+      onPress === null || onPress === void 0 || onPress(event);
     } else if ((event === null || event === void 0 ? void 0 : event.key) === 'ArrowDown') {
       nextItemRef.current.focus();
     } else if ((event === null || event === void 0 ? void 0 : event.key) === 'ArrowUp' && prevItemRef !== null && prevItemRef !== void 0 && prevItemRef.current) {
       prevItemRef.current.focus();
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+  return /*#__PURE__*/_jsx(Pressable, {
     isChild: isChild,
     style: pressableState => getItemStyles(resolveButtonTokens(pressableState)),
     onBlur: onBlur,
@@ -125,7 +118,7 @@ const PressableItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       onPress();
     },
     children: pressableState => {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.default, {
+      return /*#__PURE__*/_jsxs(Text, {
         style: selectTextStyles(resolveButtonTokens(pressableState)),
         children: [children, " "]
       });
@@ -135,13 +128,12 @@ const PressableItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
 PressableItem.displayName = 'PressableItem';
 PressableItem.propTypes = {
   ...selectedSystemPropTypes,
-  href: _propTypes.default.string,
-  isChild: _propTypes.default.bool,
-  children: _propTypes.default.node.isRequired,
-  onBlur: _propTypes.default.func,
-  onPress: _propTypes.default.func,
-  nextItemRef: _propTypes.default.object,
-  prevItemRef: _propTypes.default.object
+  href: PropTypes.string,
+  isChild: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+  onBlur: PropTypes.func,
+  onPress: PropTypes.func,
+  nextItemRef: PropTypes.object,
+  prevItemRef: PropTypes.object
 };
-var _default = PressableItem;
-exports.default = _default;
+export default PressableItem;

package/lib/Listbox/index.js

@@ -1,10 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _Listbox = _interopRequireDefault(require("./Listbox"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _Listbox.default;
-exports.default = _default;
+import Listbox from './Listbox';
+export default Listbox;