@versini/ui-panel 6.0.1 → 6.1.0

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 +23 -19
  4. package/package.json +4 -4
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.1
2
+ @versini/ui-panel v6.1.0
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.1",
9
- buildTime: "12/09/2025 11:52 AM EST",
10
- homepage: "https://github.com/aversini/ui-components",
8
+ version: "6.1.0",
9
+ buildTime: "12/10/2025 08:21 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 11:52 AM EST",
52
- homepage: "https://github.com/aversini/ui-components",
50
+ version: "3.2.0",
51
+ buildTime: "12/10/2025 08:21 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: {
@@ -360,13 +364,6 @@ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "ligh
360
364
  children: /*#__PURE__*/ jsxs(Modal_ModalDescription, {
361
365
  className: panelClassName.innerWrapper,
362
366
  children: [
363
- /*#__PURE__*/ jsx("div", {
364
- className: panelClassName.scrollableContent,
365
- children: /*#__PURE__*/ jsx("div", {
366
- className: panelClassName.content,
367
- children: children
368
- })
369
- }),
370
367
  /*#__PURE__*/ jsxs("div", {
371
368
  className: panelClassName.header,
372
369
  children: [
@@ -399,6 +396,13 @@ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "ligh
399
396
  })
400
397
  ]
401
398
  }),
399
+ /*#__PURE__*/ jsx("div", {
400
+ className: panelClassName.scrollableContent,
401
+ children: /*#__PURE__*/ jsx("div", {
402
+ className: panelClassName.content,
403
+ children: children
404
+ })
405
+ }),
402
406
  footer && /*#__PURE__*/ jsx("div", {
403
407
  className: panelClassName.footer,
404
408
  children: footer
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@versini/ui-panel",
3
- "version": "6.0.1",
3
+ "version": "6.1.0",
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,7 +39,7 @@
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",
@@ -49,5 +49,5 @@
49
49
  "sideEffects": [
50
50
  "**/*.css"
51
51
  ],
52
- "gitHead": "641051f666505bfd5df1febd10723924db798b9e"
52
+ "gitHead": "85fd31156888edce83b4b0ecf195ad613b7db699"
53
53
  }