@abgov/react-components 4.0.0-alpha.1 → 4.0.0-alpha.2

package/index.d.ts

@@ -8,6 +8,7 @@ import { GoAButton } from './lib/button/button';
 import { GoAButtonGroup } from './lib/button-group/button-group';
 import { GoACallout } from './lib/callout/callout';
 import { GoACheckbox } from './lib/checkbox/checkbox';
+import { GoAChip } from './lib/chip/chip';
 import { GoACircularProgress } from './lib/circular-progress/circular-progress';
 import { GoAContainer } from './lib/container/container';
 import { GoADropdown, GoADropdownOption } from './lib/dropdown/dropdown';
@@ -29,4 +30,4 @@ import type { GoAIconType } from './lib/icons';
 import type { GoABadgeType } from './lib/badge/badge';
 export type { GoAIconType };
 export type { GoABadgeType };
-export { GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoACircularProgress, GoAContainer, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpinner, GoASuccessBadge, GoATextArea, GoAWarningBadge, };
+export { GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpinner, GoASuccessBadge, GoATextArea, GoAWarningBadge, };

package/lib/chip/chip.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+interface WCProps {
+    ref: React.RefObject<HTMLElement>;
+    leadingicon: string;
+    error: boolean;
+    deletable: boolean;
+    content: string;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-chip': WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface Props {
+    onDeleteIconClick?: () => void;
+    leadingIcon?: string;
+    error?: boolean;
+    content: string;
+}
+export declare const GoAChip: ({ leadingIcon, error, content, onDeleteIconClick }: Props) => JSX.Element;
+export default GoAChip;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/react-components",
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-alpha.2",
   "description": "Government of Alberta - UI components for React",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"

package/react-components.esm.js

@@ -213,6 +213,36 @@ const GoACheckbox = ({
   }), void 0);
 };
 
+const GoAChip = ({
+  leadingIcon: _leadingIcon = "",
+  error: _error = false,
+  content,
+  onDeleteIconClick
+}) => {
+  const el = useRef(null);
+  useEffect(() => {
+    if (!el.current) return;
+    if (!onDeleteIconClick) return;
+    const current = el.current;
+
+    const listener = e => {
+      onDeleteIconClick();
+    };
+
+    current.addEventListener('_onDeleteIconClick', listener);
+    return () => {
+      current.removeEventListener('_onDeleteIconClick', listener);
+    };
+  }, [el, onDeleteIconClick]);
+  return jsx("goa-chip", {
+    ref: el,
+    leadingicon: _leadingIcon,
+    error: _error,
+    deletable: !!onDeleteIconClick,
+    content: content
+  }, void 0);
+};
+
 const GoACircularProgress = ({
   type,
   visible,
@@ -797,4 +827,4 @@ const GoATextArea = ({
   }, void 0);
 };
 
-export { GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoACircularProgress, GoAContainer, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpinner, GoASuccessBadge, GoATextArea, GoAWarningBadge };
+export { GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpinner, GoASuccessBadge, GoATextArea, GoAWarningBadge };

package/react-components.umd.js

@@ -252,6 +252,37 @@
       }), void 0);
     };
 
+    var GoAChip = function GoAChip(_a) {
+      var _b = _a.leadingIcon,
+          leadingIcon = _b === void 0 ? "" : _b,
+          _c = _a.error,
+          error = _c === void 0 ? false : _c,
+          content = _a.content,
+          onDeleteIconClick = _a.onDeleteIconClick;
+      var el = React.useRef(null);
+      React.useEffect(function () {
+        if (!el.current) return;
+        if (!onDeleteIconClick) return;
+        var current = el.current;
+
+        var listener = function listener(e) {
+          onDeleteIconClick();
+        };
+
+        current.addEventListener('_onDeleteIconClick', listener);
+        return function () {
+          current.removeEventListener('_onDeleteIconClick', listener);
+        };
+      }, [el, onDeleteIconClick]);
+      return jsxRuntime.jsx("goa-chip", {
+        ref: el,
+        leadingicon: leadingIcon,
+        error: error,
+        deletable: !!onDeleteIconClick,
+        content: content
+      }, void 0);
+    };
+
     var GoACircularProgress = function GoACircularProgress(_a) {
       var type = _a.type,
           visible = _a.visible,
@@ -808,6 +839,7 @@
     exports.GoAButtonGroup = GoAButtonGroup;
     exports.GoACallout = GoACallout;
     exports.GoACheckbox = GoACheckbox;
+    exports.GoAChip = GoAChip;
     exports.GoACircularProgress = GoACircularProgress;
     exports.GoAContainer = GoAContainer;
     exports.GoADropdown = GoADropdown;