@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/List/ListItemContent.js

@@ -1,73 +0,0 @@
-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 { wrapStringsInText } from '../utils';
-import { useTheme, applyTextStyles } from '../ThemeProvider';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const tokenTypes = {
-  itemFontWeight: PropTypes.string.isRequired,
-  itemFontSize: PropTypes.number.isRequired,
-  itemLineHeight: PropTypes.number.isRequired,
-  itemFontName: PropTypes.string.isRequired,
-  itemFontColor: PropTypes.string
-};
-const selectItemTextStyles = (_ref, themeOptions) => {
-  let {
-    itemFontWeight,
-    itemFontSize,
-    itemLineHeight,
-    itemFontName,
-    itemFontColor,
-    itemTextColor
-  } = _ref;
-  return applyTextStyles({
-    fontColor: itemFontColor || itemTextColor,
-    fontWeight: itemFontWeight,
-    fontSize: itemFontSize,
-    lineHeight: itemLineHeight,
-    fontName: itemFontName,
-    themeOptions
-  });
-};
-
-/**
- * Subcomponent used within ListItem and similar components for rendering content that fills
- * and wraps available space in a { flexDirection: row } container alongside a ListIconMark,
- * and that applies text styles to strings via supplied tokens.
- *
- * It's the responsibility of themes to make sure that these text tokens align the first line of
- * text nicely against the bullet or icon rendered by ListIconMark.
- */
-const ListItemContent = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    tokens,
-    children
-  } = _ref2;
-  const {
-    themeOptions
-  } = useTheme();
-  const textStyles = selectItemTextStyles(tokens, themeOptions);
-  return /*#__PURE__*/_jsx(View, {
-    style: [staticStyles.wrap, (tokens === null || tokens === void 0 ? void 0 : tokens.itemUnderline) && {
-      textDecorationLine: tokens.itemUnderline,
-      textDecorationColor: tokens.itemFontColor
-    }],
-    ref: ref,
-    children: wrapStringsInText(children, {
-      style: textStyles
-    })
-  });
-});
-ListItemContent.displayName = 'ListItemContent';
-const staticStyles = StyleSheet.create({
-  wrap: {
-    flex: 1,
-    justifyContent: 'center'
-  }
-});
-ListItemContent.propTypes = {
-  tokens: PropTypes.shape(tokenTypes).isRequired,
-  children: PropTypes.node.isRequired
-};
-export default ListItemContent;

package/lib/Listbox/Listbox.js

@@ -1,171 +0,0 @@
-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.forwardRef((_ref, ref) => {
-  let {
-    items = [],
-    firstItemRef = null,
-    // focus will be moved to this one once within the menu
-    parentRef = null,
-    // to return focus to after leaving the last menu item
-    selectedId: defaultSelectedId,
-    LinkRouter,
-    itemRouterProps,
-    onClose,
-    variant,
-    tokens
-  } = _ref;
-  const initialOpen = getInitialOpen(items, defaultSelectedId);
-  const [selectedId, setSelectedId] = React.useState(defaultSelectedId);
-  const {
-    minHeight,
-    minWidth
-  } = 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.useRef([]);
-  if (firstItemRef !== null && firstItemRef !== void 0 && firstItemRef.current) itemRefs.current[0] = firstItemRef.current;
-  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') {
-      var _parentRef$current;
-      // Move the focus to the previous item or to the parent one if on the first
-      if (prevItemRef) {
-        event.preventDefault();
-        prevItemRef.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();
-      setFocusedIndex(focusedIndex + 1);
-      nextItemRef.focus();
-    } else if (event.key === 'Escape') {
-      var _parentRef$current2, _parentRef$current3;
-      // Close the dropdown
-      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 || (_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 || _firstItemRef$current.focus();
-    }
-  }, [focusedIndex, onClose, parentRef, firstItemRef]);
-
-  // Add listeners for mouse clicks outside and for key presses
-  React.useEffect(() => {
-    if (Platform.OS === 'web') {
-      window.addEventListener('click', onClose);
-      window.addEventListener('keydown', handleKeydown);
-      window.addEventListener('touchstart', onClose);
-      return () => {
-        window.removeEventListener('click', onClose);
-        window.removeEventListener('keydown', handleKeydown);
-        window.removeEventListener('touchstart', onClose);
-      };
-    }
-    return () => {};
-  }, [onClose, handleKeydown]);
-  return /*#__PURE__*/_jsx(ListboxContext.Provider, {
-    value: {
-      selectedId,
-      setSelectedId
-    },
-    children: /*#__PURE__*/_jsx(ExpandCollapse, {
-      initialOpen: initialOpen,
-      maxOpen: 1,
-      ref: ref,
-      children: expandProps => /*#__PURE__*/_jsx(View, {
-        style: [styles.list, {
-          minHeight,
-          minWidth
-        }],
-        role: "listbox",
-        children: items.map((item, index) => {
-          const {
-            id,
-            label,
-            items: nestedItems
-          } = item;
-          const itemId = id ?? label;
-
-          // Give the list of refs.
-          const itemRef = currentItemRef => {
-            itemRefs.current[index] = currentItemRef;
-            return currentItemRef;
-          };
-          return nestedItems ? /*#__PURE__*/_createElement(ListboxGroup, {
-            ...item,
-            expandProps: expandProps,
-            LinkRouter: LinkRouter,
-            itemRouterProps: itemRouterProps,
-            prevItemRef: itemRefs.current[index - 1] ?? null,
-            nextItemRef: itemRefs.current[index + 1] ?? null,
-            ref: index === 0 ? firstItemRef : itemRef,
-            key: itemId
-          }) : /*#__PURE__*/_createElement(ListboxItem, {
-            ...item,
-            key: itemId,
-            id: itemId,
-            LinkRouter: LinkRouter,
-            itemRouterProps: itemRouterProps,
-            prevItemRef: itemRefs.current[index - 1] ?? null,
-            nextItemRef: itemRefs.current[index + 1] ?? null,
-            ref: index === 0 ? firstItemRef : itemRef
-          });
-        })
-      })
-    })
-  });
-});
-Listbox.displayName = 'Listbox';
-Listbox.propTypes = {
-  ...withLinkRouter.propTypes,
-  tokens: getTokensPropType('Listbox'),
-  /**
-   * Focus will be moved to the item with this ref once within the menu.
-   */
-  firstItemRef: PropTypes.object,
-  /**
-   * Focus will be returned to the dropdown control with this ref after leaving
-   * the last menu item.
-   */
-  parentRef: PropTypes.object,
-  /**
-   * `Listbox` items
-   */
-  items: PropTypes.array,
-  /**
-   * To select an item by default
-   */
-  selectedId: PropTypes.string,
-  /**
-   * onClose event
-   */
-  onClose: PropTypes.func
-};
-Listbox.Overlay = DropdownOverlay;
-export default Listbox;

package/lib/Listbox/PressableItem.js

@@ -1,139 +0,0 @@
-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,
-    groupFontWeight,
-    itemFontSize,
-    itemPaddingTop,
-    itemPaddingBottom,
-    itemPaddingLeft,
-    itemBorderLeftWidth,
-    itemPaddingRight,
-    itemBackgroundColor,
-    itemColor,
-    itemOutline,
-    itemTextDecoration,
-    itemBorderLeftColor,
-    itemBorderRightWidth,
-    itemBorderRightColor,
-    itemBorderTopWidth,
-    itemBorderTopColor,
-    itemBorderBottomWidth,
-    itemBorderBottomColor,
-    itemBorderRadius
-  } = _ref;
-  return {
-    fontFamily: `${groupFontName}${groupFontWeight}normal`,
-    fontSize: itemFontSize,
-    paddingTop: itemPaddingTop - itemBorderTopWidth,
-    paddingBottom: itemPaddingBottom - itemBorderBottomWidth,
-    paddingLeft: itemPaddingLeft - itemBorderLeftWidth,
-    paddingRight: itemPaddingRight - itemBorderRightWidth,
-    width: '100%',
-    backgroundColor: itemBackgroundColor,
-    color: itemColor,
-    outline: itemOutline,
-    textDecoration: itemTextDecoration,
-    borderLeft: `${itemBorderLeftWidth}px solid ${itemBorderLeftColor}`,
-    borderRight: `${itemBorderRightWidth}px solid ${itemBorderRightColor}`,
-    borderTop: `${itemBorderTopWidth}px solid ${itemBorderTopColor}`,
-    borderBottom: `${itemBorderBottomWidth}px solid ${itemBorderBottomColor}`,
-    borderRadius: itemBorderRadius,
-    justifyContent: 'center'
-  };
-};
-const PressableItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    children,
-    href,
-    isChild = false,
-    onBlur,
-    onPress,
-    tabIndex = 0,
-    nextItemRef,
-    prevItemRef,
-    tokens,
-    id,
-    ...rest
-  } = _ref2;
-  const {
-    selectedId,
-    setSelectedId
-  } = useListboxContext();
-  const selectTextStyles = _ref3 => {
-    let {
-      groupFontName,
-      groupFontWeight,
-      itemFontSize,
-      itemColor,
-      lineHeight
-    } = _ref3;
-    return {
-      fontFamily: `${groupFontName}${groupFontWeight}normal`,
-      fontSize: itemFontSize,
-      color: itemColor,
-      lineHeight: lineHeight * itemFontSize
-    };
-  };
-  const resolveButtonTokens = pressableState => {
-    const themeTokens = resolvePressableTokens(tokens, pressableState, {
-      isChild,
-      current: id === selectedId && id !== undefined
-    });
-    return themeTokens;
-  };
-  const handleKeyPress = event => {
-    if (['Enter', ' '].includes(event === null || event === void 0 ? void 0 : event.key)) {
-      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__*/_jsx(Pressable, {
-    isChild: isChild,
-    style: pressableState => getItemStyles(resolveButtonTokens(pressableState)),
-    onBlur: onBlur,
-    onClick: onPress,
-    onKeyPress: handleKeyPress,
-    ref: ref,
-    tabIndex: tabIndex,
-    ...(href && {
-      href
-    }),
-    ...(onPress && {
-      onClick: onPress
-    }),
-    ...selectProps(rest),
-    onPress: event => {
-      setSelectedId(id);
-      onPress(event);
-    },
-    children: pressableState => {
-      return /*#__PURE__*/_jsxs(Text, {
-        style: selectTextStyles(resolveButtonTokens(pressableState)),
-        children: [children, " "]
-      });
-    }
-  });
-});
-PressableItem.displayName = 'PressableItem';
-PressableItem.propTypes = {
-  ...selectedSystemPropTypes,
-  href: PropTypes.string,
-  isChild: PropTypes.bool,
-  children: PropTypes.node.isRequired,
-  onBlur: PropTypes.func,
-  onPress: PropTypes.func,
-  nextItemRef: PropTypes.object,
-  prevItemRef: PropTypes.object
-};
-export default PressableItem;