@versini/ui-panel 6.0.2 → 6.1.1

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 (4) hide show
  1. package/README.md +14 -13
  2. package/dist/index.d.ts +8 -1
  3. package/dist/index.js +16 -12
  4. package/package.json +5 -5
package/README.md CHANGED
@@ -114,18 +114,19 @@ function MessageBoxExample() {
114
114
 
115
115
  ### Panel Props
116
116
 
117
- | Prop | Type | Default | Description |
118
- | --------------- | ------------------------- | ------------- | ---------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- |
119
- | `open` | `boolean` | - | Whether the panel is open. |
120
- | `onOpenChange` | `(open: boolean) => void` | - | Callback fired when open state changes. |
121
- | `title` | `string` | - | Title displayed in the header (also used to augment `document.title`). |
122
- | `children` | `React.ReactNode` | - | Main content of the panel. |
123
- | `footer` | `React.ReactNode` | - | Optional footer content (actions, etc.). |
124
- | `className` | `string` | - | Extra classes applied to width wrapper (overrides default width). |
125
- | `borderMode` | `"dark" | "light"` | `"light"` | Visual style of border / surface. |
126
- | `kind` | `"panel" | "messagebox"` | `"panel"` | Layout variant. |
127
- | `animation` | `boolean` | `false` | Enable entrance animation. |
128
- | `animationType` | `"slide" | "fade"` | `"slide"` | Animation style (only when `animation` is true). |
129
- | `maxWidth` | `"small" | "medium" | "large"` | `"medium"` | Max width applied (≥ md breakpoint) for `kind="panel"`. |
117
+ | Prop | Type | Default | Description |
118
+ | --------------- | ------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
119
+ | `open` | `boolean` | - | Whether the panel is open. |
120
+ | `onOpenChange` | `(open: boolean) => void` | - | Callback fired when open state changes. |
121
+ | `title` | `string` | - | Title displayed in the header (also used to augment `document.title`). |
122
+ | `children` | `React.ReactNode` | - | Main content of the panel. |
123
+ | `footer` | `React.ReactNode` | - | Optional footer content (actions, etc.). |
124
+ | `className` | `string` | - | Extra classes applied to width wrapper (overrides default width). |
125
+ | `borderMode` | `"dark" \| "light"` | `"light"` | Visual style of border / surface. |
126
+ | `kind` | `"panel" \| "messagebox"` | `"panel"` | Layout variant. |
127
+ | `animation` | `boolean` | `false` | Enable entrance animation. |
128
+ | `animationType` | `"slide" \| "fade"` | `"slide"` | Animation style (only when `animation` is true). |
129
+ | `maxWidth` | `"small" \| "medium" \| "large"` | `"medium"` | Max width applied (≥ md breakpoint) for `kind="panel"`. |
130
+ | `initialFocus` | `number \| React.RefObject<HTMLElement \| null>` | `0` | Which element to initially focus when the Panel opens. Can be a tabbable index (0 = close button), a ref to an element, or -1 to disable. |
130
131
 
131
132
  > Also inherits any valid props for the underlying modal primitives where relevant.
package/dist/index.d.ts CHANGED
@@ -12,7 +12,7 @@ export declare const MESSAGEBOX_CLASSNAME = "av-messagebox";
12
12
 
13
13
  export declare const NONE = "none";
14
14
 
15
- export declare const Panel: ({ open, onOpenChange, title, children, footer, borderMode, kind, className, animation, animationType, maxWidth, maxHeight, blurEffect, }: PanelProps) => JSX.Element;
15
+ export declare const Panel: ({ open, onOpenChange, title, children, footer, borderMode, kind, className, animation, animationType, maxWidth, maxHeight, blurEffect, initialFocus, }: PanelProps) => JSX.Element;
16
16
 
17
17
  export declare const PANEL_CLASSNAME = "av-panel";
18
18
 
@@ -77,6 +77,13 @@ declare type PanelProps = {
77
77
  * @default "none"
78
78
  */
79
79
  blurEffect?: "none" | "small" | "medium" | "large";
80
+ /**
81
+ * Which element to initially focus when the Panel opens.
82
+ * Can be a number (tabbable index, 0 = first tabbable element which is
83
+ * the close button), a ref to an element, or -1 to disable initial focus.
84
+ * @default 0
85
+ */
86
+ initialFocus?: number | React.RefObject<HTMLElement | null>;
80
87
  };
81
88
 
82
89
  export declare const SMALL = "small";
package/dist/index.js CHANGED
@@ -1,13 +1,13 @@
1
1
  /*!
2
- @versini/ui-panel v6.0.2
2
+ @versini/ui-panel v6.1.1
3
3
  © 2025 gizmette.com
4
4
  */
5
5
  try {
6
6
  if (!window.__VERSINI_UI_PANEL__) {
7
7
  window.__VERSINI_UI_PANEL__ = {
8
- version: "6.0.2",
9
- buildTime: "12/09/2025 12:09 PM EST",
10
- homepage: "https://github.com/aversini/ui-components",
8
+ version: "6.1.1",
9
+ buildTime: "12/12/2025 10:28 AM EST",
10
+ homepage: "https://www.npmjs.com/package/@versini/ui-panel",
11
11
  license: "MIT",
12
12
  };
13
13
  }
@@ -42,14 +42,14 @@ const NONE = "none";
42
42
 
43
43
  ;// CONCATENATED MODULE: ../ui-modal/dist/index.js
44
44
  /*!
45
- @versini/ui-modal v3.1.1
45
+ @versini/ui-modal v3.2.0
46
46
  © 2025 gizmette.com
47
47
  */ try {
48
48
  if (!window.__VERSINI_UI_MODAL__) {
49
49
  window.__VERSINI_UI_MODAL__ = {
50
- version: "3.1.1",
51
- buildTime: "12/09/2025 12:08 PM EST",
52
- homepage: "https://github.com/aversini/ui-components",
50
+ version: "3.2.0",
51
+ buildTime: "12/12/2025 10:28 AM EST",
52
+ homepage: "https://www.npmjs.com/package/@versini/ui-modal",
53
53
  license: "MIT"
54
54
  };
55
55
  }
@@ -61,7 +61,7 @@ const NONE = "none";
61
61
 
62
62
 
63
63
  const ModalContext = /*#__PURE__*/ createContext(null);
64
- function useModal({ initialOpen = false, open: controlledOpen, onOpenChange: setControlledOpen } = {}) {
64
+ function useModal({ initialOpen = false, open: controlledOpen, onOpenChange: setControlledOpen, initialFocus } = {}) {
65
65
  const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);
66
66
  const [labelId, setLabelId] = useState();
67
67
  const [descriptionId, setDescriptionId] = useState();
@@ -93,14 +93,16 @@ function useModal({ initialOpen = false, open: controlledOpen, onOpenChange: set
93
93
  labelId,
94
94
  descriptionId,
95
95
  setLabelId,
96
- setDescriptionId
96
+ setDescriptionId,
97
+ initialFocus
97
98
  }), [
98
99
  open,
99
100
  setOpen,
100
101
  interactions,
101
102
  data,
102
103
  labelId,
103
- descriptionId
104
+ descriptionId,
105
+ initialFocus
104
106
  ]);
105
107
  }
106
108
  const useModalContext = ()=>{
@@ -137,6 +139,7 @@ const Modal_ModalContent = /*#__PURE__*/ forwardRef(function ModalContent(props,
137
139
  lockScroll: true,
138
140
  children: /*#__PURE__*/ jsx(FloatingFocusManager, {
139
141
  context: floatingContext,
142
+ initialFocus: context.initialFocus,
140
143
  children: /*#__PURE__*/ jsx("div", {
141
144
  ref: ref,
142
145
  "aria-labelledby": context.labelId,
@@ -285,7 +288,7 @@ const getPanelClassName = ({ className, kind, borderMode, animation, maxWidth =
285
288
 
286
289
 
287
290
 
288
- const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "light", kind = /* inlined export .TYPE_PANEL */ ("panel"), className, animation = false, animationType = /* inlined export .ANIMATION_SLIDE */ ("slide"), maxWidth = /* inlined export .MEDIUM */ ("medium"), maxHeight, blurEffect = /* inlined export .NONE */ ("none") })=>{
291
+ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "light", kind = /* inlined export .TYPE_PANEL */ ("panel"), className, animation = false, animationType = /* inlined export .ANIMATION_SLIDE */ ("slide"), maxWidth = /* inlined export .MEDIUM */ ("medium"), maxHeight, blurEffect = /* inlined export .NONE */ ("none"), initialFocus })=>{
289
292
  const originalTitleRef = useRef("");
290
293
  /* v8 ignore next 9 */ const [animationStyles, setAnimationStyles] = useState(!animation ? {} : animationType === /* inlined export .ANIMATION_FADE */ ("fade") ? {
291
294
  opacity: 0
@@ -352,6 +355,7 @@ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "ligh
352
355
  children: open && /*#__PURE__*/ jsx(Modal, {
353
356
  open: open,
354
357
  onOpenChange: onOpenChange,
358
+ initialFocus: initialFocus,
355
359
  children: /*#__PURE__*/ jsx(Modal_ModalContent, {
356
360
  className: panelClassName.outerWrapper,
357
361
  style: {
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@versini/ui-panel",
3
- "version": "6.0.2",
3
+ "version": "6.1.1",
4
4
  "license": "MIT",
5
5
  "author": "Arno Versini",
6
6
  "publishConfig": {
7
7
  "access": "public"
8
8
  },
9
- "homepage": "https://github.com/aversini/ui-components",
9
+ "homepage": "https://www.npmjs.com/package/@versini/ui-panel",
10
10
  "repository": {
11
11
  "type": "git",
12
12
  "url": "git@github.com:aversini/ui-components.git"
@@ -39,15 +39,15 @@
39
39
  },
40
40
  "devDependencies": {
41
41
  "@testing-library/jest-dom": "6.9.1",
42
- "@versini/ui-modal": "3.1.1"
42
+ "@versini/ui-modal": "3.2.0"
43
43
  },
44
44
  "dependencies": {
45
45
  "@tailwindcss/typography": "0.5.19",
46
46
  "clsx": "2.1.1",
47
- "tailwindcss": "4.1.17"
47
+ "tailwindcss": "4.1.18"
48
48
  },
49
49
  "sideEffects": [
50
50
  "**/*.css"
51
51
  ],
52
- "gitHead": "a2252176b00b65fec582bdc816103eea51f924b5"
52
+ "gitHead": "012dc1e7cb83b4a3d15b73dd78f9663b8616d8f9"
53
53
  }