@primer/behaviors 0.0.0-20251124211340 → 0.0.0-20251126165731

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 (6) hide show
  1. package/README.md +11 -5
  2. package/dist/cjs/focus-zone.d.ts +0 -1
  3. package/dist/cjs/focus-zone.js +12 -15
  4. package/dist/esm/focus-zone.d.ts +0 -1
  5. package/dist/esm/focus-zone.mjs +12 -15
  6. package/package.json +9 -2
package/README.md CHANGED
@@ -7,10 +7,10 @@ Shared behaviors for JavaScript components
7
7
 
8
8
  ## Documentation
9
9
 
10
- * [Anchored Position](/docs/anchored-position.md)
11
- * [Focus Trap](/docs/focus-trap.md)
12
- * [Focus Zone](/docs/focus-zone.md)
13
- * [Scroll Into View](/docs/scroll-into-view.md)
10
+ - [Anchored Position](/docs/anchored-position.md)
11
+ - [Focus Trap](/docs/focus-trap.md)
12
+ - [Focus Zone](/docs/focus-zone.md)
13
+ - [Scroll Into View](/docs/scroll-into-view.md)
14
14
 
15
15
  ## Installation
16
16
 
@@ -18,8 +18,14 @@ Shared behaviors for JavaScript components
18
18
  npm install @primer/behaviors
19
19
  ```
20
20
 
21
- or
21
+ or
22
22
 
23
23
  ```bash
24
24
  yarn add @primer/behaviors
25
25
  ```
26
+
27
+ ## Storybook
28
+
29
+ ```bash
30
+ npm run storybook
31
+ ```
package/dist/cjs/focus-zone.d.ts CHANGED
@@ -27,7 +27,6 @@ export type FocusZoneSettings = IterateFocusableElements & {
27
27
  onActiveDescendantChanged?: (newActiveDescendant: HTMLElement | undefined, previousActiveDescendant: HTMLElement | undefined, directlyActivated: boolean) => void;
28
28
  focusInStrategy?: 'first' | 'closest' | 'previous' | ((previousFocusedElement: Element) => HTMLElement | undefined);
29
29
  preventScroll?: boolean;
30
- activeOnHover?: boolean;
31
30
  };
32
31
  export declare const isActiveDescendantAttribute = "data-is-active-descendant";
33
32
  export declare const activeDescendantActivatedDirectly = "activated-directly";
package/dist/cjs/focus-zone.js CHANGED
@@ -129,7 +129,7 @@ const activeDescendantActivatedDirectly = 'activated-directly';
129
129
  const activeDescendantActivatedIndirectly = 'activated-indirectly';
130
130
  const hasActiveDescendantAttribute = 'data-has-active-descendant';
131
131
  function focusZone(container, settings) {
132
- var _a, _b, _c, _d, _e, _f;
132
+ var _a, _b, _c, _d, _e;
133
133
  const focusableElements = [];
134
134
  const savedTabIndex = new WeakMap();
135
135
  const bindKeys = (_a = settings === null || settings === void 0 ? void 0 : settings.bindKeys) !== null && _a !== void 0 ? _a : ((settings === null || settings === void 0 ? void 0 : settings.getNextFocusable) ? exports.FocusKeys.ArrowAll : exports.FocusKeys.ArrowVertical) | exports.FocusKeys.HomeAndEnd;
@@ -137,9 +137,8 @@ function focusZone(container, settings) {
137
137
  const focusInStrategy = (_c = settings === null || settings === void 0 ? void 0 : settings.focusInStrategy) !== null && _c !== void 0 ? _c : 'previous';
138
138
  const activeDescendantControl = settings === null || settings === void 0 ? void 0 : settings.activeDescendantControl;
139
139
  const activeDescendantCallback = settings === null || settings === void 0 ? void 0 : settings.onActiveDescendantChanged;
140
- const activeOnHover = (_d = settings === null || settings === void 0 ? void 0 : settings.activeOnHover) !== null && _d !== void 0 ? _d : true;
141
140
  let currentFocusedElement;
142
- const preventScroll = (_e = settings === null || settings === void 0 ? void 0 : settings.preventScroll) !== null && _e !== void 0 ? _e : false;
141
+ const preventScroll = (_d = settings === null || settings === void 0 ? void 0 : settings.preventScroll) !== null && _d !== void 0 ? _d : false;
143
142
  function getFirstFocusableElement() {
144
143
  return focusableElements[0];
145
144
  }
@@ -291,7 +290,7 @@ function focusZone(container, settings) {
291
290
  attributeOldValue: true,
292
291
  });
293
292
  const controller = new AbortController();
294
- const signal = (_f = settings === null || settings === void 0 ? void 0 : settings.abortSignal) !== null && _f !== void 0 ? _f : controller.signal;
293
+ const signal = (_e = settings === null || settings === void 0 ? void 0 : settings.abortSignal) !== null && _e !== void 0 ? _e : controller.signal;
295
294
  signal.addEventListener('abort', () => {
296
295
  endFocusManagement(...focusableElements);
297
296
  });
@@ -308,17 +307,15 @@ function focusZone(container, settings) {
308
307
  updateFocusedElement(event.target);
309
308
  }
310
309
  }, { signal });
311
- if (activeOnHover) {
312
- container.addEventListener('mousemove', ({ target }) => {
313
- if (!(target instanceof Node)) {
314
- return;
315
- }
316
- const focusableElement = focusableElements.find(element => element.contains(target));
317
- if (focusableElement) {
318
- updateFocusedElement(focusableElement);
319
- }
320
- }, { signal, capture: true });
321
- }
310
+ container.addEventListener('mousemove', ({ target }) => {
311
+ if (!(target instanceof Node)) {
312
+ return;
313
+ }
314
+ const focusableElement = focusableElements.find(element => element.contains(target));
315
+ if (focusableElement) {
316
+ updateFocusedElement(focusableElement);
317
+ }
318
+ }, { signal, capture: true });
322
319
  activeDescendantControl.addEventListener('focusin', () => {
323
320
  if (!currentFocusedElement) {
324
321
  updateFocusedElement(getFirstFocusableElement());
package/dist/esm/focus-zone.d.ts CHANGED
@@ -27,7 +27,6 @@ export type FocusZoneSettings = IterateFocusableElements & {
27
27
  onActiveDescendantChanged?: (newActiveDescendant: HTMLElement | undefined, previousActiveDescendant: HTMLElement | undefined, directlyActivated: boolean) => void;
28
28
  focusInStrategy?: 'first' | 'closest' | 'previous' | ((previousFocusedElement: Element) => HTMLElement | undefined);
29
29
  preventScroll?: boolean;
30
- activeOnHover?: boolean;
31
30
  };
32
31
  export declare const isActiveDescendantAttribute = "data-is-active-descendant";
33
32
  export declare const activeDescendantActivatedDirectly = "activated-directly";
package/dist/esm/focus-zone.mjs CHANGED
@@ -127,7 +127,7 @@ const activeDescendantActivatedDirectly = 'activated-directly';
127
127
  const activeDescendantActivatedIndirectly = 'activated-indirectly';
128
128
  const hasActiveDescendantAttribute = 'data-has-active-descendant';
129
129
  function focusZone(container, settings) {
130
- var _a, _b, _c, _d, _e, _f;
130
+ var _a, _b, _c, _d, _e;
131
131
  const focusableElements = [];
132
132
  const savedTabIndex = new WeakMap();
133
133
  const bindKeys = (_a = settings === null || settings === void 0 ? void 0 : settings.bindKeys) !== null && _a !== void 0 ? _a : ((settings === null || settings === void 0 ? void 0 : settings.getNextFocusable) ? FocusKeys.ArrowAll : FocusKeys.ArrowVertical) | FocusKeys.HomeAndEnd;
@@ -135,9 +135,8 @@ function focusZone(container, settings) {
135
135
  const focusInStrategy = (_c = settings === null || settings === void 0 ? void 0 : settings.focusInStrategy) !== null && _c !== void 0 ? _c : 'previous';
136
136
  const activeDescendantControl = settings === null || settings === void 0 ? void 0 : settings.activeDescendantControl;
137
137
  const activeDescendantCallback = settings === null || settings === void 0 ? void 0 : settings.onActiveDescendantChanged;
138
- const activeOnHover = (_d = settings === null || settings === void 0 ? void 0 : settings.activeOnHover) !== null && _d !== void 0 ? _d : true;
139
138
  let currentFocusedElement;
140
- const preventScroll = (_e = settings === null || settings === void 0 ? void 0 : settings.preventScroll) !== null && _e !== void 0 ? _e : false;
139
+ const preventScroll = (_d = settings === null || settings === void 0 ? void 0 : settings.preventScroll) !== null && _d !== void 0 ? _d : false;
141
140
  function getFirstFocusableElement() {
142
141
  return focusableElements[0];
143
142
  }
@@ -289,7 +288,7 @@ function focusZone(container, settings) {
289
288
  attributeOldValue: true,
290
289
  });
291
290
  const controller = new AbortController();
292
- const signal = (_f = settings === null || settings === void 0 ? void 0 : settings.abortSignal) !== null && _f !== void 0 ? _f : controller.signal;
291
+ const signal = (_e = settings === null || settings === void 0 ? void 0 : settings.abortSignal) !== null && _e !== void 0 ? _e : controller.signal;
293
292
  signal.addEventListener('abort', () => {
294
293
  endFocusManagement(...focusableElements);
295
294
  });
@@ -306,17 +305,15 @@ function focusZone(container, settings) {
306
305
  updateFocusedElement(event.target);
307
306
  }
308
307
  }, { signal });
309
- if (activeOnHover) {
310
- container.addEventListener('mousemove', ({ target }) => {
311
- if (!(target instanceof Node)) {
312
- return;
313
- }
314
- const focusableElement = focusableElements.find(element => element.contains(target));
315
- if (focusableElement) {
316
- updateFocusedElement(focusableElement);
317
- }
318
- }, { signal, capture: true });
319
- }
308
+ container.addEventListener('mousemove', ({ target }) => {
309
+ if (!(target instanceof Node)) {
310
+ return;
311
+ }
312
+ const focusableElement = focusableElements.find(element => element.contains(target));
313
+ if (focusableElement) {
314
+ updateFocusedElement(focusableElement);
315
+ }
316
+ }, { signal, capture: true });
320
317
  activeDescendantControl.addEventListener('focusin', () => {
321
318
  if (!currentFocusedElement) {
322
319
  updateFocusedElement(getFirstFocusableElement());
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/behaviors",
3
- "version": "0.0.0-20251124211340",
3
+ "version": "0.0.0-20251126165731",
4
4
  "description": "Shared behaviors for JavaScript components",
5
5
  "type": "commonjs",
6
6
  "main": "dist/cjs/index.js",
@@ -43,7 +43,9 @@
43
43
  "prebuild": "npm run clean",
44
44
  "release": "npm run build && changeset publish",
45
45
  "size-limit": "npm run build && size-limit",
46
- "type-check": "tsc --noEmit"
46
+ "type-check": "tsc --noEmit",
47
+ "storybook": "storybook dev -p 6006 --no-open",
48
+ "build-storybook": "storybook build"
47
49
  },
48
50
  "repository": {
49
51
  "type": "git",
@@ -76,16 +78,20 @@
76
78
  "@rollup/plugin-typescript": "^12.1.0",
77
79
  "@rollup/wasm-node": "^4.19.1",
78
80
  "@size-limit/preset-small-lib": "^11.1.4",
81
+ "@storybook/react-vite": "^10.0.8",
79
82
  "@testing-library/react": "^16.0.0",
80
83
  "@testing-library/user-event": "^14.5.1",
81
84
  "@types/jest": "^30.0.0",
82
85
  "@types/node": "^24.0.10",
83
86
  "@types/react": "^19.0.1",
87
+ "@types/react-dom": "^19.2.3",
88
+ "clsx": "^2.1.1",
84
89
  "esbuild": "^0.27.0",
85
90
  "esbuild-jest": "^0.5.0",
86
91
  "eslint": "^8.50.0",
87
92
  "eslint-plugin-github": "^5.0.0",
88
93
  "eslint-plugin-prettier": "^5.0.0",
94
+ "eslint-plugin-storybook": "^10.0.8",
89
95
  "jest": "^30.0.4",
90
96
  "jest-environment-jsdom": "^30.0.4",
91
97
  "prettier": "^3.0.3",
@@ -94,6 +100,7 @@
94
100
  "rimraf": "^6.0.1",
95
101
  "rollup": "^4.18.0",
96
102
  "size-limit": "^11.1.4",
103
+ "storybook": "^10.0.8",
97
104
  "tslib": "^2.8.1",
98
105
  "typescript": "^5.2.2"
99
106
  }