@redis-ui/components 41.4.1 → 41.11.0

package/dist/Select/components/Context/Context.cjs

@@ -13,10 +13,12 @@ const SelectContextProvider = ({
 }) => jsxRuntime.jsxRuntimeExports.jsx(SharedId_context.SharedIdTransProvider, {
   children: jsxRuntime.jsxRuntimeExports.jsx(FormField_context.FieldStatusTransProvider, {
     value: error && "error" || valid && "success" || "none",
-    children: jsxRuntime.jsxRuntimeExports.jsx(Field_context.ErrorContentProvider, {
-      value: error ?? "",
-      children: jsxRuntime.jsxRuntimeExports.jsx(Context.Provider, {
-        ...restProps
+    children: jsxRuntime.jsxRuntimeExports.jsx(FormField_context.FieldRequiredTransProvider, {
+      children: jsxRuntime.jsxRuntimeExports.jsx(Field_context.ErrorContentProvider, {
+        value: error ?? "",
+        children: jsxRuntime.jsxRuntimeExports.jsx(Context.Provider, {
+          ...restProps
+        })
       })
     })
   })

package/dist/Select/components/Context/Context.js

@@ -2,7 +2,7 @@ import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.
 import { createContext, useContext } from "react";
 import { ErrorContentProvider } from "../../../Inputs/components/Context/Field.context.js";
 import { SharedIdTransProvider } from "../../../Helpers/contexts/SharedId.context.js";
-import { FieldStatusTransProvider } from "../../../FormField/FormField.context.js";
+import { FieldStatusTransProvider, FieldRequiredTransProvider } from "../../../FormField/FormField.context.js";
 const Context = createContext(null);
 const SelectContextProvider = ({
   error,
@@ -11,10 +11,12 @@ const SelectContextProvider = ({
 }) => jsxRuntimeExports.jsx(SharedIdTransProvider, {
   children: jsxRuntimeExports.jsx(FieldStatusTransProvider, {
     value: error && "error" || valid && "success" || "none",
-    children: jsxRuntimeExports.jsx(ErrorContentProvider, {
-      value: error ?? "",
-      children: jsxRuntimeExports.jsx(Context.Provider, {
-        ...restProps
+    children: jsxRuntimeExports.jsx(FieldRequiredTransProvider, {
+      children: jsxRuntimeExports.jsx(ErrorContentProvider, {
+        value: error ?? "",
+        children: jsxRuntimeExports.jsx(Context.Provider, {
+          ...restProps
+        })
       })
     })
   })

package/dist/Select/components/Trigger/components/Compose/Compose.cjs

@@ -15,16 +15,21 @@ const Compose = ({
 }) => {
   const sharedId = SharedId_context.useSharedId(id);
   const status = FormField_context.useFieldStatus();
+  const required = FormField_context.useFieldRequired();
   const errorContent = Field_context.useErrorContent();
   const errorId = index.useId();
   const statusProps = status === "error" ? {
     "aria-invalid": true,
     "aria-describedby": `${errorId} ${restProps["aria-describedby"] || ""}`
   } : null;
+  const requiredProps = required ? {
+    "aria-required": true
+  } : null;
   const triggerProps = {
     id: sharedId,
     "data-status": status,
     ...statusProps,
+    ...requiredProps,
     ...restProps
   };
   const errorAlert = status === "error" ? jsxRuntime.jsxRuntimeExports.jsx(index$1.VisuallyHidden, {

package/dist/Select/components/Trigger/components/Compose/Compose.js

@@ -5,7 +5,7 @@ import { VisuallyHidden } from "../../../../../node_modules/@radix-ui/react-visu
 import { TriggerContainer } from "./Compose.style.js";
 import { useErrorContent } from "../../../../../Inputs/components/Context/Field.context.js";
 import { useSharedId } from "../../../../../Helpers/contexts/SharedId.context.js";
-import { useFieldStatus } from "../../../../../FormField/FormField.context.js";
+import { useFieldStatus, useFieldRequired } from "../../../../../FormField/FormField.context.js";
 const Compose = ({
   customContainer,
   id,
@@ -13,16 +13,21 @@ const Compose = ({
 }) => {
   const sharedId = useSharedId(id);
   const status = useFieldStatus();
+  const required = useFieldRequired();
   const errorContent = useErrorContent();
   const errorId = useId();
   const statusProps = status === "error" ? {
     "aria-invalid": true,
     "aria-describedby": `${errorId} ${restProps["aria-describedby"] || ""}`
   } : null;
+  const requiredProps = required ? {
+    "aria-required": true
+  } : null;
   const triggerProps = {
     id: sharedId,
     "data-status": status,
     ...statusProps,
+    ...requiredProps,
     ...restProps
   };
   const errorAlert = status === "error" ? jsxRuntimeExports.jsx(VisuallyHidden, {

package/dist/Select/components/Trigger/components/Compose/Compose.style.cjs

@@ -4,6 +4,7 @@ const _styled = require("styled-components");
 const index = require("../../../../../node_modules/@radix-ui/react-select/dist/index.cjs");
 const redisUiStyles = require("@redislabsdev/redis-ui-styles");
 const css_utils = require("../../../../../Helpers/css.utils.cjs");
+const Value_style = require("../Value/Value.style.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const getStateStyle = (theme) => {
@@ -48,6 +49,10 @@ const getStateStyle = (theme) => {
       svg {
         opacity: ${statesStyle.disabled.iconOpacity || 0.3};
       }
+
+      ${Value_style.ValueContainer} svg[data-monochrome] {
+        opacity: 1;
+      }
     }
   `;
 };

package/dist/Select/components/Trigger/components/Compose/Compose.style.js

@@ -2,6 +2,7 @@ import _styled, { css } from "styled-components";
 import { Trigger } from "../../../../../node_modules/@radix-ui/react-select/dist/index.js";
 import { useTheme } from "@redislabsdev/redis-ui-styles";
 import { styleFromTokens, tokenMaps } from "../../../../../Helpers/css.utils.js";
+import { ValueContainer } from "../Value/Value.style.js";
 const getStateStyle = (theme) => {
   const statesStyle = theme.components.select.states;
   const {
@@ -44,6 +45,10 @@ const getStateStyle = (theme) => {
       svg {
         opacity: ${statesStyle.disabled.iconOpacity || 0.3};
       }
+
+      ${ValueContainer} svg[data-monochrome] {
+        opacity: 1;
+      }
     }
   `;
 };

package/dist/Stepper/Stepper.context.cjs

@@ -1,13 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const StepperContext = React.createContext(null);
-const useStepperContext = () => {
-  const context = React.useContext(StepperContext);
-  if (!context) {
-    throw new Error("Step components must be used within a Stepper");
-  }
-  return context;
-};
-exports.StepperContext = StepperContext;
+const NullableContext = require("../Helpers/contexts/NullableContext.cjs");
+const [useStepperContext, StepperContextProvider] = NullableContext.createNullableContext({
+  forComponentName: "Stepper"
+});
+exports.StepperContextProvider = StepperContextProvider;
 exports.useStepperContext = useStepperContext;

package/dist/Stepper/Stepper.context.d.ts

@@ -8,5 +8,4 @@ export type StepperContextType = {
     onStepChange?: (stepIndex: number) => void;
     getIsStepInteractive: (stepIndex: number) => boolean;
 };
-export declare const StepperContext: import("react").Context<StepperContextType | null>;
-export declare const useStepperContext: () => StepperContextType;
+export declare const useStepperContext: () => StepperContextType, StepperContextProvider: import("react").Provider<StepperContextType>;

package/dist/Stepper/Stepper.context.js

@@ -1,13 +1,8 @@
-import { createContext, useContext } from "react";
-const StepperContext = createContext(null);
-const useStepperContext = () => {
-  const context = useContext(StepperContext);
-  if (!context) {
-    throw new Error("Step components must be used within a Stepper");
-  }
-  return context;
-};
+import { createNullableContext } from "../Helpers/contexts/NullableContext.js";
+const [useStepperContext, StepperContextProvider] = createNullableContext({
+  forComponentName: "Stepper"
+});
 export {
-  StepperContext,
+  StepperContextProvider,
   useStepperContext
 };

package/dist/Stepper/Stepper.d.ts

@@ -1,17 +1,17 @@
 import { StepperProps } from './Stepper.types';
 declare const Stepper: (({ steps, ...restProps }: StepperProps) => import("react/jsx-runtime").JSX.Element) & {
     Step: (({ children, ...restProps }: import(".").StepperStepProps) => import("react/jsx-runtime").JSX.Element) & {
-        Compose: ({ onClick, onKeyDown, ...restProps }: import("./components/Step/components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element | null;
+        Compose: ({ onClick, ...restProps }: import("./components/Step/components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element | null;
         Icon: ({ children, ...restProps }: import("./components/Step/components/Icon/Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
         Label: ({ children, ...restProps }: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
-        useStepContext: typeof import("./components/Step/Step.context").useStepContext;
+        useStepContext: () => import(".").StepperStepContextType;
     };
     Compose: (({ currentStep, getIsStepInteractive, onStepChange, onKeyDown, ...restProps }: import("./components/Compose/Compose.types").StepperComposeProps) => import("react/jsx-runtime").JSX.Element) & {
         Step: (({ children, ...restProps }: import(".").StepperStepProps) => import("react/jsx-runtime").JSX.Element) & {
-            Compose: ({ onClick, onKeyDown, ...restProps }: import("./components/Step/components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element | null;
+            Compose: ({ onClick, ...restProps }: import("./components/Step/components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element | null;
             Icon: ({ children, ...restProps }: import("./components/Step/components/Icon/Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
             Label: ({ children, ...restProps }: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
-            useStepContext: typeof import("./components/Step/Step.context").useStepContext;
+            useStepContext: () => import(".").StepperStepContextType;
         };
     };
 };

package/dist/Stepper/components/Compose/Compose.cjs

@@ -5,6 +5,7 @@ const Step = require("../Step/Step.cjs");
 const Stepper_context = require("../../Stepper.context.cjs");
 const useStepperInteractive = require("../../hooks/useStepperInteractive.cjs");
 const useStepIndexing = require("../../hooks/useStepIndexing.cjs");
+const useStepperFocusing = require("../../hooks/useStepperFocusing.cjs");
 const Compose_style = require("./Compose.style.cjs");
 const StepperCompose = Object.assign(({
   currentStep = -1,
@@ -14,6 +15,9 @@ const StepperCompose = Object.assign(({
   ...restProps
 }) => {
   const stepIndexingContext = useStepIndexing.useStepIndexing();
+  const focusingProps = useStepperFocusing.useStepperFocusing({
+    isInteractive: !!onStepChange
+  });
   const {
     context: interactivityContext,
     props: interactivityProps
@@ -29,9 +33,10 @@ const StepperCompose = Object.assign(({
     ...interactivityContext,
     currentStep
   };
-  return jsxRuntime.jsxRuntimeExports.jsx(Stepper_context.StepperContext.Provider, {
+  return jsxRuntime.jsxRuntimeExports.jsx(Stepper_context.StepperContextProvider, {
     value: contextValue,
     children: jsxRuntime.jsxRuntimeExports.jsx(Compose_style.StepperCompose, {
+      ...focusingProps,
       ...interactivityProps,
       ...restProps
     })

package/dist/Stepper/components/Compose/Compose.d.ts

@@ -1,10 +1,10 @@
 import { StepperComposeProps } from './Compose.types';
 declare const StepperCompose: (({ currentStep, getIsStepInteractive, onStepChange, onKeyDown, ...restProps }: StepperComposeProps) => import("react/jsx-runtime").JSX.Element) & {
     Step: (({ children, ...restProps }: import("../..").StepperStepProps) => import("react/jsx-runtime").JSX.Element) & {
-        Compose: ({ onClick, onKeyDown, ...restProps }: import("../Step/components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element | null;
+        Compose: ({ onClick, ...restProps }: import("../Step/components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element | null;
         Icon: ({ children, ...restProps }: import("../Step/components/Icon/Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
         Label: ({ children, ...restProps }: import("../../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
-        useStepContext: typeof import("../Step/Step.context").useStepContext;
+        useStepContext: () => import("../..").StepperStepContextType;
     };
 };
 export default StepperCompose;

package/dist/Stepper/components/Compose/Compose.js

@@ -1,8 +1,9 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
 import Step from "../Step/Step.js";
-import { StepperContext } from "../../Stepper.context.js";
+import { StepperContextProvider } from "../../Stepper.context.js";
 import { useStepperInteractive } from "../../hooks/useStepperInteractive.js";
 import { useStepIndexing } from "../../hooks/useStepIndexing.js";
+import { useStepperFocusing } from "../../hooks/useStepperFocusing.js";
 import { StepperCompose as StepperCompose$1 } from "./Compose.style.js";
 const StepperCompose = Object.assign(({
   currentStep = -1,
@@ -12,6 +13,9 @@ const StepperCompose = Object.assign(({
   ...restProps
 }) => {
   const stepIndexingContext = useStepIndexing();
+  const focusingProps = useStepperFocusing({
+    isInteractive: !!onStepChange
+  });
   const {
     context: interactivityContext,
     props: interactivityProps
@@ -27,9 +31,10 @@ const StepperCompose = Object.assign(({
     ...interactivityContext,
     currentStep
   };
-  return jsxRuntimeExports.jsx(StepperContext.Provider, {
+  return jsxRuntimeExports.jsx(StepperContextProvider, {
     value: contextValue,
     children: jsxRuntimeExports.jsx(StepperCompose$1, {
+      ...focusingProps,
       ...interactivityProps,
       ...restProps
     })

package/dist/Stepper/components/Step/Step.context.cjs

@@ -1,13 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const StepContext = React.createContext(null);
-function useStepContext() {
-  const context = React.useContext(StepContext);
-  if (!context) {
-    throw new Error(`Stepper compound components cannot be rendered outside the stepper component`);
-  }
-  return context;
-}
-exports.StepContext = StepContext;
+const NullableContext = require("../../../Helpers/contexts/NullableContext.cjs");
+const [useStepContext, StepContextProvider] = NullableContext.createNullableContext({
+  forComponentName: "Stepper.Step"
+});
+exports.StepContextProvider = StepContextProvider;
 exports.useStepContext = useStepContext;

package/dist/Stepper/components/Step/Step.context.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
 import { StepperStepContextType } from './Step.types';
-export declare const StepContext: import("react").Context<StepperStepContextType | null>;
-export declare function useStepContext(): StepperStepContextType;
+export declare const useStepContext: () => StepperStepContextType, StepContextProvider: import("react").Provider<StepperStepContextType>;

package/dist/Stepper/components/Step/Step.context.js

@@ -1,13 +1,8 @@
-import { createContext, useContext } from "react";
-const StepContext = createContext(null);
-function useStepContext() {
-  const context = useContext(StepContext);
-  if (!context) {
-    throw new Error(`Stepper compound components cannot be rendered outside the stepper component`);
-  }
-  return context;
-}
+import { createNullableContext } from "../../../Helpers/contexts/NullableContext.js";
+const [useStepContext, StepContextProvider] = createNullableContext({
+  forComponentName: "Stepper.Step"
+});
 export {
-  StepContext,
+  StepContextProvider,
   useStepContext
 };

package/dist/Stepper/components/Step/Step.d.ts

@@ -1,9 +1,8 @@
 import { StepperStepProps } from './Step.types';
-import { useStepContext } from './Step.context';
 declare const Step: (({ children, ...restProps }: StepperStepProps) => import("react/jsx-runtime").JSX.Element) & {
-    Compose: ({ onClick, onKeyDown, ...restProps }: import("./components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element | null;
+    Compose: ({ onClick, ...restProps }: import("./components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element | null;
     Icon: ({ children, ...restProps }: import("./components/Icon/Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     Label: ({ children, ...restProps }: import("../../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
-    useStepContext: typeof useStepContext;
+    useStepContext: () => import("./Step.types").StepperStepContextType;
 };
 export default Step;

package/dist/Stepper/components/Step/components/Compose/Compose.cjs

@@ -10,7 +10,6 @@ const Compose_style = require("./Compose.style.cjs");
 const useStepperInteractive = require("../../../../hooks/useStepperInteractive.cjs");
 const Compose = ({
   onClick,
-  onKeyDown,
   ...restProps
 }) => {
   const {
@@ -39,10 +38,9 @@ const Compose = ({
     getIsStepInteractive,
     stepIndex,
     onClick,
-    onKeyDown,
     state
   });
-  return jsxRuntime.jsxRuntimeExports.jsx(Step_context.StepContext.Provider, {
+  return jsxRuntime.jsxRuntimeExports.jsx(Step_context.StepContextProvider, {
     value: contextValue,
     children: jsxRuntime.jsxRuntimeExports.jsx(Compose_style.StepCompose, {
       "data-state": state,

package/dist/Stepper/components/Step/components/Compose/Compose.d.ts

@@ -1,3 +1,3 @@
 import { ComposeProps } from './Compose.types';
-declare const Compose: ({ onClick, onKeyDown, ...restProps }: ComposeProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const Compose: ({ onClick, ...restProps }: ComposeProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Compose;

package/dist/Stepper/components/Step/components/Compose/Compose.js

@@ -1,6 +1,6 @@
 import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
 import { useMemo } from "react";
-import { StepContext } from "../../Step.context.js";
+import { StepContextProvider } from "../../Step.context.js";
 import { StepperStepState } from "../../Step.types.js";
 import { useStepRegistration } from "../../../../hooks/useStepRegistration.js";
 import { useStepperContext } from "../../../../Stepper.context.js";
@@ -8,7 +8,6 @@ import { StepCompose } from "./Compose.style.js";
 import { getInteractiveStepProps } from "../../../../hooks/useStepperInteractive.js";
 const Compose = ({
   onClick,
-  onKeyDown,
   ...restProps
 }) => {
   const {
@@ -37,10 +36,9 @@ const Compose = ({
     getIsStepInteractive,
     stepIndex,
     onClick,
-    onKeyDown,
     state
   });
-  return jsxRuntimeExports.jsx(StepContext.Provider, {
+  return jsxRuntimeExports.jsx(StepContextProvider, {
     value: contextValue,
     children: jsxRuntimeExports.jsx(StepCompose, {
       "data-state": state,

package/dist/Stepper/components/Step/components/Compose/Compose.style.cjs

@@ -2,14 +2,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("styled-components");
 const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const Compose_style = require("../../../Compose/Compose.style.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const StepCompose = _styled__default.default.div.withConfig({
   displayName: "Composestyle__StepCompose",
   componentId: "RedisUI__sc-1t34ip6-0"
-})(["display:flex;align-items:center;justify-content:left;gap:", ";flex-shrink:0;", " ", ""], () => redisUiStyles.useTheme().components.stepper.step.gap, redisUiStyles.getFocusStyle(), ({
-  tabIndex
-}) => tabIndex === 0 && _styled.css`
-      cursor: pointer;
-    `);
+})(["display:flex;align-items:center;justify-content:left;gap:", ";flex-shrink:0;", ":not(.no-focus-visible):focus-visible &[aria-selected=true]{", "}&[role='tab']:not([aria-disabled='true']){cursor:pointer;}"], () => redisUiStyles.useTheme().components.stepper.step.gap, Compose_style.StepperCompose, redisUiStyles.getFocusStyleProperties());
 exports.StepCompose = StepCompose;

package/dist/Stepper/components/Step/components/Compose/Compose.style.js

@@ -1,13 +1,10 @@
-import _styled, { css } from "styled-components";
-import { useTheme, getFocusStyle } from "@redislabsdev/redis-ui-styles";
+import _styled from "styled-components";
+import { useTheme, getFocusStyleProperties } from "@redislabsdev/redis-ui-styles";
+import { StepperCompose } from "../../../Compose/Compose.style.js";
 const StepCompose = _styled.div.withConfig({
   displayName: "Composestyle__StepCompose",
   componentId: "RedisUI__sc-1t34ip6-0"
-})(["display:flex;align-items:center;justify-content:left;gap:", ";flex-shrink:0;", " ", ""], () => useTheme().components.stepper.step.gap, getFocusStyle(), ({
-  tabIndex
-}) => tabIndex === 0 && css`
-      cursor: pointer;
-    `);
+})(["display:flex;align-items:center;justify-content:left;gap:", ";flex-shrink:0;", ":not(.no-focus-visible):focus-visible &[aria-selected=true]{", "}&[role='tab']:not([aria-disabled='true']){cursor:pointer;}"], () => useTheme().components.stepper.step.gap, StepperCompose, getFocusStyleProperties());
 export {
   StepCompose
 };

package/dist/Stepper/hooks/useStepperFocusing.cjs

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const useStepperFocusing = ({
+  isInteractive
+}) => {
+  const pointerFocusRef = React.useRef(false);
+  return isInteractive ? {
+    tabIndex: 0,
+    onPointerDown: (e) => {
+      e.preventDefault();
+      pointerFocusRef.current = true;
+      e.currentTarget.classList.add("no-focus-visible");
+      e.currentTarget.focus();
+    },
+    onFocusCapture: (e) => {
+      if (!pointerFocusRef.current) {
+        e.currentTarget.classList.remove("no-focus-visible");
+      }
+      pointerFocusRef.current = false;
+    },
+    onKeyDownCapture: (e) => {
+      e.currentTarget.classList.remove("no-focus-visible");
+    },
+    onBlur: (e) => {
+      e.currentTarget.classList.remove("no-focus-visible");
+      pointerFocusRef.current = false;
+    }
+  } : {};
+};
+exports.useStepperFocusing = useStepperFocusing;

package/dist/Stepper/hooks/useStepperFocusing.d.ts

@@ -0,0 +1,16 @@
+import { FocusEvent, KeyboardEvent, PointerEvent } from 'react';
+export declare const useStepperFocusing: ({ isInteractive }: {
+    isInteractive: boolean;
+}) => {
+    tabIndex: number;
+    onPointerDown: (e: PointerEvent) => void;
+    onFocusCapture: (e: FocusEvent) => void;
+    onKeyDownCapture: (e: KeyboardEvent) => void;
+    onBlur: (e: FocusEvent) => void;
+} | {
+    tabIndex?: undefined;
+    onPointerDown?: undefined;
+    onFocusCapture?: undefined;
+    onKeyDownCapture?: undefined;
+    onBlur?: undefined;
+};

package/dist/Stepper/hooks/useStepperFocusing.js

@@ -0,0 +1,31 @@
+import { useRef } from "react";
+const useStepperFocusing = ({
+  isInteractive
+}) => {
+  const pointerFocusRef = useRef(false);
+  return isInteractive ? {
+    tabIndex: 0,
+    onPointerDown: (e) => {
+      e.preventDefault();
+      pointerFocusRef.current = true;
+      e.currentTarget.classList.add("no-focus-visible");
+      e.currentTarget.focus();
+    },
+    onFocusCapture: (e) => {
+      if (!pointerFocusRef.current) {
+        e.currentTarget.classList.remove("no-focus-visible");
+      }
+      pointerFocusRef.current = false;
+    },
+    onKeyDownCapture: (e) => {
+      e.currentTarget.classList.remove("no-focus-visible");
+    },
+    onBlur: (e) => {
+      e.currentTarget.classList.remove("no-focus-visible");
+      pointerFocusRef.current = false;
+    }
+  } : {};
+};
+export {
+  useStepperFocusing
+};

package/dist/Stepper/hooks/useStepperInteractive.cjs

@@ -18,31 +18,36 @@ function useStepperInteractive({
     }
     return stepIndex !== currentStep;
   }, [currentStep, getIsStepInteractive, isInteractive]);
-  const handleKeyDown = react_utils.combineHandlers(isInteractive ? (event) => {
+  const handleKeyDown = isInteractive ? (event) => {
+    const findNextInteractive = (from, to = totalSteps || 0) => {
+      for (let i = from; i < to; i += 1) {
+        if (isStepInteractive(i)) return i;
+      }
+      return void 0;
+    };
+    const findPrevInteractive = (from, to = 0) => {
+      for (let i = from; i >= to; i -= 1) {
+        if (isStepInteractive(i)) return i;
+      }
+      return void 0;
+    };
+    const handleChange = (next) => {
+      event.preventDefault();
+      if (next !== void 0) onStepChange(next);
+    };
     const {
       key
     } = event;
-    if (key === "ArrowLeft" || key === "ArrowRight") {
-      event.preventDefault();
-      const direction = key === "ArrowRight" ? 1 : -1;
-      const newIndex = currentStep + direction;
-      if (direction > 0) {
-        for (let i = newIndex; i < totalSteps || 0; i += 1) {
-          if (isStepInteractive(i)) {
-            onStepChange(i);
-            break;
-          }
-        }
-      } else {
-        for (let i = newIndex; i >= 0; i -= 1) {
-          if (isStepInteractive(i)) {
-            onStepChange(i);
-            break;
-          }
-        }
-      }
+    if (key === "ArrowRight") {
+      handleChange(findNextInteractive(currentStep + 1));
+    } else if (key === "ArrowLeft") {
+      handleChange(findPrevInteractive(currentStep - 1));
+    } else if (key === "Home") {
+      handleChange(findNextInteractive(0, currentStep));
+    } else if (key === "End") {
+      handleChange(findPrevInteractive((totalSteps || 0) - 1, currentStep + 1));
     }
-  } : void 0, onKeyDown);
+  } : void 0;
   const role = isInteractive ? "tablist" : "list";
   const label = isInteractive ? "Step navigation" : "Progress steps";
   return {
@@ -51,7 +56,7 @@ function useStepperInteractive({
       onStepChange
     },
     props: {
-      onKeyDown: handleKeyDown,
+      onKeyDown: react_utils.combineHandlers(handleKeyDown, onKeyDown),
       role,
       "aria-label": label
     }
@@ -59,7 +64,6 @@ function useStepperInteractive({
 }
 function getInteractiveStepProps({
   onClick,
-  onKeyDown,
   onStepChange,
   getIsStepInteractive,
   stepIndex,
@@ -67,29 +71,18 @@ function getInteractiveStepProps({
 }) {
   const isInteractive = !!onStepChange;
   const isClickable = isInteractive && getIsStepInteractive(stepIndex);
-  const handleClick = react_utils.combineHandlers(isClickable ? () => onStepChange(stepIndex) : void 0, onClick);
-  const handleKeyDown = react_utils.combineHandlers(isClickable ? (e) => {
-    const {
-      key
-    } = e;
-    if (key === "Enter" || key === " ") {
-      e.preventDefault();
-      onStepChange(stepIndex);
-    }
-  } : void 0, onKeyDown);
+  const handleClick = isClickable ? () => onStepChange(stepIndex) : void 0;
   const role = isInteractive ? "tab" : "listitem";
   const ariaSelected = isInteractive ? state === Step_types.StepperStepState.FOCUSED : void 0;
   const ariaCurrent = !isInteractive && state === Step_types.StepperStepState.FOCUSED ? "step" : void 0;
-  const tabIndex = isClickable ? 0 : -1;
   const ariaDisabled = isInteractive && !isClickable ? true : void 0;
   return {
-    onClick: handleClick,
-    onKeyDown: handleKeyDown,
+    onClick: react_utils.combineHandlers(handleClick, onClick),
     role,
     "aria-selected": ariaSelected,
     "aria-current": ariaCurrent,
     "aria-disabled": ariaDisabled,
-    tabIndex
+    tabIndex: -1
   };
 }
 exports.getInteractiveStepProps = getInteractiveStepProps;