npm - uikit-react-public - Versions diffs - 0.11.24 → 0.17.4 - Mend

uikit-react-public 0.11.24 → 0.17.4

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 (301) 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/capitalise.ts ADDED Viewed

@@ -0,0 +1,4 @@
+const capitalise = (text: string) =>
+  text.charAt(0).toUpperCase() + text.slice(1);
+export default capitalise;

package/lib/utils/index.ts ADDED Viewed

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

package/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.11.24",
+  "version": "0.17.4",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -10,9 +10,6 @@
     "dist",
     "lib"
   ],
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
   "scripts": {
     "dev": "vite",
     "dev_expose": "vite --host",
@@ -45,8 +42,8 @@
     "@floating-ui/react-dom": "^2.1.2"
   },
   "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",

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/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/Field/__tests__/__snapshots__/Field.test.tsx.snap DELETED Viewed

@@ -1,300 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`Field > Snapshot: Default (no children) 1`] = `
-<div
-  class="ucl-uikit-field css-1wirz7t"
-  data-testid="ucl-uikit-field"
-/>
-`;
-exports[`Field > Snapshot: Field.ErrorText alone 1`] = `null`;
-exports[`Field > Snapshot: Field.HelperText alone 1`] = `
-<div
-  class="ucl-uikit-field__helper-text css-1m34d18"
-  data-testid="ucl-uikit-field__helper-text"
->
-  Helper text
-</div>
-`;
-exports[`Field > Snapshot: With Label, HelperText, ErrorText, Input 1`] = `
-<div
-  class="ucl-uikit-field css-1wirz7t"
-  data-testid="ucl-uikit-field"
->
-  <label
-    class="ucl-uikit-label css-v576g6"
-    data-testid="ucl-uikit-label"
-    for="«r2»"
-  >
-    Name
-  </label>
-  <div
-    class="ucl-uikit-field__helper-text css-1m34d18"
-    data-testid="ucl-uikit-field__helper-text"
-  >
-    Helper text
-  </div>
-  <span
-    class="ucl-uikit-input css-1bpb1dw"
-  >
-    <input
-      class="ucl-uikit-input__input css-1nizqet"
-      data-testid="ucl-uikit-input"
-      id="«r2»"
-    />
-  </span>
-</div>
-`;
-exports[`Field > Snapshot: With Label, HelperText, ErrorText, Input, & prop disabled 1`] = `
-<div
-  class="ucl-uikit-field css-1wirz7t"
-  data-testid="ucl-uikit-field"
->
-  <label
-    class="ucl-uikit-label css-2pe9mc"
-    data-testid="ucl-uikit-label"
-    for="«r3»"
-  >
-    Name
-  </label>
-  <div
-    class="ucl-uikit-field__helper-text css-k4nfij"
-    data-testid="ucl-uikit-field__helper-text"
-  >
-    Helper text
-  </div>
-  <span
-    class="ucl-uikit-input css-1bpb1dw"
-  >
-    <input
-      class="ucl-uikit-input__input css-mfikdl"
-      data-testid="ucl-uikit-input"
-      disabled=""
-      id="«r3»"
-    />
-  </span>
-</div>
-`;
-exports[`Field > Snapshot: With Label, HelperText, ErrorText, Input, & prop error 1`] = `
-<div
-  class="ucl-uikit-field css-ar7o8y"
-  data-testid="ucl-uikit-field"
->
-  <label
-    class="ucl-uikit-label css-v576g6"
-    data-testid="ucl-uikit-label"
-    for="«r4»"
-  >
-    Name
-  </label>
-  <div
-    class="ucl-uikit-field__helper-text css-1m34d18"
-    data-testid="ucl-uikit-field__helper-text"
-  >
-    Helper text
-  </div>
-  <div
-    class="ucl-uikit-field__error-text css-1puiun"
-    data-testid="ucl-uikit-field__error-text"
-  >
-    <svg
-      class="ucl-uikit-icon css-q9euyk"
-      data-testid="ucl-uikit-icon"
-      fill="none"
-      height="24"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
-      viewBox="0 0 24 24"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <circle
-        cx="12"
-        cy="12"
-        r="10"
-      />
-      <line
-        x1="12"
-        x2="12"
-        y1="16"
-        y2="12"
-      />
-      <line
-        x1="12"
-        x2="12.01"
-        y1="8"
-        y2="8"
-      />
-    </svg>
-    Error text
-  </div>
-  <span
-    class="ucl-uikit-input css-1bpb1dw"
-  >
-    <input
-      class="ucl-uikit-input__input css-1nizqet"
-      data-testid="ucl-uikit-input"
-      id="«r4»"
-    />
-  </span>
-</div>
-`;
-exports[`Field > Snapshot: With Label, HelperText, ErrorText, Input, & prop optional 1`] = `
-<div
-  class="ucl-uikit-field css-1wirz7t"
-  data-testid="ucl-uikit-field"
->
-  <label
-    class="ucl-uikit-label css-v576g6"
-    data-testid="ucl-uikit-label"
-    for="«r5»"
-  >
-    Name
-    <span
-      class="css-1fd72bb"
-    >
-       (optional)
-    </span>
-  </label>
-  <div
-    class="ucl-uikit-field__helper-text css-1m34d18"
-    data-testid="ucl-uikit-field__helper-text"
-  >
-    Helper text
-  </div>
-  <span
-    class="ucl-uikit-input css-1bpb1dw"
-  >
-    <input
-      class="ucl-uikit-input__input css-1nizqet"
-      data-testid="ucl-uikit-input"
-      id="«r5»"
-    />
-  </span>
-</div>
-`;
-exports[`Field > Snapshot: With Label, HelperText, ErrorText, Textarea 1`] = `
-<div
-  class="ucl-uikit-field css-1wirz7t"
-  data-testid="ucl-uikit-field"
->
-  <label
-    class="ucl-uikit-label css-v576g6"
-    data-testid="ucl-uikit-label"
-    for="«r7»"
-  >
-    Name
-  </label>
-  <div
-    class="ucl-uikit-field__helper-text css-1m34d18"
-    data-testid="ucl-uikit-field__helper-text"
-  >
-    Helper text
-  </div>
-  <textarea
-    class="ucl-uikit-textarea css-19nnvor"
-    data-testid="ucl-uikit-textarea"
-    id="«r7»"
-  />
-</div>
-`;
-exports[`Field > Snapshot: With Label, HelperText, ErrorText, Textarea, & prop disabled 1`] = `
-<div
-  class="ucl-uikit-field css-1wirz7t"
-  data-testid="ucl-uikit-field"
->
-  <label
-    class="ucl-uikit-label css-2pe9mc"
-    data-testid="ucl-uikit-label"
-    for="«r8»"
-  >
-    Name
-  </label>
-  <div
-    class="ucl-uikit-field__helper-text css-k4nfij"
-    data-testid="ucl-uikit-field__helper-text"
-  >
-    Helper text
-  </div>
-  <textarea
-    class="ucl-uikit-textarea css-1o8pbxe"
-    data-testid="ucl-uikit-textarea"
-    disabled=""
-    id="«r8»"
-  />
-</div>
-`;
-exports[`Field > Snapshot: With Label, Input 1`] = `
-<div
-  class="ucl-uikit-field css-1wirz7t"
-  data-testid="ucl-uikit-field"
->
-  <label
-    class="ucl-uikit-label css-v576g6"
-    data-testid="ucl-uikit-label"
-    for="«r1»"
-  >
-    Name
-  </label>
-  <span
-    class="ucl-uikit-input css-1bpb1dw"
-  >
-    <input
-      class="ucl-uikit-input__input css-1nizqet"
-      data-testid="ucl-uikit-input"
-      id="«r1»"
-    />
-  </span>
-</div>
-`;
-exports[`Field > Snapshot: With Label, Textarea 1`] = `
-<div
-  class="ucl-uikit-field css-1wirz7t"
-  data-testid="ucl-uikit-field"
->
-  <label
-    class="ucl-uikit-label css-v576g6"
-    data-testid="ucl-uikit-label"
-    for="«r6»"
-  >
-    Name
-  </label>
-  <textarea
-    class="ucl-uikit-textarea css-19nnvor"
-    data-testid="ucl-uikit-textarea"
-    id="«r6»"
-  />
-</div>
-`;
-exports[`Field > Snapshot: With Textarea & prop maxChar 1`] = `
-<div
-  class="ucl-uikit-field css-1wirz7t"
-  data-testid="ucl-uikit-field"
->
-  <textarea
-    class="ucl-uikit-textarea css-19nnvor"
-    data-testid="ucl-uikit-textarea"
-    id="«r9»"
-  />
-  <div
-    class="ucl-uikit-field__char-count css-1ma0lts"
-    data-testid="ucl-uikit-field__char-count"
-  >
-    0
-    /
-    100
-  </div>
-</div>
-`;

/package/dist/components/{Datepicker/utils/dateToLocaleISOString/dateToLocaleISOString.test.d.ts → FileInput/__tests__/FileInput.test.d.ts} RENAMED Viewed

File without changes

/package/lib/components/{Datepicker → NativeDatepicker}/utils/dateToLocaleISOString/dateToLocaleISOString.test.ts RENAMED Viewed

File without changes