@preply/ds-web-lib 3.5.1 → 3.6.0

package/dist/utils/RovingTabIndex/RovingTabIndexProvider.d.ts

@@ -0,0 +1,45 @@
+import { default as React, FocusEventHandler, ReactNode } from 'react';
+type Props = {
+    children: ReactNode | ReactNode[];
+};
+/**
+ * Provider that manages tabIndex values for the roving tab index pattern.
+ * Only one element in the group has tabIndex={0}, others have tabIndex={-1}.
+ *
+ * @example
+ * ```tsx
+ * function Toolbar() {
+ *   return (
+ *     <RovingTabIndexProvider>
+ *       <ToolbarButton>Cut</ToolbarButton>
+ *       <ToolbarButton>Copy</ToolbarButton>
+ *     </RovingTabIndexProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare function RovingTabIndexProvider({ children }: Props): React.JSX.Element;
+/**
+ * Hook that provides tabIndex management for individual elements in a roving tab index group.
+ *
+ * @example
+ * ```tsx
+ * function ToolbarButton({ children, onFocus }) {
+ *   const { ref, onFocus, tabIndex } = useRovingTabIndex({ onFocus });
+ *   return (
+ *     <button ref={ref} onFocus={onFocus} tabIndex={tabIndex}>
+ *       {children}
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export declare function useRovingTabIndex<E extends HTMLElement = HTMLElement>({ onFocus, }?: {
+    onFocus?: FocusEventHandler<E>;
+}): {
+    ref: React.RefObject<E>;
+    onFocus: React.FocusEventHandler<E>;
+    tabIndex: number;
+};
+export {};
+//# sourceMappingURL=RovingTabIndexProvider.d.ts.map

package/dist/utils/RovingTabIndex/RovingTabIndexProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RovingTabIndexProvider.d.ts","sourceRoot":"","sources":["../../../src/utils/RovingTabIndex/RovingTabIndexProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAGV,iBAAiB,EACjB,SAAS,EAMZ,MAAM,OAAO,CAAC;AAYf,KAAK,KAAK,GAAG;IACT,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CACrC,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,qBAIzD;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,EACnE,OAAO,GACV,GAAE;IAAE,OAAO,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAA;CAAO;;;;EAwBzC"}

package/dist/utils/RovingTabIndex/RovingTabIndexProvider.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useRef, useEffect, useState } from "react";
+const ctx = createContext({
+  lastFocused: null,
+  setLastFocused: () => {
+  }
+});
+function RovingTabIndexProvider({
+  children
+}) {
+  const [lastFocused, setLastFocused] = useState(null);
+  return /* @__PURE__ */ jsx(ctx.Provider, { value: {
+    lastFocused,
+    setLastFocused
+  }, children });
+}
+function useRovingTabIndex({
+  onFocus
+} = {}) {
+  const {
+    lastFocused,
+    setLastFocused
+  } = useContext(ctx);
+  const ref = useRef(null);
+  useEffect(() => {
+    const self = ref.current;
+    return () => {
+      setLastFocused((element) => {
+        if (element === self) return null;
+        return element;
+      });
+    };
+  }, [setLastFocused]);
+  const handleFocus = (e) => {
+    setLastFocused(e.target);
+    onFocus == null ? void 0 : onFocus(e);
+  };
+  return {
+    ref,
+    onFocus: handleFocus,
+    tabIndex: lastFocused && lastFocused !== ref.current ? -1 : 0
+  };
+}
+export {
+  RovingTabIndexProvider,
+  useRovingTabIndex
+};

package/dist/utils/RovingTabIndex/index.d.ts

@@ -0,0 +1,2 @@
+export * from './RovingTabIndexProvider';
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/RovingTabIndex/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/RovingTabIndex/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}

package/dist/utils/RovingTabIndex/index.js

@@ -0,0 +1,5 @@
+import { RovingTabIndexProvider, useRovingTabIndex } from "./RovingTabIndexProvider.js";
+export {
+  RovingTabIndexProvider,
+  useRovingTabIndex
+};

package/dist/utils/createRequiredContext.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+/**
+ * Creates a required context and a hook to access it.
+ *
+ * @example
+ * const [Provider, useRequiredContext] = createRequiredContext<Ctx>('MyContext');
+ *
+ * <Provider value={value}>
+ *   <Component />
+ * </Provider>
+ *
+ * const value = useRequiredContext();
+ */
+export declare function createRequiredContext<T>(name: string): readonly [import('react').Provider<T | null>, () => NonNullable<T>];
+//# sourceMappingURL=createRequiredContext.d.ts.map

package/dist/utils/createRequiredContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createRequiredContext.d.ts","sourceRoot":"","sources":["../../src/utils/createRequiredContext.ts"],"names":[],"mappings":";AAEA;;;;;;;;;;;GAWG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,uEAapD"}

package/dist/utils/createRequiredContext.js

@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react";
+function createRequiredContext(name) {
+  const context = createContext(null);
+  context.displayName = `${name}.Provider`;
+  const useRequiredContext = () => {
+    const value = useContext(context);
+    if (!value) {
+      throw new Error(`${name} context must be used within its Provider`);
+    }
+    return value;
+  };
+  return [context.Provider, useRequiredContext];
+}
+export {
+  createRequiredContext
+};

package/dist/utils/useControllableState/useControllableState.d.ts

@@ -0,0 +1,19 @@
+type Props<T> = {
+    value?: T;
+    defaultValue?: T;
+    onValueChange?: (value: T) => void;
+};
+/**
+ * A hook that manages state that can be either controlled or uncontrolled.
+ *
+ * @example
+ * ```tsx
+ * function MyInput(props) {
+ *   const [value, setValue] = useControllableState(props);
+ *   return <input value={value} onChange={(e) => setValue(e.target.value)} />;
+ * }
+ * ```
+ */
+export declare function useControllableState<T>({ value, defaultValue, onValueChange }: Props<T>): readonly [T, (value: T) => void];
+export {};
+//# sourceMappingURL=useControllableState.d.ts.map

package/dist/utils/useControllableState/useControllableState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControllableState.d.ts","sourceRoot":"","sources":["../../../src/utils/useControllableState/useControllableState.ts"],"names":[],"mappings":"AAGA,KAAK,KAAK,CAAC,CAAC,IAAI;IACZ,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,wBAYxE,CAAC,WAYhB"}

package/dist/utils/useControllableState/useControllableState.js

@@ -0,0 +1,27 @@
+import { useState, useEffect, useCallback } from "react";
+import { useStableCallback } from "../useStableCallback/useStableCallback.js";
+function useControllableState({
+  value,
+  defaultValue,
+  onValueChange
+}) {
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState(isControlled ? value : defaultValue);
+  useEffect(() => {
+    if (isControlled && value !== internalValue) {
+      setInternalValue(value);
+    }
+  }, [isControlled, value, internalValue]);
+  const onValueChangeStable = useStableCallback(onValueChange);
+  const handleValueChange = useCallback((value2) => {
+    if (!isControlled) {
+      setInternalValue(value2);
+    }
+    onValueChangeStable(value2);
+  }, [isControlled, onValueChangeStable]);
+  const currentValue = isControlled ? value : internalValue;
+  return [currentValue, handleValueChange];
+}
+export {
+  useControllableState
+};

package/dist/utils/useStableCallback/useStableCallback.d.ts

@@ -0,0 +1,18 @@
+/**
+ * A custom React hook that provides a stable reference to a callback function.
+ *
+ * @example
+ * ```tsx
+ * function ParentComponent() {
+ *   const [count, setCount] = useState(0);
+ *
+ *   const handleClick = useStableCallback(() => {
+ *     console.log('Current count:', count);
+ *   });
+ *
+ *   return <ChildComponent onClick={handleClick} />;
+ * }
+ * ```
+ */
+export declare function useStableCallback<T extends (...args: any[]) => any>(callback?: T): T;
+//# sourceMappingURL=useStableCallback.d.ts.map

package/dist/utils/useStableCallback/useStableCallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStableCallback.d.ts","sourceRoot":"","sources":["../../../src/utils/useStableCallback/useStableCallback.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AAEH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,EAAE,QAAQ,CAAC,EAAE,CAAC,KAShF"}

package/dist/utils/useStableCallback/useStableCallback.js

@@ -0,0 +1,15 @@
+import { useRef, useEffect, useCallback } from "react";
+function useStableCallback(callback) {
+  const ref = useRef(callback);
+  useEffect(() => {
+    ref.current = callback;
+  }, [callback]);
+  const stableCallback = useCallback((...args) => {
+    var _a;
+    return (_a = ref.current) == null ? void 0 : _a.call(ref, ...args);
+  }, []);
+  return stableCallback;
+}
+export {
+  useStableCallback
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@preply/ds-web-lib",
-    "version": "3.5.1",
+    "version": "3.6.0",
     "type": "module",
     "publishConfig": {
         "access": "public"
@@ -32,26 +32,27 @@
         "@radix-ui/react-slider": "^1.1.2",
         "@radix-ui/react-slot": "^1.1.2",
         "@radix-ui/react-tooltip": "^1.1.8",
+        "@react-aria/focus": "^3.21.0",
         "react-is": "^18.2.0",
         "sonner": "^1.7.4"
     },
     "peerDependencies": {
-        "@preply/ds-core": "3.5.1",
-        "@preply/ds-media-icons": "3.5.1",
-        "@preply/ds-visual-coverage-preply-component-names": "3.5.1",
-        "@preply/ds-web-core": "3.5.1",
-        "@preply/ds-web-root": "3.5.1",
+        "@preply/ds-core": "3.6.0",
+        "@preply/ds-media-icons": "3.6.0",
+        "@preply/ds-visual-coverage-preply-component-names": "3.6.0",
+        "@preply/ds-web-core": "3.6.0",
+        "@preply/ds-web-root": "3.6.0",
         "react": "^16 || ^18",
         "react-dom": "^16 || ^18",
         "react-intl": "^6.5.5"
     },
     "devDependencies": {
-        "@preply/ds-core": "3.5.1",
-        "@preply/ds-docs-toolkit": "3.5.1",
-        "@preply/ds-media-icons": "3.5.1",
-        "@preply/ds-visual-coverage-preply-component-names": "3.5.1",
-        "@preply/ds-web-core": "3.5.1",
-        "@preply/ds-web-root": "3.5.1",
+        "@preply/ds-core": "3.6.0",
+        "@preply/ds-docs-toolkit": "3.6.0",
+        "@preply/ds-media-icons": "3.6.0",
+        "@preply/ds-visual-coverage-preply-component-names": "3.6.0",
+        "@preply/ds-web-core": "3.6.0",
+        "@preply/ds-web-root": "3.6.0",
         "@storybook/react": "8.5.8",
         "@testing-library/react": "16.2.0",
         "@types/react-is": "^18.2.0",
@@ -67,5 +68,5 @@
         "vite-plugin-svgr": "4.3.0",
         "vitest-browser-react": "^0.1.1"
     },
-    "gitHead": "73217c651b724a6d54ef81bfe4f6470a7371e25f"
+    "gitHead": "69141be9a43742a53b52afe14de1620b3a6b43e0"
 }

package/dist/components/Chips/Chips.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Chips.d.ts","sourceRoot":"","sources":["../../../src/components/Chips/Chips.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE1C,OAAO,EAAE,qBAAqB,EAAmB,MAAM,qBAAqB,CAAC;AAC7E,OAAc,EAAE,EAAE,EAAc,yBAAyB,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAUnG,MAAM,MAAM,UAAU,GAAG;IACrB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B;;;;;;;;;;OAUG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACtB;;OAEG;IACH,IAAI,EAAE,yBAAyB,CAAC,cAAc,GAAG,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;CAClF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAAC,GAAG,kBAgBpC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IACzB,KAAK,EAAE,SAAS,CAAC;IACjB,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;;;;;;;;;;;;OAcG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC"}

package/dist/components/CountryFlag/types.d.ts

@@ -1,3 +0,0 @@
-import { countryNames } from './utils/countries';
-export type CountryCode = keyof typeof countryNames;
-//# sourceMappingURL=types.d.ts.map

package/dist/components/CountryFlag/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/CountryFlag/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/components/CountryFlag/utils/countries.d.ts

@@ -1,276 +0,0 @@
-/**
- * The following country list come from {@link https://github.com/lipis/flag-icons/blob/main/country.json.|the flag-icons library}.
- */
-export declare const countryNames: {
-    af: string;
-    ax: string;
-    al: string;
-    dz: string;
-    as: string;
-    ad: string;
-    ao: string;
-    ai: string;
-    aq: string;
-    ag: string;
-    ar: string;
-    am: string;
-    aw: string;
-    'sh-ac': string;
-    asean: string;
-    au: string;
-    at: string;
-    az: string;
-    bs: string;
-    bh: string;
-    bd: string;
-    bb: string;
-    'es-pv': string;
-    by: string;
-    be: string;
-    bz: string;
-    bj: string;
-    bm: string;
-    bt: string;
-    bo: string;
-    bq: string;
-    ba: string;
-    bw: string;
-    bv: string;
-    br: string;
-    io: string;
-    bn: string;
-    bg: string;
-    bf: string;
-    bi: string;
-    cv: string;
-    kh: string;
-    cm: string;
-    ca: string;
-    ic: string;
-    'es-ct': string;
-    ky: string;
-    cf: string;
-    cefta: string;
-    td: string;
-    cl: string;
-    cn: string;
-    cx: string;
-    cp: string;
-    cc: string;
-    co: string;
-    km: string;
-    ck: string;
-    cr: string;
-    hr: string;
-    cu: string;
-    cw: string;
-    cy: string;
-    cz: string;
-    ci: string;
-    cd: string;
-    dk: string;
-    dg: string;
-    dj: string;
-    dm: string;
-    do: string;
-    eac: string;
-    ec: string;
-    eg: string;
-    sv: string;
-    'gb-eng': string;
-    gq: string;
-    er: string;
-    ee: string;
-    sz: string;
-    et: string;
-    eu: string;
-    fk: string;
-    fo: string;
-    fm: string;
-    fj: string;
-    fi: string;
-    fr: string;
-    gf: string;
-    pf: string;
-    tf: string;
-    ga: string;
-    'es-ga': string;
-    gm: string;
-    ge: string;
-    de: string;
-    gh: string;
-    gi: string;
-    gr: string;
-    gl: string;
-    gd: string;
-    gp: string;
-    gu: string;
-    gt: string;
-    gg: string;
-    gn: string;
-    gw: string;
-    gy: string;
-    ht: string;
-    hm: string;
-    va: string;
-    hn: string;
-    hk: string;
-    hu: string;
-    is: string;
-    in: string;
-    id: string;
-    ir: string;
-    iq: string;
-    ie: string;
-    im: string;
-    il: string;
-    it: string;
-    jm: string;
-    jp: string;
-    je: string;
-    jo: string;
-    kz: string;
-    ke: string;
-    ki: string;
-    xk: string;
-    kw: string;
-    kg: string;
-    la: string;
-    lv: string;
-    arab: string;
-    lb: string;
-    ls: string;
-    lr: string;
-    ly: string;
-    li: string;
-    lt: string;
-    lu: string;
-    mo: string;
-    mg: string;
-    mw: string;
-    my: string;
-    mv: string;
-    ml: string;
-    mt: string;
-    mh: string;
-    mq: string;
-    mr: string;
-    mu: string;
-    yt: string;
-    mx: string;
-    md: string;
-    mc: string;
-    mn: string;
-    me: string;
-    ms: string;
-    ma: string;
-    mz: string;
-    mm: string;
-    na: string;
-    nr: string;
-    np: string;
-    nl: string;
-    nc: string;
-    nz: string;
-    ni: string;
-    ne: string;
-    ng: string;
-    nu: string;
-    nf: string;
-    kp: string;
-    mk: string;
-    'gb-nir': string;
-    mp: string;
-    no: string;
-    om: string;
-    pc: string;
-    pk: string;
-    pw: string;
-    pa: string;
-    pg: string;
-    py: string;
-    pe: string;
-    ph: string;
-    pn: string;
-    pl: string;
-    pt: string;
-    pr: string;
-    qa: string;
-    cg: string;
-    ro: string;
-    ru: string;
-    rw: string;
-    re: string;
-    bl: string;
-    'sh-hl': string;
-    sh: string;
-    kn: string;
-    lc: string;
-    mf: string;
-    pm: string;
-    vc: string;
-    ws: string;
-    sm: string;
-    st: string;
-    sa: string;
-    'gb-sct': string;
-    sn: string;
-    rs: string;
-    sc: string;
-    sl: string;
-    sg: string;
-    sx: string;
-    sk: string;
-    si: string;
-    sb: string;
-    so: string;
-    za: string;
-    gs: string;
-    kr: string;
-    ss: string;
-    es: string;
-    lk: string;
-    ps: string;
-    sd: string;
-    sr: string;
-    sj: string;
-    se: string;
-    ch: string;
-    sy: string;
-    tw: string;
-    tj: string;
-    tz: string;
-    th: string;
-    tl: string;
-    tg: string;
-    tk: string;
-    to: string;
-    tt: string;
-    'sh-ta': string;
-    tn: string;
-    tm: string;
-    tc: string;
-    tv: string;
-    tr: string;
-    ug: string;
-    ua: string;
-    ae: string;
-    gb: string;
-    un: string;
-    um: string;
-    us: string;
-    uy: string;
-    uz: string;
-    vu: string;
-    ve: string;
-    vn: string;
-    vg: string;
-    vi: string;
-    'gb-wls': string;
-    wf: string;
-    eh: string;
-    ye: string;
-    zm: string;
-    zw: string;
-};
-//# sourceMappingURL=countries.d.ts.map

package/dist/components/CountryFlag/utils/countries.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"countries.d.ts","sourceRoot":"","sources":["../../../../src/components/CountryFlag/utils/countries.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+QxB,CAAC"}