@companycam/slab-web 1.16.2-beta.6 → 1.16.2-beta.7

package/index.js

@@ -2349,7 +2349,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
   position: relative;
   padding: var(--cc_size_spacing_m);
   display: flex;
-  align-items: ${e=>e.$action||e.$title?"start":"center"};
+  align-items: ${e=>e.$hasAction||e.$hasTitle?"start":"center"};
   gap: var(--cc_size_spacing_m);
   background: var(--cc_color_background_3);
   border-radius: var(--cc_size_border_radius_l);
@@ -2380,4 +2380,4 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
   top: 6px; /* magic number to account for icon padding */
   right: 6px;
   display: block;
-`;function mT({action:e,closeAction:n,color:t=xn.success,iconName:r="",message:i,title:o,testId:a}){var c,d;return E.jsx(cT,{"data-testId":a,children:E.jsxs(uT,{$action:e,$title:o,className:"dark-environment",children:[E.jsx(fT,{color:t,children:E.jsx(pT,{color:t,className:`mdi mdi-${oT(r,t)}`})}),E.jsxs(dT,{children:[o?E.jsx(Mt,{as:"h4",family:"heading",size:"m",weight:600,children:o}):null,E.jsx(Mt,{as:"p",children:i}),e?E.jsx(hT,{...e,"data-testid":e["data-testid"],color:"secondary",design:"outline",size:"small",icon:{name:(c=e.icon)==null?void 0:c.name,position:(d=e.icon)==null?void 0:d.position},children:e.label}):null]}),n?E.jsx(gT,{...n,"data-testid":n["data-testid"],accessibilityLabel:n.accessibilityLabel,iconName:"close",color:"subtle"}):null]})})}exports.AssetThumbnail=u0;exports.Avatar=ka;exports.AvatarGroup=t1;exports.Badge=a1;exports.Billboard=Qp;exports.Button=ui;exports.ButtonCondensed=Wc;exports.ButtonFilter=F1;exports.ButtonIcon=Ea;exports.ButtonIconCondensed=zi;exports.Card=q1;exports.ChipFilter=J1;exports.ChipToggle=tw;exports.Comment=ow;exports.Drawer=fw;exports.Fieldset=dh;exports.Grid=mw;exports.HorizontalRule=_w;exports.InputCheckbox=uh;exports.InputCheckboxGroup=Mw;exports.InputDate=wC;exports.InputFile=DC;exports.InputPassword=FC;exports.InputRadio=Bh;exports.InputRadioGroup=NC;exports.InputRange=BC;exports.InputSelectHTML=KC;exports.InputText=zh;exports.InputTextArea=XC;exports.Label=eE;exports.Link=nE;exports.Lottie=uE;exports.Menu=gD;exports.MenuHeading=vD;exports.MenuItem=SD;exports.Metric=ID;exports.Modal=KD;exports.ModalBase=XD;exports.Notice=cP;exports.PageHeader=mP;exports.Popover=bP;exports.ProgressBar=kP;exports.ProgressCircle=FP;exports.Rating=qP;exports.ScreenReaderContent=Lr;exports.Spinner=Ca;exports.Switch=JP;exports.Table=eT;exports.Text=Mt;exports.TimeStamp=sT;exports.Toast=mT;exports.Tooltip=Hc;
+`;function mT({action:e,closeAction:n,color:t=xn.success,iconName:r="",message:i,title:o,testId:a}){var c,d;return E.jsx(cT,{"data-testId":a,children:E.jsxs(uT,{$hasAction:!!e,$hasTitle:!!o,className:"dark-environment",children:[E.jsx(fT,{color:t,children:E.jsx(pT,{color:t,className:`mdi mdi-${oT(r,t)}`})}),E.jsxs(dT,{children:[o?E.jsx(Mt,{as:"h4",family:"heading",size:"m",weight:600,children:o}):null,E.jsx(Mt,{as:"p",children:i}),e?E.jsx(hT,{...e,"data-testid":e["data-testid"],color:"secondary",design:"outline",size:"small",icon:{name:(c=e.icon)==null?void 0:c.name,position:(d=e.icon)==null?void 0:d.position},children:e.label}):null]}),n?E.jsx(gT,{...n,"data-testid":n["data-testid"],accessibilityLabel:n.accessibilityLabel,iconName:"close",color:"subtle"}):null]})})}exports.AssetThumbnail=u0;exports.Avatar=ka;exports.AvatarGroup=t1;exports.Badge=a1;exports.Billboard=Qp;exports.Button=ui;exports.ButtonCondensed=Wc;exports.ButtonFilter=F1;exports.ButtonIcon=Ea;exports.ButtonIconCondensed=zi;exports.Card=q1;exports.ChipFilter=J1;exports.ChipToggle=tw;exports.Comment=ow;exports.Drawer=fw;exports.Fieldset=dh;exports.Grid=mw;exports.HorizontalRule=_w;exports.InputCheckbox=uh;exports.InputCheckboxGroup=Mw;exports.InputDate=wC;exports.InputFile=DC;exports.InputPassword=FC;exports.InputRadio=Bh;exports.InputRadioGroup=NC;exports.InputRange=BC;exports.InputSelectHTML=KC;exports.InputText=zh;exports.InputTextArea=XC;exports.Label=eE;exports.Link=nE;exports.Lottie=uE;exports.Menu=gD;exports.MenuHeading=vD;exports.MenuItem=SD;exports.Metric=ID;exports.Modal=KD;exports.ModalBase=XD;exports.Notice=cP;exports.PageHeader=mP;exports.Popover=bP;exports.ProgressBar=kP;exports.ProgressCircle=FP;exports.Rating=qP;exports.ScreenReaderContent=Lr;exports.Spinner=Ca;exports.Switch=JP;exports.Table=eT;exports.Text=Mt;exports.TimeStamp=sT;exports.Toast=mT;exports.Tooltip=Hc;

package/index.mjs

@@ -23608,7 +23608,7 @@ const Mn = {
   position: relative;
   padding: var(--cc_size_spacing_m);
   display: flex;
-  align-items: ${(e) => e.$action || e.$title ? "start" : "center"};
+  align-items: ${(e) => e.$hasAction || e.$hasTitle ? "start" : "center"};
   gap: var(--cc_size_spacing_m);
   background: var(--cc_color_background_3);
   border-radius: var(--cc_size_border_radius_l);
@@ -23650,44 +23650,52 @@ function HT({
   testId: a
 }) {
   var c, d;
-  return /* @__PURE__ */ O(KP, { "data-testId": a, children: /* @__PURE__ */ he(UP, { $action: e, $title: o, className: "dark-environment", children: [
-    /* @__PURE__ */ O(XP, { color: t, children: /* @__PURE__ */ O(
-      ZP,
-      {
-        color: t,
-        className: `mdi mdi-${jP(r, t)}`
-      }
-    ) }),
-    /* @__PURE__ */ he(QP, { children: [
-      o ? /* @__PURE__ */ O(Nt, { as: "h4", family: "heading", size: "m", weight: 600, children: o }) : null,
-      /* @__PURE__ */ O(Nt, { as: "p", children: i }),
-      e ? /* @__PURE__ */ O(
-        JP,
-        {
-          ...e,
-          "data-testid": e["data-testid"],
-          color: "secondary",
-          design: "outline",
-          size: "small",
-          icon: {
-            name: (c = e.icon) == null ? void 0 : c.name,
-            position: (d = e.icon) == null ? void 0 : d.position
-          },
-          children: e.label
-        }
-      ) : null
-    ] }),
-    n ? /* @__PURE__ */ O(
-      eT,
-      {
-        ...n,
-        "data-testid": n["data-testid"],
-        accessibilityLabel: n.accessibilityLabel,
-        iconName: "close",
-        color: "subtle"
-      }
-    ) : null
-  ] }) });
+  return /* @__PURE__ */ O(KP, { "data-testId": a, children: /* @__PURE__ */ he(
+    UP,
+    {
+      $hasAction: !!e,
+      $hasTitle: !!o,
+      className: "dark-environment",
+      children: [
+        /* @__PURE__ */ O(XP, { color: t, children: /* @__PURE__ */ O(
+          ZP,
+          {
+            color: t,
+            className: `mdi mdi-${jP(r, t)}`
+          }
+        ) }),
+        /* @__PURE__ */ he(QP, { children: [
+          o ? /* @__PURE__ */ O(Nt, { as: "h4", family: "heading", size: "m", weight: 600, children: o }) : null,
+          /* @__PURE__ */ O(Nt, { as: "p", children: i }),
+          e ? /* @__PURE__ */ O(
+            JP,
+            {
+              ...e,
+              "data-testid": e["data-testid"],
+              color: "secondary",
+              design: "outline",
+              size: "small",
+              icon: {
+                name: (c = e.icon) == null ? void 0 : c.name,
+                position: (d = e.icon) == null ? void 0 : d.position
+              },
+              children: e.label
+            }
+          ) : null
+        ] }),
+        n ? /* @__PURE__ */ O(
+          eT,
+          {
+            ...n,
+            "data-testid": n["data-testid"],
+            accessibilityLabel: n.accessibilityLabel,
+            iconName: "close",
+            color: "subtle"
+          }
+        ) : null
+      ]
+    }
+  ) });
 }
 export {
   sT as AssetThumbnail,

package/lib/Toast/Toast.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { default as React, ReactNode } from 'react';
 import { ButtonProps } from '../Button/Button';
 import { ButtonIconCondensedProps } from '../ButtonIconCondensed/ButtonIconCondensed';
 declare const ToastColor: {
@@ -8,17 +8,19 @@ declare const ToastColor: {
     readonly success: "success";
 };
 type Color = (typeof ToastColor)[keyof typeof ToastColor];
-type Action = Omit<ButtonProps, 'children'> & {
+type Action<C extends React.ElementType> = ButtonProps<C> & {
     label: string;
     'data-testid'?: string;
+    children?: 'never';
 };
-type CloseAction = Omit<ButtonIconCondensedProps, 'iconName'> & {
+type CloseAction<C extends React.ElementType> = ButtonIconCondensedProps<C> & {
     accessibilityLabel: string;
     'data-testid'?: string;
+    iconName?: never;
 };
-export type ToastProps = {
-    closeAction: CloseAction;
-    action?: Action;
+export type ToastProps<ActionComponent extends React.ElementType = 'button', CloseActionComponent extends React.ElementType = 'button'> = {
+    action?: Action<ActionComponent>;
+    closeAction: CloseAction<CloseActionComponent>;
     color?: Color;
     iconName?: string;
     message: ReactNode;
@@ -30,5 +32,5 @@ export type ToastProps = {
   - If it helps the content to be understood faster, include an optional `title` prop. Use title case.
   - The `action` prop renders a button at the end of the toast. This is typically used for an "Undo" action, but can be used for any action you want to give the user a quick option to take.
 */
-export declare function Toast({ action, closeAction, color, iconName, message, title, testId, }: ToastProps): import("react/jsx-runtime").JSX.Element;
+export declare function Toast<ActionComponent extends React.ElementType = 'button', CloseActionComponent extends React.ElementType = 'button'>({ action, closeAction, color, iconName, message, title, testId, }: ToastProps<ActionComponent, CloseActionComponent>): import("react/jsx-runtime").JSX.Element;
 export default Toast;

package/lib/shared/types.d.ts

@@ -39,7 +39,7 @@ export type BasePolymorphicComponentProps<C extends React.ElementType> = {
  *    size: "small" | "medium" | "large"
  * }
  * type BaseButtonPropKeys<C extends React.Element> = PolyMorphicComponentPropNames<C, BaseButtonProps>
- * // BaseButtonPropKeys = "as" | size"
+ * // BaseButtonPropKeys = "component" | size"
  * ```
  * */
 export type PolyMorphicComponentPropNames<C extends React.ElementType, P> = keyof (BasePolymorphicComponentProps<C> & P);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@companycam/slab-web",
-  "version": "1.16.2-beta.6",
+  "version": "1.16.2-beta.7",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {