@helixui/react 3.8.0 → 3.9.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.
- package/README.md +7 -5
- package/dist/components/HxFileUpload/types.d.ts +3 -0
- package/dist/components/HxFileUpload/types.d.ts.map +1 -1
- package/dist/components/HxIcon/HxIcon.d.ts +22 -9
- package/dist/components/HxIcon/HxIcon.d.ts.map +1 -1
- package/dist/components/HxIcon/types.d.ts +13 -1
- package/dist/components/HxIcon/types.d.ts.map +1 -1
- package/dist/shared/HxIcon-oYdBXU9x.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @helixui/react
|
|
2
2
|
|
|
3
|
-
React wrappers for
|
|
3
|
+
React wrappers for the HELiX web component library. Auto-generated from `custom-elements.json` using [`@lit/react`](https://lit.dev/docs/frameworks/react/) `createComponent()`. The exact wrapper inventory is the union of CEM declarations and the generator's allow-list; see [Available Components](#available-components) below for the current list.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
@@ -59,7 +59,7 @@ export default function Page() {
|
|
|
59
59
|
|
|
60
60
|
## Tree-Shaking
|
|
61
61
|
|
|
62
|
-
Each component is a separate entry point. Importing `HxButton` does not bundle
|
|
62
|
+
Each component is a separate entry point. Importing `HxButton` does not bundle every component:
|
|
63
63
|
|
|
64
64
|
```tsx
|
|
65
65
|
// Only HxButton is included in your bundle
|
|
@@ -71,7 +71,7 @@ import { HxButton } from '@helixui/react/components/HxButton';
|
|
|
71
71
|
|
|
72
72
|
## TypeScript
|
|
73
73
|
|
|
74
|
-
All prop types are derived from CEM (`custom-elements.json`) declarations. Props
|
|
74
|
+
All prop types are derived from CEM (`custom-elements.json`) declarations. Props and refs are fully typed; **event callback names** (`onHxClick`, `onHxInput`, etc.) are typed, but their payloads are currently surfaced as `Event` — CEM-specific `CustomEvent<DetailType>` payload typing is queued for the next generator pass:
|
|
75
75
|
|
|
76
76
|
```tsx
|
|
77
77
|
import { HxButton, type HxButtonProps } from '@helixui/react';
|
|
@@ -96,6 +96,8 @@ This runs `scripts/generate-react-wrappers.ts` which reads the CEM and writes al
|
|
|
96
96
|
|
|
97
97
|
## Available Components
|
|
98
98
|
|
|
99
|
-
|
|
99
|
+
The current generated wrapper set (96 wrappers, regenerated from `packages/hx-react/src/index.ts`):
|
|
100
100
|
|
|
101
|
-
`HxAccordion`, `HxAccordionItem`, `HxActionBar`, `HxAlert`, `HxAvatar`, `HxBadge`, `HxBanner`, `HxBreadcrumb`, `
|
|
101
|
+
`HxAccordion`, `HxAccordionItem`, `HxActionBar`, `HxAlert`, `HxAvatar`, `HxBadge`, `HxBanner`, `HxBreadcrumb`, `HxButton`, `HxButtonGroup`, `HxCard`, `HxCarousel`, `HxCarouselItem`, `HxCheckbox`, `HxCheckboxGroup`, `HxCodeSnippet`, `HxColorPicker`, `HxCombobox`, `HxContainer`, `HxCopyButton`, `HxCounter`, `HxDataTable`, `HxDatePicker`, `HxDialog`, `HxDivider`, `HxDrawer`, `HxDropdown`, `HxField`, `HxFieldLabel`, `HxFileUpload`, `HxForm`, `HxFormatDate`, `HxGrid`, `HxGridItem`, `HxHelpText`, `HxIcon`, `HxIconButton`, `HxImage`, `HxLink`, `HxList`, `HxListItem`, `HxMenu`, `HxMenuDivider`, `HxMenuItem`, `HxMeter`, `HxNav`, `HxNavItem`, `HxNumberInput`, `HxOverflowMenu`, `HxPagination`, `HxPatientBanner`, `HxPhiField`, `HxPopover`, `HxPopup`, `HxProgressBar`, `HxProgressRing`, `HxProse`, `HxRadio`, `HxRadioGroup`, `HxRating`, `HxSelect`, `HxSideNav`, `HxSkeleton`, `HxSlider`, `HxSpinner`, `HxSplitButton`, `HxSplitPanel`, `HxStack`, `HxStat`, `HxStep`, `HxSteps`, `HxStyleScope`, `HxSwitch`, `HxTab`, `HxTable`, `HxTabPanel`, `HxTabs`, `HxTag`, `HxTbody`, `HxTd`, `HxText`, `HxTextarea`, `HxTextInput`, `HxTfoot`, `HxTh`, `HxThead`, `HxTheme`, `HxTimePicker`, `HxToast`, `HxToastStack`, `HxToggleButton`, `HxTooltip`, `HxTopNav`, `HxTr`, `HxTreeItem`, `HxTreeView`
|
|
102
|
+
|
|
103
|
+
This list is generated from CEM + the allow-list; consult `packages/hx-react/src/index.ts` for the authoritative re-export block.
|
|
@@ -21,6 +21,9 @@ export interface HxFileUploadProps {
|
|
|
21
21
|
label?: string;
|
|
22
22
|
/** Whether the component is disabled. */
|
|
23
23
|
disabled?: boolean;
|
|
24
|
+
/** Whether the field must have at least one file selected for form submission.
|
|
25
|
+
Drives `validity.valueMissing` when the file list is empty. */
|
|
26
|
+
required?: boolean;
|
|
24
27
|
/** Error message displayed below the dropzone. Also puts the dropzone in an error visual state. */
|
|
25
28
|
error?: string;
|
|
26
29
|
/** Instructional text shown in the dropzone when no custom slot content is provided.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/HxFileUpload/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,iBAAiB;IAChC,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;+DAC2D;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mGAAmG;IACnG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;wDACoD;IACpD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oDAAoD;IACpD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;2DAIuD;IACvD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gEAAgE;IAChE,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,6EAA6E;IAC7E,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gEAAgE;IAChE,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IAGf,uEAAuE;IACvE,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACnC,qFAAqF;IACrF,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACpC,uDAAuD;IACvD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACrC"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/HxFileUpload/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,iBAAiB;IAChC,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;+DAC2D;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;gEAC4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mGAAmG;IACnG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;wDACoD;IACpD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oDAAoD;IACpD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;2DAIuD;IACvD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gEAAgE;IAChE,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,6EAA6E;IAC7E,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gEAAgE;IAChE,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IAGf,uEAAuE;IACvE,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACnC,qFAAqF;IACrF,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACpC,uDAAuD;IACvD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACrC"}
|
|
@@ -2,16 +2,29 @@ import { HelixIcon } from '@helixui/library/components/hx-icon';
|
|
|
2
2
|
import { HxIconProps } from './types.js';
|
|
3
3
|
export type { HxIconProps };
|
|
4
4
|
/**
|
|
5
|
-
* An icon component that
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
* An icon component that resolves through the `@helixui/icons` registry,
|
|
6
|
+
with sprite-sheet and inline-fetch escape hatches for legacy / consumer
|
|
7
|
+
patterns. Decorative icons are automatically hidden from assistive
|
|
8
|
+
technology. When a label is provided the icon is announced as an image
|
|
9
|
+
with that label.
|
|
8
10
|
|
|
9
|
-
**Render modes:**
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
**Render modes (in resolution order):**
|
|
12
|
+
1. **Inline fetch (`src`)** — Set `src` to a URL of a standalone SVG file.
|
|
13
|
+
The component fetches, sanitizes, and embeds the SVG markup. Requires
|
|
14
|
+
JavaScript; not server-side renderable. Library attribute is ignored.
|
|
15
|
+
2. **Explicit sprite (`sprite-url` + `name`)** — Pin the sprite URL on the
|
|
16
|
+
element instead of resolving through the registry. Library attribute is
|
|
17
|
+
ignored.
|
|
18
|
+
3. **Registry (`library` + `name`)** (recommended) — Resolves through the
|
|
19
|
+
`@helixui/icons` registry. Set `library="fa-free"` for the FA Free Solid
|
|
20
|
+
set bundled with `@helixui/icons`, or `library="helix"` for the curated
|
|
21
|
+
32-glyph helix set. Consumer libraries register via `registerIconLibrary()`
|
|
22
|
+
and become resolvable here without modifying the component.
|
|
23
|
+
4. **Bare name (`name` only, no `library`)** — `library` defaults to the
|
|
24
|
+
empty string. The component emits `<use href="#name">` against a
|
|
25
|
+
document-local sprite — pre-3.9.0 back-compat behavior. Consumers
|
|
26
|
+
opt INTO registry resolution by setting `library` explicitly.
|
|
27
|
+
5. **No name / no src** — Renders nothing.
|
|
15
28
|
*
|
|
16
29
|
* @example
|
|
17
30
|
* ```tsx
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HxIcon.d.ts","sourceRoot":"","sources":["../../../src/components/HxIcon/HxIcon.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAEhE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C,YAAY,EAAE,WAAW,EAAE,CAAC;AAE5B
|
|
1
|
+
{"version":3,"file":"HxIcon.d.ts","sourceRoot":"","sources":["../../../src/components/HxIcon/HxIcon.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAEhE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C,YAAY,EAAE,WAAW,EAAE,CAAC;AAE5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,MAAM,uDAMjB,CAAC;AAEH,eAAe,MAAM,CAAC"}
|
|
@@ -12,6 +12,17 @@ export interface HxIconProps {
|
|
|
12
12
|
starts with `#` it is used as-is (inline sprite reference without a base
|
|
13
13
|
URL). */
|
|
14
14
|
name?: string;
|
|
15
|
+
/** Identifier of the icon library to resolve `name` through. Default is
|
|
16
|
+
the empty string — meaning bare `<hx-icon name="foo">` continues to
|
|
17
|
+
render a document-local sprite fragment (`<use href="#foo">`) per the
|
|
18
|
+
pre-3.9.0 contract. Set explicitly to `'fa-free'` for the FA Free Solid
|
|
19
|
+
set bundled with `@helixui/icons`, `'helix'` for the curated 32-glyph
|
|
20
|
+
helix set, or to any consumer-registered library identifier.
|
|
21
|
+
|
|
22
|
+
Library resolution applies only when `src` is empty AND `sprite-url` is
|
|
23
|
+
not set; the inline-fetch and explicit-sprite paths are kept as escape
|
|
24
|
+
hatches and ignore the library attribute. */
|
|
25
|
+
library?: string;
|
|
15
26
|
/** URL of a standalone SVG file to fetch and render inline. Takes precedence
|
|
16
27
|
over sprite mode when both `src` and `spriteUrl`/`name` are set.
|
|
17
28
|
|
|
@@ -26,7 +37,8 @@ export interface HxIconProps {
|
|
|
26
37
|
Set via the `hx-size` HTML attribute (e.g. `hx-size="lg"`) or via the
|
|
27
38
|
`size` JavaScript property (e.g. `el.size = 'lg'`). Both are equivalent —
|
|
28
39
|
the `attribute: 'hx-size'` mapping is used to avoid colliding with the
|
|
29
|
-
native
|
|
40
|
+
native HTMLInputElement `size` attribute in Drupal attribute-passthrough
|
|
41
|
+
scenarios.
|
|
30
42
|
The CEM exposes both the JS property name (`size`) and the HTML attribute
|
|
31
43
|
name (`hx-size`). */
|
|
32
44
|
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/HxIcon/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,WAAW;IAC1B,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;;UAIM;IACN,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;+EAI2E;IAC3E,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB;8CAC0C;IAC1C,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/HxIcon/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,WAAW;IAC1B,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;;UAIM;IACN,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;;;;8CAS0C;IAC1C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;+EAI2E;IAC3E,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB;8CAC0C;IAC1C,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B;;;;;;;;sBAQkB;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC;;;aAGS;IACT,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;uGAEmG;IACnG,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HxIcon-oYdBXU9x.js","sources":["../../src/components/HxIcon/HxIcon.ts"],"sourcesContent":["'use client';\n/**\n * React wrapper for <hx-icon> web component.\n * Auto-generated by scripts/generate-react-wrappers.ts — DO NOT EDIT MANUALLY.\n * Re-run: pnpm --filter=@helixui/react run generate\n */\n\nimport React from 'react';\nimport { createComponent } from '@lit/react';\nimport { HelixIcon } from '@helixui/library/components/hx-icon';\n\nimport type { HxIconProps } from './types.js';\n\nexport type { HxIconProps };\n\n/**\n * An icon component that
|
|
1
|
+
{"version":3,"file":"HxIcon-oYdBXU9x.js","sources":["../../src/components/HxIcon/HxIcon.ts"],"sourcesContent":["'use client';\n/**\n * React wrapper for <hx-icon> web component.\n * Auto-generated by scripts/generate-react-wrappers.ts — DO NOT EDIT MANUALLY.\n * Re-run: pnpm --filter=@helixui/react run generate\n */\n\nimport React from 'react';\nimport { createComponent } from '@lit/react';\nimport { HelixIcon } from '@helixui/library/components/hx-icon';\n\nimport type { HxIconProps } from './types.js';\n\nexport type { HxIconProps };\n\n/**\n * An icon component that resolves through the `@helixui/icons` registry,\nwith sprite-sheet and inline-fetch escape hatches for legacy / consumer\npatterns. Decorative icons are automatically hidden from assistive\ntechnology. When a label is provided the icon is announced as an image\nwith that label.\n\n**Render modes (in resolution order):**\n1. **Inline fetch (`src`)** — Set `src` to a URL of a standalone SVG file.\n The component fetches, sanitizes, and embeds the SVG markup. Requires\n JavaScript; not server-side renderable. Library attribute is ignored.\n2. **Explicit sprite (`sprite-url` + `name`)** — Pin the sprite URL on the\n element instead of resolving through the registry. Library attribute is\n ignored.\n3. **Registry (`library` + `name`)** (recommended) — Resolves through the\n `@helixui/icons` registry. Set `library=\"fa-free\"` for the FA Free Solid\n set bundled with `@helixui/icons`, or `library=\"helix\"` for the curated\n 32-glyph helix set. Consumer libraries register via `registerIconLibrary()`\n and become resolvable here without modifying the component.\n4. **Bare name (`name` only, no `library`)** — `library` defaults to the\n empty string. The component emits `<use href=\"#name\">` against a\n document-local sprite — pre-3.9.0 back-compat behavior. Consumers\n opt INTO registry resolution by setting `library` explicitly.\n5. **No name / no src** — Renders nothing.\n *\n * @example\n * ```tsx\n * import { HxIcon } from '@helixui/react';\n *\n * <HxIcon />\n * ```\n */\nexport const HxIcon = createComponent({\n tagName: 'hx-icon',\n elementClass: HelixIcon,\n react: React,\n events: {},\n displayName: 'HxIcon',\n});\n\nexport default HxIcon;\n"],"names":[],"mappings":";;;AA+CO,MAAM,SAAS,gBAAgB;AAAA,EACpC,SAAS;AAAA,EACT,cAAc;AAAA,EACd,OAAO;AAAA,EACP,QAAQ,CAAA;AAAA,EACR,aAAa;AACf,CAAC;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@helixui/react",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.9.1",
|
|
4
4
|
"description": "React wrappers for HELiX web components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"@lit/react": "^1.0.6",
|
|
26
26
|
"react": "^18.3.1",
|
|
27
|
-
"@helixui/library": "3.
|
|
27
|
+
"@helixui/library": "3.9.1"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@types/react": "^18.3.18",
|