braid-design-system 32.16.0 → 32.16.2

package/dist/lib/components/Stepper/StepperContext.cjs

@@ -0,0 +1,169 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const lib_components_private_normalizeKey_cjs = require("../private/normalizeKey.cjs");
+const StepContext = React.createContext({
+  stepNumber: 0,
+  isLast: false
+});
+const NAV_RIGHT = 0;
+const NAV_DOWN = 1;
+const NAV_LEFT = 2;
+const NAV_UP = 3;
+const NAV_HOME = 4;
+const NAV_END = 5;
+const NAV_TAB = 6;
+const NAV_CLICKED = 7;
+const NAV_FOCUSED = 8;
+const NAV_BLURRED = 9;
+const StepperContext = React.createContext(null);
+const getNextStep = (moveAmount, current, maxStep) => {
+  if (current === null) {
+    return moveAmount > 0 ? 1 : maxStep;
+  }
+  const nextStep = moveAmount + current;
+  if (nextStep > maxStep) {
+    return 1;
+  }
+  if (nextStep < 1) {
+    return maxStep;
+  }
+  return nextStep;
+};
+const StepperContextProvider = ({
+  children,
+  activeStep,
+  stepCount: stepCountProp,
+  progress,
+  isLinear,
+  align,
+  tone = "formAccent",
+  onStepClick
+}) => {
+  const stepCount = isLinear ? progress : stepCountProp;
+  const [stepperState, dispatch] = React.useReducer(
+    (state, action) => {
+      switch (action.type) {
+        case NAV_UP:
+        case NAV_LEFT: {
+          return {
+            ...state,
+            focusedStep: getNextStep(-1, state.focusedStep, stepCount)
+          };
+        }
+        case NAV_DOWN:
+        case NAV_RIGHT: {
+          return {
+            ...state,
+            focusedStep: getNextStep(1, state.focusedStep, stepCount)
+          };
+        }
+        case NAV_HOME: {
+          return {
+            ...state,
+            focusedStep: 1
+          };
+        }
+        case NAV_END: {
+          return {
+            ...state,
+            focusedStep: stepCount
+          };
+        }
+        case NAV_BLURRED:
+        case NAV_TAB: {
+          return {
+            ...state,
+            focusedStep: null
+          };
+        }
+        case NAV_CLICKED: {
+          return {
+            ...state,
+            focusedStep: action.value
+          };
+        }
+        case NAV_FOCUSED: {
+          return {
+            ...state,
+            focusedStep: state.focusedStep === null ? activeStep : state.focusedStep
+          };
+        }
+        default:
+          return state;
+      }
+    },
+    {
+      focusedStep: null,
+      activeStep,
+      isLinear,
+      tone,
+      align,
+      progress,
+      onStepClick
+    }
+  );
+  const onKeyUp = (event) => {
+    const targetKey = lib_components_private_normalizeKey_cjs.normalizeKey(event);
+    if (targetKey === "Tab") {
+      return;
+    }
+    const action = {
+      ArrowRight: { type: NAV_RIGHT },
+      ArrowLeft: { type: NAV_LEFT },
+      ArrowUp: { type: NAV_UP },
+      ArrowDown: { type: NAV_DOWN },
+      Home: { type: NAV_HOME },
+      End: { type: NAV_END }
+    };
+    if (action[targetKey]) {
+      dispatch(action[targetKey]);
+    }
+  };
+  const onKeyDown = (event) => {
+    const targetKey = lib_components_private_normalizeKey_cjs.normalizeKey(event);
+    if (targetKey === "Tab") {
+      dispatch({ type: NAV_TAB });
+      return;
+    }
+    const isNavigationKeyPress = targetKey.indexOf("Arrow") === 0 || ["Home", "End"].includes(targetKey);
+    if (isNavigationKeyPress) {
+      event.preventDefault();
+    }
+  };
+  const onFocus = () => dispatch({
+    type: NAV_FOCUSED
+  });
+  const onBlur = () => dispatch({
+    type: NAV_BLURRED
+  });
+  const onClick = (index) => dispatch({
+    type: NAV_CLICKED,
+    value: index
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StepperContext.Provider,
+    {
+      value: {
+        ...stepperState,
+        activeStep,
+        isLinear,
+        align,
+        tone,
+        progress,
+        onStepClick,
+        ...typeof onStepClick === "function" ? {
+          onKeyUp,
+          onKeyDown,
+          onClick,
+          onFocus,
+          onBlur
+        } : {}
+      },
+      children
+    }
+  );
+};
+exports.StepContext = StepContext;
+exports.StepperContext = StepperContext;
+exports.StepperContextProvider = StepperContextProvider;

package/dist/lib/components/Stepper/StepperContext.mjs

@@ -0,0 +1,170 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useReducer } from "react";
+import { normalizeKey } from "../private/normalizeKey.mjs";
+const StepContext = createContext({
+  stepNumber: 0,
+  isLast: false
+});
+const NAV_RIGHT = 0;
+const NAV_DOWN = 1;
+const NAV_LEFT = 2;
+const NAV_UP = 3;
+const NAV_HOME = 4;
+const NAV_END = 5;
+const NAV_TAB = 6;
+const NAV_CLICKED = 7;
+const NAV_FOCUSED = 8;
+const NAV_BLURRED = 9;
+const StepperContext = createContext(null);
+const getNextStep = (moveAmount, current, maxStep) => {
+  if (current === null) {
+    return moveAmount > 0 ? 1 : maxStep;
+  }
+  const nextStep = moveAmount + current;
+  if (nextStep > maxStep) {
+    return 1;
+  }
+  if (nextStep < 1) {
+    return maxStep;
+  }
+  return nextStep;
+};
+const StepperContextProvider = ({
+  children,
+  activeStep,
+  stepCount: stepCountProp,
+  progress,
+  isLinear,
+  align,
+  tone = "formAccent",
+  onStepClick
+}) => {
+  const stepCount = isLinear ? progress : stepCountProp;
+  const [stepperState, dispatch] = useReducer(
+    (state, action) => {
+      switch (action.type) {
+        case NAV_UP:
+        case NAV_LEFT: {
+          return {
+            ...state,
+            focusedStep: getNextStep(-1, state.focusedStep, stepCount)
+          };
+        }
+        case NAV_DOWN:
+        case NAV_RIGHT: {
+          return {
+            ...state,
+            focusedStep: getNextStep(1, state.focusedStep, stepCount)
+          };
+        }
+        case NAV_HOME: {
+          return {
+            ...state,
+            focusedStep: 1
+          };
+        }
+        case NAV_END: {
+          return {
+            ...state,
+            focusedStep: stepCount
+          };
+        }
+        case NAV_BLURRED:
+        case NAV_TAB: {
+          return {
+            ...state,
+            focusedStep: null
+          };
+        }
+        case NAV_CLICKED: {
+          return {
+            ...state,
+            focusedStep: action.value
+          };
+        }
+        case NAV_FOCUSED: {
+          return {
+            ...state,
+            focusedStep: state.focusedStep === null ? activeStep : state.focusedStep
+          };
+        }
+        default:
+          return state;
+      }
+    },
+    {
+      focusedStep: null,
+      activeStep,
+      isLinear,
+      tone,
+      align,
+      progress,
+      onStepClick
+    }
+  );
+  const onKeyUp = (event) => {
+    const targetKey = normalizeKey(event);
+    if (targetKey === "Tab") {
+      return;
+    }
+    const action = {
+      ArrowRight: { type: NAV_RIGHT },
+      ArrowLeft: { type: NAV_LEFT },
+      ArrowUp: { type: NAV_UP },
+      ArrowDown: { type: NAV_DOWN },
+      Home: { type: NAV_HOME },
+      End: { type: NAV_END }
+    };
+    if (action[targetKey]) {
+      dispatch(action[targetKey]);
+    }
+  };
+  const onKeyDown = (event) => {
+    const targetKey = normalizeKey(event);
+    if (targetKey === "Tab") {
+      dispatch({ type: NAV_TAB });
+      return;
+    }
+    const isNavigationKeyPress = targetKey.indexOf("Arrow") === 0 || ["Home", "End"].includes(targetKey);
+    if (isNavigationKeyPress) {
+      event.preventDefault();
+    }
+  };
+  const onFocus = () => dispatch({
+    type: NAV_FOCUSED
+  });
+  const onBlur = () => dispatch({
+    type: NAV_BLURRED
+  });
+  const onClick = (index) => dispatch({
+    type: NAV_CLICKED,
+    value: index
+  });
+  return /* @__PURE__ */ jsx(
+    StepperContext.Provider,
+    {
+      value: {
+        ...stepperState,
+        activeStep,
+        isLinear,
+        align,
+        tone,
+        progress,
+        onStepClick,
+        ...typeof onStepClick === "function" ? {
+          onKeyUp,
+          onKeyDown,
+          onClick,
+          onFocus,
+          onBlur
+        } : {}
+      },
+      children
+    }
+  );
+};
+export {
+  StepContext,
+  StepperContext,
+  StepperContextProvider
+};

package/dist/lib/components/Strong/Strong.cjs

@@ -0,0 +1,14 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
+const lib_css_typography_css_cjs = require("../../css/typography.css.cjs");
+const Strong = ({ children, data, id, ...restProps }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "strong",
+  {
+    className: lib_css_typography_css_cjs.fontWeight.strong,
+    id,
+    ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
+    children
+  }
+);
+exports.Strong = Strong;

package/dist/lib/components/Strong/Strong.mjs

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
+import { fontWeight } from "../../css/typography.css.mjs";
+const Strong = ({ children, data, id, ...restProps }) => /* @__PURE__ */ jsx(
+  "strong",
+  {
+    className: fontWeight.strong,
+    id,
+    ...buildDataAttributes({ data, validateRestProps: restProps }),
+    children
+  }
+);
+export {
+  Strong
+};

package/dist/lib/components/Tabs/Tab.cjs

@@ -0,0 +1,237 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const assert = require("assert");
+const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
+const lib_components_private_normalizeKey_cjs = require("../private/normalizeKey.cjs");
+const lib_components_Tabs_TabsProvider_cjs = require("./TabsProvider.cjs");
+const lib_components_Tabs_Tabs_actions_cjs = require("./Tabs.actions.cjs");
+const lib_components_Text_Text_cjs = require("../Text/Text.cjs");
+const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
+const lib_components_Tabs_TabListContext_cjs = require("./TabListContext.cjs");
+const lib_components_private_Overlay_Overlay_cjs = require("../private/Overlay/Overlay.cjs");
+const lib_components_useResponsiveValue_useResponsiveValue_cjs = require("../useResponsiveValue/useResponsiveValue.cjs");
+const lib_components_private_smoothScroll_cjs = require("../private/smoothScroll.cjs");
+const lib_components_useSpace_useSpace_cjs = require("../useSpace/useSpace.cjs");
+const lib_components_Tabs_Tabs_css_cjs = require("./Tabs.css.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
+const paddingX = "small";
+const Tab = ({
+  children,
+  data,
+  badge,
+  icon,
+  item,
+  ...restProps
+}) => {
+  const tabsContext = React.useContext(lib_components_Tabs_TabsProvider_cjs.TabsContext);
+  const tabListContext = React.useContext(lib_components_Tabs_TabListContext_cjs.TabListContext);
+  const tabRef = React.useRef(null);
+  assert__default.default(
+    tabListContext !== null,
+    "A Tab must be rendered as a child of Tabs. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/Tab"
+  );
+  assert__default.default(
+    // @ts-expect-error
+    !badge || badge.type.__isBadge__,
+    `Tab badge prop can only be an instance of Badge. e.g. <Tab badge={<Badge>New</Badge>}>`
+  );
+  assert__default.default(
+    !badge || badge.props.bleedY === void 0,
+    "Badge elements cannot set the 'bleedY' prop when passed to a Tab component"
+  );
+  assert__default.default(
+    !icon || icon.props.size === void 0 && icon.props.tone === void 0,
+    "Icons cannot set the 'size' or 'tone' prop when passed to a Tab component"
+  );
+  if (!tabListContext) {
+    throw new Error("Tab rendered outside Tabs context");
+  }
+  if (!tabsContext) {
+    throw new Error("Tab rendered outside TabsProvider");
+  }
+  const {
+    focusedTabIndex,
+    selectedIndex,
+    selectedItem,
+    dispatch,
+    a11y,
+    onChange
+  } = tabsContext;
+  const { tabListItemIndex, scrollContainer, isLast } = tabListContext;
+  const isSelected = selectedIndex > -1 ? selectedIndex === tabListItemIndex : selectedItem === item;
+  const isFocused = focusedTabIndex === tabListItemIndex;
+  const { grid, space } = lib_components_useSpace_useSpace_cjs.useSpace();
+  React.useEffect(() => {
+    if (tabRef.current && isFocused) {
+      tabRef.current.focus();
+    }
+  }, [isFocused]);
+  const firstRenderRef = React.useRef(true);
+  const isMobile = lib_components_useResponsiveValue_useResponsiveValue_cjs.useResponsiveValue()({
+    mobile: true,
+    tablet: false
+  });
+  React.useEffect(() => {
+    if (!tabRef.current || !scrollContainer) {
+      return;
+    }
+    if (isSelected || isFocused) {
+      if (isMobile) {
+        lib_components_private_smoothScroll_cjs.smoothScroll(tabRef.current, {
+          scrollContainer,
+          direction: "horizontal",
+          offset: space[paddingX] * grid * 3,
+          ...firstRenderRef.current ? { duration: 0 } : { speed: 0.7 }
+        });
+      } else {
+        lib_components_private_smoothScroll_cjs.smoothScrollIntoView(tabRef.current, {
+          scrollContainer,
+          direction: "horizontal",
+          offset: space[paddingX] * grid * 6,
+          ...firstRenderRef.current ? { duration: 0 } : { speed: 0.7 }
+        });
+      }
+    }
+    firstRenderRef.current = false;
+  }, [isSelected, isFocused, scrollContainer, space, grid, isMobile]);
+  React.useEffect(() => {
+    if (tabRef.current) {
+      dispatch({
+        type: lib_components_Tabs_Tabs_actions_cjs.TAB_BUTTON_REGISTER,
+        tabEl: tabRef.current,
+        tabListItemIndex
+      });
+    }
+  }, [dispatch, tabListItemIndex]);
+  const onKeyUp = (event) => {
+    const targetKey = lib_components_private_normalizeKey_cjs.normalizeKey(event);
+    if (targetKey === "Tab") {
+      return;
+    }
+    if (onChange && (targetKey === "Enter" || targetKey === " ")) {
+      onChange(tabListItemIndex, item);
+    }
+    const action = {
+      ArrowRight: { type: lib_components_Tabs_Tabs_actions_cjs.TAB_BUTTON_RIGHT },
+      ArrowLeft: { type: lib_components_Tabs_Tabs_actions_cjs.TAB_BUTTON_LEFT },
+      Home: { type: lib_components_Tabs_Tabs_actions_cjs.TAB_BUTTON_HOME },
+      End: { type: lib_components_Tabs_Tabs_actions_cjs.TAB_BUTTON_END },
+      Enter: { type: lib_components_Tabs_Tabs_actions_cjs.TAB_BUTTON_ENTER, value: tabListItemIndex },
+      " ": { type: lib_components_Tabs_Tabs_actions_cjs.TAB_BUTTON_SPACE, value: tabListItemIndex }
+    };
+    if (action[targetKey]) {
+      dispatch(action[targetKey]);
+    }
+  };
+  const onKeyDown = (event) => {
+    const targetKey = lib_components_private_normalizeKey_cjs.normalizeKey(event);
+    if (targetKey === "Tab" && focusedTabIndex !== null) {
+      dispatch({ type: lib_components_Tabs_Tabs_actions_cjs.TAB_BUTTON_TAB });
+      return;
+    }
+    const isArrowPress = targetKey.indexOf("Arrow") === 0;
+    const isActionKeyPress = targetKey === "Enter" || targetKey === " ";
+    if (isArrowPress || isActionKeyPress) {
+      event.preventDefault();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    lib_components_Box_Box_cjs.Box,
+    {
+      component: "button",
+      type: "button",
+      ...a11y.tabProps({ tabIndex: tabListItemIndex, isSelected }),
+      ref: tabRef,
+      onKeyUp,
+      onKeyDown,
+      onClick: (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        if (onChange) {
+          onChange(tabListItemIndex, item);
+        }
+        dispatch({ type: lib_components_Tabs_Tabs_actions_cjs.TAB_BUTTON_CLICK, value: tabListItemIndex });
+      },
+      onFocus: isSelected ? () => dispatch({
+        type: lib_components_Tabs_Tabs_actions_cjs.TAB_LIST_FOCUSED,
+        value: tabListItemIndex
+      }) : void 0,
+      display: "flex",
+      alignItems: "center",
+      textAlign: "left",
+      borderRadius: "standard",
+      cursor: "pointer",
+      outline: "none",
+      position: "relative",
+      zIndex: 1,
+      paddingLeft: tabListItemIndex > 0 ? paddingX : void 0,
+      paddingRight: !isLast ? paddingX : void 0,
+      paddingY: "medium",
+      className: lib_components_Tabs_Tabs_css_cjs.tab,
+      ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          lib_components_Box_Box_cjs.Box,
+          {
+            component: "span",
+            display: "block",
+            position: "absolute",
+            "aria-hidden": true,
+            transition: "fast",
+            opacity: isSelected ? 0 : void 0,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Text_Text_cjs.Text, { tone: "secondary", icon, children })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          lib_components_Box_Box_cjs.Box,
+          {
+            component: "span",
+            display: "block",
+            position: "absolute",
+            "aria-hidden": true,
+            transition: "fast",
+            opacity: 0,
+            className: !isSelected ? lib_components_Tabs_Tabs_css_cjs.hoveredTab : void 0,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Text_Text_cjs.Text, { icon, children })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          lib_components_Box_Box_cjs.Box,
+          {
+            component: "span",
+            display: "block",
+            transition: "fast",
+            opacity: !isSelected ? 0 : void 0,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              lib_components_Text_Text_cjs.Text,
+              {
+                ...a11y.tabLabelProps({ tabIndex: tabListItemIndex }),
+                tone: "formAccent",
+                icon,
+                children
+              }
+            )
+          }
+        ),
+        badge ? /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { component: "span", paddingLeft: "xsmall", children: React.cloneElement(badge, { bleedY: true }) }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          lib_components_private_Overlay_Overlay_cjs.Overlay,
+          {
+            component: "span",
+            zIndex: 1,
+            boxShadow: "outlineFocus",
+            borderRadius: "standard",
+            className: lib_components_Tabs_Tabs_css_cjs.tabFocusRing,
+            visible: false,
+            transition: "fast",
+            onlyVisibleForKeyboardNavigation: true
+          }
+        )
+      ]
+    }
+  );
+};
+Tab.__isTab__ = true;
+exports.Tab = Tab;