@genesislcap/foundation-ui 14.500.0 → 14.501.0

package/dist/foundation-ui.d.ts

@@ -734,6 +734,17 @@ export declare const baseComponents: {
     }, Multiselect>;
     foundationNumberField: (overrideDefinition?: OverrideFoundationElementDefinition<NumberFieldOptions>) => FoundationElementRegistry<NumberFieldOptions, Constructable<FoundationElement>>;
     foundationOptgroup: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition>) => FoundationElementRegistry<FoundationElementDefinition, Optgroup>;
+    foundationPill: (overrideDefinition?: OverrideFoundationElementDefinition<    {
+    baseName: string;
+    template: ViewTemplate<Pill, any>;
+    styles: ElementStyles;
+    shadowOptions: ShadowRootInit;
+    }>) => FoundationElementRegistry<    {
+    baseName: string;
+    template: ViewTemplate<Pill, any>;
+    styles: ElementStyles;
+    shadowOptions: ShadowRootInit;
+    }, Pill>;
     foundationPopper: (overrideDefinition?: OverrideFoundationElementDefinition<    {
     baseName: string;
     styles: ElementStyles;
@@ -2194,6 +2205,8 @@ export declare const defaultNumberFieldConfig: {
     stepUpGlyph: string;
 };
 
+export declare const defaultPillConfig: {};
+
 /**
  * @beta
  */
@@ -4108,6 +4121,29 @@ export declare const foundationOptgroupStyles: (_context: ElementDefinitionConte
 
 export declare const foundationOptgroupTemplate: (_context: ElementDefinitionContext, _definition: FoundationElementDefinition) => ViewTemplate<Optgroup, any>;
 
+/**
+ * The Foundation Pill
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<foundation-pill\>
+ */
+export declare const foundationPill: (overrideDefinition?: OverrideFoundationElementDefinition<    {
+baseName: string;
+template: ViewTemplate<Pill, any>;
+styles: ElementStyles;
+shadowOptions: ShadowRootInit;
+}>) => FoundationElementRegistry<    {
+baseName: string;
+template: ViewTemplate<Pill, any>;
+styles: ElementStyles;
+shadowOptions: ShadowRootInit;
+}, typeof Pill>;
+
+export declare const foundationPillShadowOptions: ShadowRootInit;
+
+export declare const foundationPillTemplate: ViewTemplate<Pill, any>;
+
 /**
  * The Foundation Popper
  *
@@ -5924,6 +5960,48 @@ export declare function parseDatePickerValue(dateString: string, displayFormat:
  */
 export declare function pathJoin(parts: string[], separator?: string, allowTrailingSeparator?: boolean): string;
 
+/**
+ * @tagname %%prefix%%-pill
+ *
+ * @slot - Additional phrasing (inline, non-interactive) content rendered after the label/value,
+ * inside the pill body button. Do not slot interactive or block-level elements (e.g. `<button>`,
+ * `<a>`, `<div>`) here, as the body is itself a `<button>`.
+ * @fires remove - Fired when the remove control is activated.
+ * @fires pill-click - Fired when the pill body (excluding the remove control) is activated.
+ */
+export declare class Pill extends FoundationElement {
+    /**
+     * @attr label - the name of the thing this pill represents, e.g. a filter field name
+     * @example
+     * ```html
+     *  <rapid-pill label="Cpty Desk"></rapid-pill>
+     * ```
+     */
+    label: string;
+    /**
+     * @attr value - the current value shown alongside the label, e.g. "Cpty Desk: EQUITIES"
+     * @example
+     * ```html
+     *  <rapid-pill label="Cpty Desk" value="EQUITIES"></rapid-pill>
+     * ```
+     */
+    value: string;
+    /**
+     * @attr removable - whether the "x" remove control is shown
+     * @default true
+     */
+    removable: boolean;
+    /**
+     * @attr disabled - disables both the pill body and the remove control
+     * @default false
+     */
+    disabled: boolean;
+    handleBodyClick(): void;
+    handleRemoveClick(event?: Event): void;
+}
+
+export declare const pillStyles: ElementStyles;
+
 export declare const plusIcon: () => string;
 
 /**

package/dist/react.cjs

@@ -64,6 +64,7 @@ const { NumberField: NumberFieldWC } = require('./esm/number-field/number-field.
 const { Optgroup: OptgroupWC } = require('./esm/optgroup/optgroup.js');
 const { MultiselectDatasource: MultiselectDatasourceWC } = require('./esm/options-datasource/multiselect-datasource.js');
 const { OptionsDatasource: OptionsDatasourceWC } = require('./esm/options-datasource/options-datasource.js');
+const { Pill: PillWC } = require('./esm/pill/pill.js');
 const { Popper: PopperWC } = require('./esm/popper/popper.js');
 const { ProgressRing: ProgressRingWC } = require('./esm/progress-ring/progress-ring.js');
 const { Progress: ProgressWC } = require('./esm/progress/progress.js');
@@ -111,11 +112,6 @@ function _mergeRefs(...refs) {
   };
 }
 
-const Accordion = React.forwardRef(function Accordion(props, ref) {
-  const { children, ...rest } = props;
-  return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
-});
-
 const AccordionItem = React.forwardRef(function AccordionItem(props, ref) {
   const { children, ...rest } = props;
   return React.createElement(customElements.getName(AccordionItemWC) ?? '%%prefix%%-accordion-item', { ...rest, ref }, children);
@@ -126,6 +122,11 @@ const ActionsMenu = React.forwardRef(function ActionsMenu(props, ref) {
   return React.createElement(customElements.getName(ActionsMenuWC) ?? '%%prefix%%-actions-menu', { ...rest, ref }, children);
 });
 
+const Accordion = React.forwardRef(function Accordion(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
+});
+
 const AiCriteriaSearch = React.forwardRef(function AiCriteriaSearch(props, ref) {
   const { onCriteriaChanged, onValidationErrors, children, ...rest } = props;
   const _innerRef = React.useRef(null);
@@ -766,6 +767,28 @@ const OptionsDatasource = React.forwardRef(function OptionsDatasource(props, ref
   return React.createElement(customElements.getName(OptionsDatasourceWC) ?? 'options-datasource', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
+const Pill = React.forwardRef(function Pill(props, ref) {
+  const { onRemove, onPillClick, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onRemoveRef = React.useRef(onRemove);
+  _onRemoveRef.current = onRemove;
+  const _onPillClickRef = React.useRef(onPillClick);
+  _onPillClickRef.current = onPillClick;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onRemoveFn = (e) => _onRemoveRef.current?.(e);
+    el.addEventListener('remove', _onRemoveFn);
+    const _onPillClickFn = (e) => _onPillClickRef.current?.(e);
+    el.addEventListener('pill-click', _onPillClickFn);
+    return () => {
+      el.removeEventListener('remove', _onRemoveFn);
+      el.removeEventListener('pill-click', _onPillClickFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(PillWC) ?? '%%prefix%%-pill', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
+});
+
 const Popper = React.forwardRef(function Popper(props, ref) {
   const { children, ...rest } = props;
   return React.createElement(customElements.getName(PopperWC) ?? '%%prefix%%-popper', { ...rest, ref }, children);
@@ -1102,9 +1125,9 @@ const WeeklyRecurrence = React.forwardRef(function WeeklyRecurrence(props, ref)
 });
 
 module.exports = {
-  Accordion,
   AccordionItem,
   ActionsMenu,
+  Accordion,
   AiCriteriaSearch,
   AiIndicator,
   Anchor,
@@ -1160,6 +1183,7 @@ module.exports = {
   Optgroup,
   MultiselectDatasource,
   OptionsDatasource,
+  Pill,
   Popper,
   Progress,
   ProgressRing,

package/dist/react.mjs

@@ -62,6 +62,7 @@ import { NumberField as NumberFieldWC } from './esm/number-field/number-field.js
 import { Optgroup as OptgroupWC } from './esm/optgroup/optgroup.js';
 import { MultiselectDatasource as MultiselectDatasourceWC } from './esm/options-datasource/multiselect-datasource.js';
 import { OptionsDatasource as OptionsDatasourceWC } from './esm/options-datasource/options-datasource.js';
+import { Pill as PillWC } from './esm/pill/pill.js';
 import { Popper as PopperWC } from './esm/popper/popper.js';
 import { ProgressRing as ProgressRingWC } from './esm/progress-ring/progress-ring.js';
 import { Progress as ProgressWC } from './esm/progress/progress.js';
@@ -109,11 +110,6 @@ function _mergeRefs(...refs) {
   };
 }
 
-export const Accordion = React.forwardRef(function Accordion(props, ref) {
-  const { children, ...rest } = props;
-  return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
-});
-
 export const AccordionItem = React.forwardRef(function AccordionItem(props, ref) {
   const { children, ...rest } = props;
   return React.createElement(customElements.getName(AccordionItemWC) ?? '%%prefix%%-accordion-item', { ...rest, ref }, children);
@@ -124,6 +120,11 @@ export const ActionsMenu = React.forwardRef(function ActionsMenu(props, ref) {
   return React.createElement(customElements.getName(ActionsMenuWC) ?? '%%prefix%%-actions-menu', { ...rest, ref }, children);
 });
 
+export const Accordion = React.forwardRef(function Accordion(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
+});
+
 export const AiCriteriaSearch = React.forwardRef(function AiCriteriaSearch(props, ref) {
   const { onCriteriaChanged, onValidationErrors, children, ...rest } = props;
   const _innerRef = React.useRef(null);
@@ -764,6 +765,28 @@ export const OptionsDatasource = React.forwardRef(function OptionsDatasource(pro
   return React.createElement(customElements.getName(OptionsDatasourceWC) ?? 'options-datasource', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
+export const Pill = React.forwardRef(function Pill(props, ref) {
+  const { onRemove, onPillClick, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onRemoveRef = React.useRef(onRemove);
+  _onRemoveRef.current = onRemove;
+  const _onPillClickRef = React.useRef(onPillClick);
+  _onPillClickRef.current = onPillClick;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onRemoveFn = (e) => _onRemoveRef.current?.(e);
+    el.addEventListener('remove', _onRemoveFn);
+    const _onPillClickFn = (e) => _onPillClickRef.current?.(e);
+    el.addEventListener('pill-click', _onPillClickFn);
+    return () => {
+      el.removeEventListener('remove', _onRemoveFn);
+      el.removeEventListener('pill-click', _onPillClickFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(PillWC) ?? '%%prefix%%-pill', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
+});
+
 export const Popper = React.forwardRef(function Popper(props, ref) {
   const { children, ...rest } = props;
   return React.createElement(customElements.getName(PopperWC) ?? '%%prefix%%-popper', { ...rest, ref }, children);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-ui",
   "description": "Genesis Foundation UI",
-  "version": "14.500.0",
+  "version": "14.501.0",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -85,13 +85,13 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.500.0",
-    "@genesislcap/genx": "14.500.0",
-    "@genesislcap/rollup-builder": "14.500.0",
-    "@genesislcap/ts-builder": "14.500.0",
-    "@genesislcap/uvu-playwright-builder": "14.500.0",
-    "@genesislcap/vite-builder": "14.500.0",
-    "@genesislcap/webpack-builder": "14.500.0",
+    "@genesislcap/foundation-testing": "14.501.0",
+    "@genesislcap/genx": "14.501.0",
+    "@genesislcap/rollup-builder": "14.501.0",
+    "@genesislcap/ts-builder": "14.501.0",
+    "@genesislcap/uvu-playwright-builder": "14.501.0",
+    "@genesislcap/vite-builder": "14.501.0",
+    "@genesislcap/webpack-builder": "14.501.0",
     "copyfiles": "^2.4.1"
   },
   "dependencies": {
@@ -100,16 +100,16 @@
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@genesiscommunitysuccess/analyzer-import-alias-plugin": "^5.0.3",
-    "@genesislcap/expression-builder": "14.500.0",
-    "@genesislcap/foundation-ai": "14.500.0",
-    "@genesislcap/foundation-comms": "14.500.0",
-    "@genesislcap/foundation-criteria": "14.500.0",
-    "@genesislcap/foundation-errors": "14.500.0",
-    "@genesislcap/foundation-events": "14.500.0",
-    "@genesislcap/foundation-logger": "14.500.0",
-    "@genesislcap/foundation-notifications": "14.500.0",
-    "@genesislcap/foundation-user": "14.500.0",
-    "@genesislcap/foundation-utils": "14.500.0",
+    "@genesislcap/expression-builder": "14.501.0",
+    "@genesislcap/foundation-ai": "14.501.0",
+    "@genesislcap/foundation-comms": "14.501.0",
+    "@genesislcap/foundation-criteria": "14.501.0",
+    "@genesislcap/foundation-errors": "14.501.0",
+    "@genesislcap/foundation-events": "14.501.0",
+    "@genesislcap/foundation-logger": "14.501.0",
+    "@genesislcap/foundation-notifications": "14.501.0",
+    "@genesislcap/foundation-user": "14.501.0",
+    "@genesislcap/foundation-utils": "14.501.0",
     "@microsoft/fast-colors": "5.3.1",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.14.0",
@@ -142,5 +142,5 @@
       "require": "./dist/react.cjs"
     }
   },
-  "gitHead": "71f449cda804427acfa5d246da83d1044f2cb2c4"
+  "gitHead": "4fccf90855cbd10b0289566a75a95120a2be4384"
 }