@telus-uds/components-base 1.97.0 → 1.97.1

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;