npm - uikit-react-public - Versions diffs - 0.14.21 → 0.21.8 - Mend

uikit-react-public 0.14.21 → 0.21.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (392) hide show

package/lib/utils/announce.ts ADDED Viewed

@@ -0,0 +1,134 @@
+/**
+ * Sends a message to screen readers using an ARIA live region.
+ *
+ * Automatically initializes a hidden live region the first time it is used.
+ * This allows screen readers (NVDA, JAWS, VoiceOver) to announce dynamic
+ * updates such as "Item removed", "Saved", etc.
+ *
+ * The live region is visually hidden but remains accessible.
+ *
+ * @param message - The message to announce to screen readers.
+ *
+ * @param force - If true, forces the announcement even if it's the same as the last one.
+ *
+ * @example
+ * announce("Item removed");
+ *
+ * @example
+ * announce("Form submitted successfully");
+ */
+let liveRegion: HTMLDivElement | null = null;
+let announcementQueue: string[] = [];
+let isAnnouncing = false;
+let lastAnnouncement = '';
+const SR_DETECTION_DELAY = 100; // Time for SR to detect change
+const SR_PROCESSING_DELAY = 1000; // Time for SR to finish announcement
+/**
+ * Creates the live region if it does not already exist.
+ */
+const initLiveRegion = (): void => {
+  if (typeof document === 'undefined' || liveRegion) return;
+  // Guard: body may not exist yet (e.g., script in <head>)
+  const container = document.body || document.documentElement;
+  if (!container) return;
+  const region = document.createElement('div');
+  region.setAttribute('aria-live', 'polite');
+  region.setAttribute('aria-atomic', 'true');
+  region.setAttribute('role', 'status');
+  region.setAttribute('data-testid', 'aria-live-region');
+  // Visually hide but keep accessible
+  region.style.position = 'absolute';
+  region.style.left = '-9999px';
+  region.style.width = '1px';
+  region.style.height = '1px';
+  region.style.overflow = 'hidden';
+  document.body.appendChild(region);
+  liveRegion = region;
+};
+/**
+ * Processes the announcement queue sequentially.
+ */
+const processQueue = (): void => {
+  if (isAnnouncing || announcementQueue.length === 0) return;
+  if (!liveRegion) {
+    // If no live region, do not drop the message or update lastAnnouncement
+    return;
+  }
+  // Only shift and update lastAnnouncement if liveRegion exists
+  const message = announcementQueue.shift()!;
+  lastAnnouncement = message;
+  isAnnouncing = true;
+  // Clear previous message to force announcement
+  liveRegion.textContent = '';
+  // brief delay ensures SRs detect the change
+  setTimeout(() => {
+    if (liveRegion) {
+      liveRegion.textContent = message;
+    }
+    // Wait for screen reader to process, then announce next
+    setTimeout(() => {
+      isAnnouncing = false;
+      processQueue();
+    }, SR_PROCESSING_DELAY);
+  }, SR_DETECTION_DELAY);
+};
+/**
+ * Announces a message to screen readers.
+ */
+const announce = (message: string, force = false): void => {
+  // SSR guard: do nothing if document is unavailable
+  if (typeof document === 'undefined') return;
+  // Initialize live region on first use
+  if (!liveRegion) initLiveRegion();
+  // If forcing, clear the queue to prevent old messages
+  if (force) {
+    announcementQueue.length = 0;
+  }
+  // Skip if the same message was just announced or is already queued
+  if (
+    !force &&
+    message === lastAnnouncement &&
+    announcementQueue.length === 0
+  ) {
+    return;
+  }
+  // Prevent adding duplicate messages to the queue (including if currently announcing)
+  if (
+    announcementQueue.includes(message) ||
+    (isAnnouncing && lastAnnouncement === message)
+  ) {
+    return;
+  }
+  announcementQueue.push(message);
+  processQueue();
+};
+// Export for testing purposes
+export const __resetForTesting = (): void => {
+  if (liveRegion && liveRegion.parentNode) {
+    liveRegion.parentNode.removeChild(liveRegion);
+  }
+  liveRegion = null;
+  announcementQueue = [];
+  isAnnouncing = false;
+  lastAnnouncement = '';
+};
+export default announce;

package/lib/utils/index.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { default as announce } from './announce';

package/lib/utils/scrollToTop.ts ADDED Viewed

@@ -0,0 +1,5 @@
+const scrollToTop = () => {
+  window?.scrollTo({ top: 0, behavior: 'smooth' });
+};
+export default scrollToTop;

package/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.14.21",
+  "version": "0.21.8",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,7 +11,7 @@
     "lib"
   ],
   "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
+    "access": "public"
   },
   "scripts": {
     "dev": "vite",
@@ -28,9 +28,7 @@
     "coverage": "vitest run --coverage",
     "report": "vite ./coverage",
     "preview": "vite preview",
-    "prepublishOnly": "npm run build",
-    "prepare": "husky",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006 --disable-telemetry",
     "build-storybook": "storybook build",
     "predeploy": "npm run build-storybook",
     "deploy": "gh-pages -d storybook-static"
@@ -42,11 +40,13 @@
   },
   "dependencies": {
     "@emotion/css": "^11.13.5",
-    "@floating-ui/react-dom": "^2.1.2"
+    "@emotion/react": "^11.14.0",
+    "@floating-ui/react-dom": "^2.1.2",
+    "design-system-foundations-public": "0.0.37"
   },
   "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@azure/msal-browser": "^4.7.0",
@@ -66,7 +66,8 @@
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/node": "^22.13.10",
-    "@types/react-dom": "^19.1.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "@typescript-eslint/eslint-plugin": "^8.26.1",
     "@typescript-eslint/parser": "^8.26.1",
     "@vitejs/plugin-basic-ssl": "^2.0.0",
@@ -89,6 +90,7 @@
     "prettier": "^3.5.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-router": "^7.13.1",
     "storybook": "^8.6.4",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.26.1",

package/dist/components/Button/buttonPrimaryStyle.d.ts DELETED Viewed

@@ -1,4 +0,0 @@
-import { ThemeType } from '../../theme';
-import { ButtonBaseProps } from './Button';
-declare const buttonPrimaryStyle: (theme: ThemeType, destructive: ButtonBaseProps["destructive"], disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"]) => string;
-export default buttonPrimaryStyle;

package/dist/components/Button/buttonSecondaryStyle.d.ts DELETED Viewed

@@ -1,4 +0,0 @@
-import { ThemeType } from '../../theme';
-import { ButtonBaseProps } from './Button';
-declare const buttonSecondaryStyle: (theme: ThemeType, destructive: ButtonBaseProps["destructive"], disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"]) => string;
-export default buttonSecondaryStyle;

package/dist/components/Button/buttonTertiaryStyle.d.ts DELETED Viewed

@@ -1,4 +0,0 @@
-import { ThemeType } from '../../theme';
-import { ButtonBaseProps } from './Button';
-declare const buttonTertiaryStyle: (theme: ThemeType, disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"]) => string;
-export default buttonTertiaryStyle;

package/dist/components/Datepicker/subcomponents/NativeDatepicker.d.ts DELETED Viewed

@@ -1,6 +0,0 @@
-interface NativeDatepickerProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    testId?: string;
-    ref?: React.RefObject<HTMLInputElement>;
-}
-declare const NativeDatepicker: ({ value, onChange, min, max, className, disabled, testId, ref, ...props }: NativeDatepickerProps) => import("react/jsx-runtime").JSX.Element;
-export default NativeDatepicker;

package/dist/theme/defaultTheme.d.ts DELETED Viewed

@@ -1,274 +0,0 @@
-declare const displayColours: {
-    purpleDark: string;
-    purpleVibrant: string;
-    purpleMuted: string;
-    greenDark: string;
-    greenVibrant: string;
-    greenMuted: string;
-    yellowDark: string;
-    yellowVibrant: string;
-    yellowMuted: string;
-    pinkDark: string;
-    pinkVibrant: string;
-    pinkMuted: string;
-    blueDark: string;
-    blueVibrant: string;
-    blueMuted: string;
-};
-declare const blackAndWhite: {
-    black: string;
-    white: string;
-};
-declare const theme: {
-    p0: number;
-    p2: string;
-    p4: string;
-    p6: string;
-    p8: string;
-    p12: string;
-    p16: string;
-    p20: string;
-    p24: string;
-    p32: string;
-    p40: string;
-    p48: string;
-    p56: string;
-    p64: string;
-    p72: string;
-    p80: string;
-    m0: number;
-    m2: string;
-    m4: string;
-    m6: string;
-    m8: string;
-    m12: string;
-    m16: string;
-    m20: string;
-    m24: string;
-    m32: string;
-    m40: string;
-    m48: string;
-    m56: string;
-    m64: string;
-    m72: string;
-    m80: string;
-    color: {
-        text: {
-            primary: string;
-            secondary: string;
-            muted: string;
-            inverted: string;
-            interactive: string;
-            default: string;
-            disabledOnBg: string;
-            disabled: string;
-            active: string;
-            hover: string;
-            visited: string;
-            error: string;
-            errorHover: string;
-            errorDisabled: string;
-        };
-        interaction: {
-            blue100: string;
-            blue80: string;
-            blue70: string;
-            blue40: string;
-            blue10: string;
-            blue5: string;
-        };
-        display: {
-            purpleDark: string;
-            purpleVibrant: string;
-            purpleMuted: string;
-            greenDark: string;
-            greenVibrant: string;
-            greenMuted: string;
-            yellowDark: string;
-            yellowVibrant: string;
-            yellowMuted: string;
-            pinkDark: string;
-            pinkVibrant: string;
-            pinkMuted: string;
-            blueDark: string;
-            blueVibrant: string;
-            blueMuted: string;
-        };
-        system: {
-            red100: string;
-            red70: string;
-            red40: string;
-            red10: string;
-            orange100: string;
-            orange70: string;
-            orange40: string;
-            orange10: string;
-            green100: string;
-            green70: string;
-            green40: string;
-            green10: string;
-            blue100: string;
-            blue80: string;
-            blue70: string;
-            blue40: string;
-            blue10: string;
-            blue5: string;
-        };
-        link: {
-            default: string;
-            secondaryDefault: string;
-            hover: string;
-            secondaryHover: string;
-            visited: string;
-            disabled: string;
-        };
-        neutral: {
-            black: string;
-            grey90: string;
-            grey80: string;
-            grey70: string;
-            grey60: string;
-            grey40: string;
-            grey20: string;
-            grey15: string;
-            grey10: string;
-            grey5: string;
-            white: string;
-        };
-        overlay: {
-            blanket: string;
-        };
-    };
-    thickness: {
-        t1: string;
-        t2: string;
-    };
-    width: {
-        h16: string;
-        h20: string;
-        h24: string;
-    };
-    height: {
-        h16: string;
-        h20: string;
-        h24: string;
-        h32: string;
-        h36: string;
-        h40: string;
-        h80: string;
-    };
-    margin: {
-        m0: number;
-        m2: string;
-        m4: string;
-        m6: string;
-        m8: string;
-        m12: string;
-        m16: string;
-        m20: string;
-        m24: string;
-        m32: string;
-        m40: string;
-        m48: string;
-        m56: string;
-        m64: string;
-        m72: string;
-        m80: string;
-    };
-    padding: {
-        p0: number;
-        p2: string;
-        p4: string;
-        p6: string;
-        p8: string;
-        p12: string;
-        p16: string;
-        p20: string;
-        p24: string;
-        p32: string;
-        p40: string;
-        p48: string;
-        p56: string;
-        p64: string;
-        p72: string;
-        p80: string;
-    };
-    radius: {
-        r2: string;
-        r4: string;
-        r8: string;
-        r12: string;
-        r16: string;
-    };
-    border: {
-        b1: string;
-        b2: string;
-    };
-    outline: {
-        o2: string;
-        o4: string;
-    };
-    font: {
-        family: {
-            primary: string;
-            secondary: string;
-            fixed: string;
-        };
-        size: {
-            f12: string;
-            f14: string;
-            f16: string;
-            f18: string;
-            f20: string;
-            f22: string;
-            f24: string;
-            f26: string;
-            f28: string;
-            f30: string;
-            f32: string;
-            f36: string;
-            f40: string;
-        };
-        weight: {
-            light: number;
-            regular: number;
-            medium: number;
-            semiBold: number;
-            bold: number;
-            extraBold: number;
-        };
-        lineHeight: {
-            h100: string;
-            h110: string;
-            h120: string;
-            h130: string;
-            h140: string;
-            h150: string;
-        };
-    };
-    boxShadow: {
-        y1: string;
-        y2: string;
-        x2y4: string;
-        focus: string;
-        active: string;
-        destructiveActive: string;
-    };
-    breakpoints: {
-        mobile: number;
-        tablet: number;
-        desktop: number;
-        desktopLarge: number;
-    };
-    mq: {
-        mobile: string;
-        tablet: string;
-        desktop: string;
-        desktopLarge: string;
-        custom: (breakpoint: number) => string;
-    };
-};
-export type ThemeType = typeof theme;
-export type DisplayColoursType = typeof displayColours;
-export type BlackAndWhiteColoursType = typeof blackAndWhite;
-export default theme;

package/lib/components/Accordion/Accordion.stories.tsx.NOT_READY DELETED Viewed

@@ -1,93 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Accordion from './Accordion';
-import { ThemeContextProvider } from '../../theme/useTheme';
-const meta: Meta<typeof Accordion> = {
-  title: 'Components/Accordion',
-  component: Accordion,
-  decorators: [
-    (Story: React.FC) => (
-      <ThemeContextProvider>
-        <Story />
-      </ThemeContextProvider>
-    ),
-  ],
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export const Default: Story = {
-  args: {
-    isOpen: false,
-    disabled: false,
-    size: 'medium',
-  },
-  render: (args) => (
-    <Accordion {...args}>
-      <Accordion.Heading>Heading</Accordion.Heading>
-      <Accordion.Panel>Panel Content</Accordion.Panel>
-    </Accordion>
-  ),
-};
-export const OpenByDefault: Story = {
-  args: {
-    isOpen: true,
-    disabled: false,
-    size: 'medium',
-  },
-  render: (args) => (
-    <Accordion {...args}>
-      <Accordion.Heading>Heading</Accordion.Heading>
-      <Accordion.Panel>Panel Content</Accordion.Panel>
-    </Accordion>
-  ),
-};
-export const Disabled: Story = {
-  args: {
-    isOpen: false,
-    disabled: true,
-    size: 'medium',
-  },
-  render: (args) => (
-    <Accordion {...args}>
-      <Accordion.Heading>Heading</Accordion.Heading>
-      <Accordion.Panel>Panel Content</Accordion.Panel>
-    </Accordion>
-  ),
-};
-export const SmallSize: Story = {
-  args: {
-    isOpen: false,
-    disabled: false,
-    size: 'small',
-  },
-  render: (args) => (
-    <Accordion {...args}>
-      <Accordion.Heading>Heading</Accordion.Heading>
-      <Accordion.Panel>Panel Content</Accordion.Panel>
-    </Accordion>
-  ),
-};
-export const CustomHeadingElement: Story = {
-  args: {
-    isOpen: false,
-    disabled: false,
-    size: 'medium',
-  },
-  render: (args) => (
-    <Accordion {...args}>
-      <Accordion.Heading as='h2'>
-        Custom Heading as H2
-      </Accordion.Heading>
-      <Accordion.Panel>
-        <p>This is the content of the accordion.</p>
-      </Accordion.Panel>
-    </Accordion>
-  ),
-};

package/lib/components/Button/buttonPrimaryStyle.ts DELETED Viewed

@@ -1,62 +0,0 @@
-import { css, cx } from '@emotion/css';
-import { ThemeType } from '../../theme';
-import { ButtonBaseProps } from './Button';
-const buttonPrimaryStyle = (
-  theme: ThemeType,
-  destructive: ButtonBaseProps['destructive'],
-  disabled: ButtonBaseProps['disabled'],
-  loading: ButtonBaseProps['loading']
-) => {
-  const {
-    color: { system, interaction },
-    boxShadow,
-  } = theme;
-  const bgColour = destructive ? system.red70 : interaction.blue70;
-  const bgHoverColour = destructive ? system.red100 : interaction.blue80;
-  const bgActiveColour = destructive ? system.red70 : interaction.blue70;
-  const boxShadowActive = destructive
-    ? boxShadow.destructiveActive
-    : boxShadow.active;
-  const primaryBaseStyle = css`
-    border: none;
-    background-color: ${bgColour};
-    color: ${theme.color.neutral.white};
-    font-weight: ${theme.font.weight.bold};
-  `;
-  const interactiveStyle = css`
-    cursor: pointer;
-    &:hover {
-      background-color: ${bgHoverColour};
-    }
-    &:active {
-      background-color: ${bgActiveColour};
-      box-shadow: ${boxShadowActive};
-    }
-  `;
-  const disabledStyle = css`
-    border-color: ${theme.color.text.disabled};
-    background-color: ${theme.color.link.disabled};
-    color: ${theme.color.text.disabledOnBg};
-    cursor: not-allowed;
-  `;
-  const loadingStyle = css`
-    cursor: wait;
-  `;
-  return cx(
-    primaryBaseStyle,
-    !disabled && !loading && interactiveStyle,
-    disabled && disabledStyle,
-    loading && loadingStyle
-  );
-};
-export default buttonPrimaryStyle;