@phillips/seldon 1.276.0 → 1.278.0

package/dist/components/SlideToActivate/SlideToActivate.stories.d.ts

@@ -0,0 +1,499 @@
+import { ButtonSizes } from '../Button/types';
+import { TextVariants } from '../Text';
+import { SlideToActivateBorderRadii, SlideToActivateDirections, SlideToActivateConfig, SlideToActivateProps } from './types';
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<SlideToActivateProps & import('react').RefAttributes<HTMLDivElement>>;
+};
+export default meta;
+type PlaygroundArgs = Omit<SlideToActivateProps, 'config'> & SlideToActivateConfig;
+export declare const Playground: {
+    ({ textVariant, size, borderRadius, direction, thumbIcon, thumbWidth, pendingIndicator, trackClassName, thumbClassName, ...rest }: PlaygroundArgs): import("react/jsx-runtime").JSX.Element;
+    args: {
+        labelText: string;
+        textVariant: TextVariants;
+        direction: SlideToActivateDirections;
+        size: ButtonSizes;
+        borderRadius: SlideToActivateBorderRadii;
+        isDisabled: boolean;
+        isComplete: boolean;
+        showThumbWhenDisabled: boolean;
+        successAnnouncement: string;
+        errorAnnouncement: string;
+        keyboardHint: string;
+    };
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+    argTypes: {
+        labelText: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        textVariant: {
+            control: {
+                type: string;
+            };
+            options: TextVariants[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        direction: {
+            control: {
+                type: string;
+            };
+            options: SlideToActivateDirections[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        size: {
+            control: {
+                type: string;
+            };
+            options: ButtonSizes[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        borderRadius: {
+            control: {
+                type: string;
+            };
+            options: SlideToActivateBorderRadii[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        thumbWidth: {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+                step: number;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        isDisabled: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        isComplete: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        showThumbWhenDisabled: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        pendingAnnouncement: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        successAnnouncement: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        errorAnnouncement: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        keyboardHint: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        trackClassName: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        thumbClassName: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        thumbIcon: {
+            control: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        pendingIndicator: {
+            control: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        onActivation: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onError: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onProgress: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+};
+export declare const WithThumbIconHeldState: {
+    (props: SlideToActivateProps): import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        onActivation: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onError: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onProgress: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+};
+export declare const PillThumb: {
+    (props: SlideToActivateProps): import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        onActivation: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onError: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onProgress: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+};
+export declare const Widths: {
+    (props: SlideToActivateProps): import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        onActivation: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onError: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onProgress: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+};
+export declare const DisabledStates: (props: SlideToActivateProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AsyncActivation: {
+    (props: SlideToActivateProps): import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        onActivation: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onError: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onProgress: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+};
+export declare const Rtl: {
+    (props: SlideToActivateProps): import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        onActivation: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onError: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onProgress: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+};
+export declare const Small: {
+    (props: SlideToActivateProps): import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        onActivation: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onError: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onProgress: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+};
+export declare const CustomStyling: {
+    (props: SlideToActivateProps): import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        onActivation: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onError: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onProgress: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+};

package/dist/components/SlideToActivate/SlideToActivate.stories.demo.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { SlideToActivateProps } from './types';
+export declare const SlideToActivateInteractiveDemo: ({ children, initialLabel, pendingLabel, activatedLabel, ...props }: SlideToActivateProps & {
+    children?: ReactNode;
+    initialLabel?: string;
+    pendingLabel?: string;
+    activatedLabel?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SlideToActivate/SlideToActivate.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/SlideToActivate/SlideToActivateThumb.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),v=require("../../_virtual/index2.cjs"),_=require("../Icon/Icon.cjs"),P=({baseClassName:o})=>t.jsxs("span",{className:`${o}__thumb-chevrons`,"aria-hidden":!0,children:[t.jsx(_.default,{icon:"ChevronRight",height:22,width:22,color:"currentColor"}),t.jsx(_.default,{icon:"ChevronRight",height:22,width:22,color:"currentColor"})]}),S=({baseClassName:o,thumbRef:p,thumbClassName:s,thumbWidth:n,thumbIcon:i,thumbTranslatePx:x,labelText:m,descriptionId:u,isHeld:l,isPending:h,isDisabled:c,isThumbHidden:r,isInteractive:e,status:$,snapDurationMs:a,onPointerDown:b,onPointerMove:f,onPointerUp:y,onPointerCancel:j,onKeyDown:g,onKeyUp:w,onBlur:T})=>{const d=i===void 0?t.jsx(P,{baseClassName:o}):i;return t.jsx("button",{ref:p,type:"button",className:v.default(`${o}__thumb`,s,{[`${o}__thumb--pill`]:n!==void 0,[`${o}__thumb--held`]:l,[`${o}__thumb--hidden`]:r}),style:{"--seldon-slide-hit-tolerance":"8px",width:n!==void 0?`${n}px`:void 0,transform:`translateY(-50%) translateX(${x}px)`,transition:$==="snapping"&&a>0?`transform ${a}ms ease-out, opacity 100ms ease-out`:"opacity 100ms ease-out"},"aria-label":m,"aria-describedby":e&&u?u:void 0,"aria-busy":h?!0:void 0,"aria-disabled":c||h?!0:void 0,"aria-hidden":r?!0:void 0,disabled:c,tabIndex:r?-1:void 0,onPointerDown:e?b:void 0,onPointerMove:e?f:void 0,onPointerUp:e?y:void 0,onPointerCancel:e?j:void 0,onKeyDown:e?g:void 0,onKeyUp:e?w:void 0,onBlur:e?T:void 0,children:t.jsx("span",{className:`${o}__thumb-face`,"aria-hidden":d?!0:void 0,children:d?t.jsx("span",{className:v.default(`${o}__thumb-icon`,{[`${o}__thumb-icon--held`]:l}),children:d}):null})})};exports.SlideToActivateThumb=S;

package/dist/components/SlideToActivate/SlideToActivateThumb.d.ts

@@ -0,0 +1,28 @@
+import { KeyboardEvent, PointerEvent, ReactNode, Ref } from 'react';
+import { SlideToActivateStatus } from './slideToActivateUtils';
+interface SlideToActivateThumbProps {
+    baseClassName: string;
+    thumbRef: Ref<HTMLButtonElement>;
+    thumbClassName?: string;
+    thumbWidth?: number;
+    thumbIcon?: ReactNode;
+    thumbTranslatePx: number;
+    labelText: string;
+    descriptionId?: string;
+    isHeld: boolean;
+    isPending: boolean;
+    isDisabled: boolean;
+    isThumbHidden: boolean;
+    isInteractive: boolean;
+    status: SlideToActivateStatus;
+    snapDurationMs: number;
+    onPointerDown?: (event: PointerEvent<HTMLButtonElement>) => void;
+    onPointerMove?: (event: PointerEvent<HTMLButtonElement>) => void;
+    onPointerUp?: () => void;
+    onPointerCancel?: () => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void;
+    onKeyUp?: (event: KeyboardEvent<HTMLButtonElement>) => void;
+    onBlur?: () => void;
+}
+export declare const SlideToActivateThumb: ({ baseClassName, thumbRef, thumbClassName, thumbWidth, thumbIcon, thumbTranslatePx, labelText, descriptionId, isHeld, isPending, isDisabled, isThumbHidden, isInteractive, status, snapDurationMs, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onKeyDown, onKeyUp, onBlur, }: SlideToActivateThumbProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SlideToActivate/SlideToActivateThumb.js

@@ -0,0 +1,76 @@
+import { jsx as n, jsxs as K } from "react/jsx-runtime";
+import v from "../../_virtual/index2.js";
+import p from "../Icon/Icon.js";
+const R = ({ baseClassName: o }) => /* @__PURE__ */ K("span", { className: `${o}__thumb-chevrons`, "aria-hidden": !0, children: [
+  /* @__PURE__ */ n(p, { icon: "ChevronRight", height: 22, width: 22, color: "currentColor" }),
+  /* @__PURE__ */ n(p, { icon: "ChevronRight", height: 22, width: 22, color: "currentColor" })
+] }), B = ({
+  baseClassName: o,
+  thumbRef: _,
+  thumbClassName: m,
+  thumbWidth: t,
+  thumbIcon: e,
+  thumbTranslatePx: $,
+  labelText: f,
+  descriptionId: h,
+  isHeld: l,
+  isPending: u,
+  isDisabled: c,
+  isThumbHidden: i,
+  isInteractive: r,
+  status: y,
+  snapDurationMs: a,
+  onPointerDown: b,
+  onPointerMove: x,
+  onPointerUp: s,
+  onPointerCancel: w,
+  onKeyDown: g,
+  onKeyUp: P,
+  onBlur: j
+}) => {
+  const d = e === void 0 ? /* @__PURE__ */ n(R, { baseClassName: o }) : e;
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      ref: _,
+      type: "button",
+      className: v(`${o}__thumb`, m, {
+        [`${o}__thumb--pill`]: t !== void 0,
+        [`${o}__thumb--held`]: l,
+        [`${o}__thumb--hidden`]: i
+      }),
+      style: {
+        "--seldon-slide-hit-tolerance": "8px",
+        width: t !== void 0 ? `${t}px` : void 0,
+        transform: `translateY(-50%) translateX(${$}px)`,
+        transition: y === "snapping" && a > 0 ? `transform ${a}ms ease-out, opacity 100ms ease-out` : "opacity 100ms ease-out"
+      },
+      "aria-label": f,
+      "aria-describedby": r && h ? h : void 0,
+      "aria-busy": u ? !0 : void 0,
+      "aria-disabled": c || u ? !0 : void 0,
+      "aria-hidden": i ? !0 : void 0,
+      disabled: c,
+      tabIndex: i ? -1 : void 0,
+      onPointerDown: r ? b : void 0,
+      onPointerMove: r ? x : void 0,
+      onPointerUp: r ? s : void 0,
+      onPointerCancel: r ? w : void 0,
+      onKeyDown: r ? g : void 0,
+      onKeyUp: r ? P : void 0,
+      onBlur: r ? j : void 0,
+      children: /* @__PURE__ */ n("span", { className: `${o}__thumb-face`, "aria-hidden": d ? !0 : void 0, children: d ? /* @__PURE__ */ n(
+        "span",
+        {
+          className: v(`${o}__thumb-icon`, {
+            [`${o}__thumb-icon--held`]: l
+          }),
+          children: d
+        }
+      ) : null })
+    }
+  );
+};
+export {
+  B as SlideToActivateThumb
+};

package/dist/components/SlideToActivate/hooks/useSlideDragHandlers.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),L=require("../types.cjs"),I=require("../slideToActivateUtils.cjs"),R=.95,k=8,M=1,O=(o,l)=>{try{return o.setPointerCapture(l),typeof o.hasPointerCapture=="function"?o.hasPointerCapture(l):!1}catch{return!1}},T=({direction:o,isDisabled:l,stateRef:r,measureTravel:p,dispatch:C,emitProgress:S,runActivation:m,snapToIdle:E})=>{const b=n.useRef(0),y=n.useRef(0),P=n.useRef(!1),s=n.useRef(null),D=n.useRef(null),h=n.useRef(null),i=n.useCallback(()=>{h.current?.(),h.current=null},[]);n.useEffect(()=>()=>i(),[i]);const f=n.useCallback((e,t)=>{if(t!==s.current||r.current.status!=="dragging")return;let a=r.current.maxTravel;if(a<=0&&(p(),a=r.current.maxTravel,a<=0))return;const d=e-b.current,u=o===L.SlideToActivateDirections.rtl?-d:d;if(!P.current){if(Math.abs(u)<k)return;P.current=!0}const c=I.clampProgress(y.current+u*M/a);S(c)},[o,S,p,r]),g=n.useCallback(()=>{i();const e=D.current,t=s.current;try{e&&t!==null&&e.hasPointerCapture(t)&&e.releasePointerCapture(t)}catch{}if(s.current=null,D.current=null,r.current.status==="dragging"){if(r.current.progress>=R||r.current.progress>=1){m();return}E()}},[i,m,E,r]),v=n.useCallback(e=>{e.pointerId===s.current&&(e.cancelable&&e.preventDefault(),f(e.clientX,e.pointerId))},[f]);return{handlePointerDown:n.useCallback(e=>{if(l||I.isGestureBusy(r.current.status)||r.current.progress>=1)return;e.preventDefault(),p();const t=e.currentTarget;t.focus(),D.current=t,s.current=e.pointerId;const a=O(t,e.pointerId);if(b.current=e.clientX,y.current=r.current.progress,P.current=!1,C({type:"dragStarted"}),i(),!a){const d=c=>{c.cancelable&&c.preventDefault(),f(c.clientX,c.pointerId)},u=c=>{c.pointerId===s.current&&g()};document.addEventListener("pointermove",d,{passive:!1}),document.addEventListener("pointerup",u),document.addEventListener("pointercancel",u),h.current=()=>{document.removeEventListener("pointermove",d),document.removeEventListener("pointerup",u),document.removeEventListener("pointercancel",u)}}},[f,i,C,g,l,p,r]),handlePointerMove:v,handlePointerUp:g,handlePointerCancel:g}};exports.useSlideDragHandlers=T;

package/dist/components/SlideToActivate/hooks/useSlideDragHandlers.d.ts

@@ -0,0 +1,20 @@
+import { MutableRefObject, PointerEvent as ReactPointerEvent } from 'react';
+import { SlideToActivateAction, SlideToActivateState } from '../slideToActivateReducer';
+import { SlideToActivateDirections } from '../types';
+interface UseSlideDragHandlersOptions {
+    direction: SlideToActivateDirections | `${SlideToActivateDirections}`;
+    isDisabled: boolean;
+    stateRef: MutableRefObject<SlideToActivateState>;
+    measureTravel: () => void;
+    dispatch: (action: SlideToActivateAction) => void;
+    emitProgress: (progress: number) => void;
+    runActivation: () => Promise<void>;
+    snapToIdle: () => void;
+}
+export declare const useSlideDragHandlers: ({ direction, isDisabled, stateRef, measureTravel, dispatch, emitProgress, runActivation, snapToIdle, }: UseSlideDragHandlersOptions) => {
+    handlePointerDown: (event: ReactPointerEvent<HTMLButtonElement>) => void;
+    handlePointerMove: (event: ReactPointerEvent<HTMLButtonElement>) => void;
+    handlePointerUp: () => void;
+    handlePointerCancel: () => void;
+};
+export {};