@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/cjs/Listbox/GroupControl.js

@@ -0,0 +1,112 @@
+"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 _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+var _ThemeProvider = require("../ThemeProvider");
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _Spacer = _interopRequireDefault(require("../Spacer"));
+var _ListboxContext = require("./ListboxContext");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const styles = _StyleSheet.default.create({
+  controlWrapper: {
+    width: '100%',
+    flex: 1,
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    boxSizing: 'border-box'
+  }
+});
+const GroupControl = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    expanded,
+    pressed,
+    hover,
+    focus,
+    label,
+    id
+  } = _ref;
+  const {
+    selectedId,
+    setSelectedId
+  } = (0, _ListboxContext.useListboxContext)();
+  const tokens = (0, _ThemeProvider.useThemeTokens)('Listbox', {}, {}, {
+    expanded,
+    pressed,
+    hover,
+    current: selectedId === id && id !== undefined,
+    focus
+  });
+  const {
+    groupFontName,
+    groupFontWeight,
+    groupFontSize,
+    groupColor,
+    groupBackgroundColor,
+    groupBorderColor,
+    groupBorderWidth,
+    groupBorderRadius,
+    groupPaddingLeft,
+    groupPaddingRight,
+    groupPaddingTop,
+    groupPaddingBottom,
+    itemTextDecoration,
+    itemOutline,
+    groupHeight
+  } = tokens;
+  const getTextStyles = () => ({
+    color: groupColor
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    onPress: () => setSelectedId(id),
+    style: [styles.controlWrapper, {
+      fontFamily: `${groupFontName}${groupFontWeight}normal`,
+      fontSize: groupFontSize,
+      color: groupColor,
+      textDecoration: itemTextDecoration,
+      backgroundColor: groupBackgroundColor,
+      outline: itemOutline,
+      height: groupHeight,
+      border: `${groupBorderWidth}px solid ${groupBorderColor}`,
+      borderRadius: groupBorderRadius,
+      paddingLeft: groupPaddingLeft - groupBorderWidth,
+      paddingRight: groupPaddingRight - groupBorderWidth,
+      paddingTop: groupPaddingTop - groupBorderWidth,
+      paddingBottom: groupPaddingBottom - groupBorderWidth
+    }],
+    ref: ref,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+      style: getTextStyles(),
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+      space: 1,
+      direction: "row"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      icon: tokens.groupIcon,
+      tokens: {
+        color: tokens.groupColor
+      },
+      variant: {
+        size: 'micro'
+      }
+    })]
+  });
+});
+GroupControl.displayName = 'GroupControl';
+GroupControl.propTypes = {
+  id: _propTypes.default.string,
+  expanded: _propTypes.default.bool,
+  pressed: _propTypes.default.bool,
+  hover: _propTypes.default.bool,
+  focus: _propTypes.default.bool,
+  label: _propTypes.default.string
+};
+var _default = exports.default = GroupControl;

package/lib/cjs/Listbox/Listbox.js

@@ -0,0 +1,177 @@
+"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(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const styles = _StyleSheet.default.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) => {
+  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.default.useState(defaultSelectedId);
+  const {
+    minHeight,
+    minWidth
+  } = (0, _ThemeProvider.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([]);
+  if (firstItemRef?.current) itemRefs.current[0] = firstItemRef.current;
+  const [focusedIndex, setFocusedIndex] = _react.default.useState(0);
+  const handleKeydown = _react.default.useCallback(event => {
+    const nextItemRef = itemRefs.current[focusedIndex + 1];
+    const prevItemRef = itemRefs.current[focusedIndex - 1];
+    if (event.key === 'ArrowUp' || event.shiftKey && event.key === 'Tab') {
+      // 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?.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') {
+      // Close the dropdown
+      parentRef?.current?.click();
+      // Return focus to the dropdown control after leaving the last item
+      parentRef?.current?.focus();
+      if (onClose) onClose(event);
+    } else if (!nextItemRef && firstItemRef) {
+      // If the last item is focused, move the focus to the first one
+      event.preventDefault();
+      setFocusedIndex(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') {
+      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__*/(0, _jsxRuntime.jsx)(_ListboxContext.ListboxContext.Provider, {
+    value: {
+      selectedId,
+      setSelectedId
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default, {
+      initialOpen: initialOpen,
+      maxOpen: 1,
+      ref: ref,
+      children: expandProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        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__*/(0, _react.createElement)(_ListboxGroup.default, {
+            ...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__*/(0, _react.createElement)(_ListboxItem.default, {
+            ...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 = {
+  ..._utils.withLinkRouter.propTypes,
+  tokens: (0, _utils.getTokensPropType)('Listbox'),
+  /**
+   * Focus will be moved to the item with this ref once within the menu.
+   */
+  firstItemRef: _propTypes.default.object,
+  /**
+   * Focus will be returned to the dropdown control with this ref after leaving
+   * the last menu item.
+   */
+  parentRef: _propTypes.default.object,
+  /**
+   * `Listbox` items
+   */
+  items: _propTypes.default.array,
+  /**
+   * To select an item by default
+   */
+  selectedId: _propTypes.default.string,
+  /**
+   * onClose event
+   */
+  onClose: _propTypes.default.func
+};
+Listbox.Overlay = _ListboxOverlay.default;
+var _default = exports.default = Listbox;

package/lib/cjs/Listbox/ListboxContext.js

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

package/lib/cjs/Listbox/ListboxGroup.js

@@ -0,0 +1,133 @@
+"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(e) { return e && e.__esModule ? e : { default: e }; }
+/* eslint-disable react-native-a11y/has-valid-accessibility-role */
+
+const styles = _StyleSheet.default.create({
+  groupWrapper: {
+    margin: 0,
+    padding: 0,
+    overflow: 'hidden'
+  },
+  list: {
+    margin: 0,
+    padding: 0
+  }
+});
+const getAccessibilityRole = () => _Platform.default.select({
+  ios: 'listitem',
+  android: 'none',
+  web: 'listitem'
+});
+const ListboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    id,
+    label,
+    items,
+    LinkRouter,
+    linkRouterProps,
+    expandProps,
+    onLastItemBlur,
+    nextItemRef,
+    prevItemRef
+  } = _ref;
+  const {
+    selectedId
+  } = (0, _ListboxContext.useListboxContext)();
+
+  // TODO: implement keyboard navigation via refs for grouped items separately here
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    id: "test",
+    style: styles.groupWrapper,
+    accessibilityRole: getAccessibilityRole(),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default.Panel, {
+      panelId: id ?? label,
+      controlTokens: {
+        icon: null,
+        paddingLeft: 0,
+        paddingRight: 0,
+        paddingTop: 0,
+        paddingBottom: 0,
+        backgroundColor: 'transparent',
+        borderColor: 'transparent',
+        textLine: 'none',
+        borderWidth: 0
+      }
+      // TODO refactor
+      // eslint-disable-next-line react/no-unstable-nested-components
+      ,
+      control: controlProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupControl.default, {
+        id: id ?? label,
+        ...controlProps,
+        label: label
+      }),
+      ...expandProps,
+      tokens: {
+        contentPaddingLeft: 0,
+        contentPaddingRight: 0,
+        contentPaddingTop: 0,
+        contentPaddingBottom: 0,
+        borderColor: 'transparent',
+        borderRadius: 0,
+        borderWidth: 0,
+        marginBottom: 0
+      },
+      controlRef: ref,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: styles.list,
+        children: items.map((item, index) => {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListboxItem.default, {
+            id: item.id ?? item.label,
+            ...item,
+            selected: item.id && item.id === selectedId || item.label && item.label === selectedId,
+            isChild: true,
+            LinkRouter: LinkRouter,
+            linkRouterProps: linkRouterProps,
+            ...(index === 0 && {
+              prevItemRef
+            }),
+            ...(index === items.length - 1 && {
+              nextItemRef
+            }),
+            ...(index === items.length - 1 && {
+              onBlur: onLastItemBlur
+            })
+          }, item.label);
+        })
+      })
+    })
+  });
+});
+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
+  })),
+  expandProps: _propTypes.default.object,
+  nextItemRef: _propTypes.default.object,
+  prevItemRef: _propTypes.default.object,
+  /**
+   * Use this callback to redirect the focus after it leaves the last item of the group.
+   */
+  onLastItemBlur: _propTypes.default.func
+};
+var _default = exports.default = ListboxGroup;

package/lib/cjs/Listbox/ListboxItem.js

@@ -0,0 +1,83 @@
+"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(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs]);
+const styles = _StyleSheet.default.create({
+  itemContainer: {
+    display: 'flex',
+    margin: 0
+  },
+  childContainer: {
+    paddingLeft: 16
+  },
+  nestedChildContainer: {
+    paddingLeft: 24
+  }
+});
+const ListboxItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    href,
+    label,
+    isChild = false,
+    nestedChild,
+    onBlur,
+    nextItemRef,
+    prevItemRef,
+    tokens,
+    variant = {},
+    LinkRouter,
+    linkRouterProps,
+    id,
+    onPress = () => {},
+    ...rest
+  } = _ref;
+  const selectedProps = selectProps({
+    href,
+    ...rest
+  });
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Listbox', tokens, variant, {
+    isChild
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: [styles.itemContainer, isChild && styles.childContainer, nestedChild && styles.nestedChildContainer],
+    role: "option",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PressableItem.default, {
+      href: href,
+      isChild: isChild,
+      onPress: onPress,
+      onBlur: onBlur,
+      nextItemRef: nextItemRef,
+      prevItemRef: prevItemRef,
+      ref: ref,
+      tokens: getTokens,
+      selectedProps: selectedProps,
+      id: id,
+      children: label
+    })
+  });
+});
+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
+};
+var _default = exports.default = (0, _utils.withLinkRouter)(ListboxItem);

package/lib/cjs/Listbox/ListboxOverlay.js

@@ -0,0 +1,87 @@
+"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(e) { return e && e.__esModule ? e : { default: e }; }
+const staticStyles = _StyleSheet.default.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
+    opacity: 0
+  }
+});
+const paddingVertical = 0;
+const paddingHorizontal = 0;
+const DropdownOverlay = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    children,
+    isReady = false,
+    overlaidPosition,
+    maxWidth,
+    minWidth,
+    onLayout,
+    tokens
+  } = _ref;
+  const systemTokens = (0, _ThemeProvider.useThemeTokens)('Listbox', {}, {});
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    onLayout: onLayout,
+    style: [overlaidPosition, {
+      maxWidth,
+      minWidth
+    }, staticStyles.positioner, !isReady && staticStyles.hidden],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
+      tokens: {
+        shadow: systemTokens.shadow,
+        paddingBottom: paddingVertical,
+        paddingTop: paddingVertical,
+        paddingLeft: paddingHorizontal,
+        paddingRight: paddingHorizontal,
+        ...tokens
+      },
+      children: children
+    })
+  });
+});
+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, {
+        ...props
+      })
+    });
+  };
+};
+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
+  }),
+  maxWidth: _propTypes.default.number,
+  minWidth: _propTypes.default.number,
+  onLayout: _propTypes.default.func,
+  tokens: _propTypes.default.object
+};
+var _default = exports.default = _Platform.default.OS === 'web' ? withPortal(DropdownOverlay) : DropdownOverlay;