@clearstory/drywall-react 4.1.3 → 4.2.0

package/README.md

@@ -35,3 +35,13 @@ function App() {
 
 export default App;
 ```
+
+## ESLint Rules
+
+This library includes custom ESLint rules to help enforce best practices. Add to your `eslint.config.js`:
+
+```js
+import drywallReact from "@clearstory/drywall-react/eslint-config";
+
+export default [drywallReact];
+```

package/dist/{AdapterDayjs-CI-cczs8.js → AdapterDayjs-B-aQ7t7H.js}

@@ -1,6 +1,6 @@
 import { _ as gt } from "./index-CFunVsti.js";
 import { g as Q } from "./index-CyAhC1RZ.js";
-import { w as Dt } from "./Datepicker-5EuKlnxP.js";
+import { w as Dt } from "./Datepicker-BvCR9LUk.js";
 var tt = { exports: {} }, $t = tt.exports, ht;
 function Tt() {
   return ht || (ht = 1, (function(W, t) {

package/dist/{Datepicker-5EuKlnxP.js → Datepicker-BvCR9LUk.js}

@@ -10481,7 +10481,7 @@ process.env.NODE_ENV !== "production" && (An.propTypes = {
 const hc = q("div", {
   name: "DateField",
   slot: "Root",
-  shouldForwardProp: (e) => e !== "error" && e !== "disabled"
+  shouldForwardProp: (e) => e !== "error" && e !== "disabled" && e !== "slotProps" && e !== "inputRef"
 })(({ theme: e, error: n, color: o = "primary", disabled: r }) => {
   const s = n ? e.vars?.palette.error.main : o && e.vars?.palette[o]?.main, a = n ? e.vars?.palette.error.light : o && e.vars?.palette[o]?.light;
   return {

package/dist/components/AutocompleteControl/AutocompleteControl.d.ts

@@ -1,5 +1,9 @@
 import { ReactNode, DOMAttributes, ElementType, Ref, ReactElement } from 'react';
-import { AutocompleteProps, FormControlProps, FormLabelProps, FormHelperTextProps, FormSublabelProps } from '../../main';
+import { FormControlProps } from '../FormControl';
+import { FormHelperTextProps } from '../FormHelperText';
+import { FormLabelProps } from '../FormLabel';
+import { FormSublabelProps } from '../FormSublabel';
+import { AutocompleteProps } from '../Autocomplete';
 type DOMEventHandlers = keyof DOMAttributes<HTMLElement>;
 export interface AutocompleteControlProps<Value, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends ElementType = "div"> extends Omit<AutocompleteProps<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>, "ref" | "slotProps"> {
     helperText?: ReactNode;

package/dist/components/AutocompleteControl/AutocompleteControl.js

@@ -1,30 +1,76 @@
-import "react/jsx-runtime";
-import "react";
-import "../../hooks/useId.js";
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { forwardRef as F } from "react";
+import { FormSublabel as I } from "../FormSublabel/FormSublabel.js";
+import { A as y } from "../../Autocomplete-FWamSgvx.js";
+import { useId as g } from "../../hooks/useId.js";
 import "../../icons/ClearstoryIcon.js";
 import "../../icons/InternalOnlyIcon.js";
 import "../../icons/MoneyBucketIcon.js";
 import "../../icons/MoreCircleOutlineIcon.js";
-import "../../Info-Cykl51qM.js";
-import "../../theme/index.js";
-import "../../Autocomplete-FWamSgvx.js";
-import { A as B } from "../../SelectControl-JlfR4Ddv.js";
-import "../../Datepicker-5EuKlnxP.js";
-import "../DescriptionDetails/DescriptionDetails.js";
-import "../DescriptionList/DescriptionList.js";
-import "../DescriptionList/DescriptionListContext.js";
-import "../DescriptionTerm/DescriptionTerm.js";
-import "../Input/Input.js";
-import "../Select/Select.js";
-import "../../theme/internal.js";
-import "../ToastContainer/ToastContainer.js";
-import "../ToastContainer/ToastLabelContext.js";
-import "../../index-SzwnPTHF.js";
-import "../../FormControl-SJ7nmkLi.js";
-import "../../Box-CRpDZJO_.js";
-import "../../FormLabel-Cq6v8zn0.js";
-import "../../Tooltip-D_k6EcdK.js";
-import "../../FormHelperText-Dh36nlW5.js";
+import { I as A } from "../../Info-Cykl51qM.js";
+import { F as C } from "../../FormControl-SJ7nmkLi.js";
+import { B as T } from "../../Box-CRpDZJO_.js";
+import { F as w } from "../../FormLabel-Cq6v8zn0.js";
+import { T as B } from "../../Tooltip-D_k6EcdK.js";
+import { F as $ } from "../../FormHelperText-Dh36nlW5.js";
+function j(n, c) {
+  const {
+    disabled: m,
+    error: p,
+    helperText: l,
+    id: b,
+    label: f,
+    required: h,
+    slotProps: r,
+    sublabel: a,
+    tooltip: s,
+    ...e
+  } = n, u = g("autocomplete"), i = b || u, t = l ? `${i}-helper` : void 0;
+  return /* @__PURE__ */ d(C, { disabled: m, error: p, ...r?.root, children: [
+    /* @__PURE__ */ d(
+      T,
+      {
+        sx: {
+          alignItems: "center",
+          display: "flex",
+          gap: "0.25rem"
+        },
+        children: [
+          /* @__PURE__ */ o(w, { htmlFor: i, required: h, ...r?.label, children: f }),
+          s && /* @__PURE__ */ o(B, { title: s, arrow: !0, children: /* @__PURE__ */ o(
+            A,
+            {
+              sx: ({ vars: x }) => ({
+                color: x?.palette.text.secondary,
+                marginBlockEnd: "3px",
+                height: "1rem",
+                width: "1rem"
+              })
+            }
+          ) })
+        ]
+      }
+    ),
+    a && /* @__PURE__ */ o(I, { ...r?.sublabel, children: a }),
+    /* @__PURE__ */ o(
+      y,
+      {
+        disabled: m,
+        ref: c,
+        error: p,
+        id: i,
+        "aria-describedby": t ? e["aria-describedby"] ? `${e["aria-describedby"]} ${t}` : t : e["aria-describedby"],
+        slotProps: r?.autocomplete,
+        ...e
+      }
+    ),
+    l && /* @__PURE__ */ o($, { id: t, ...r?.helperText, children: l })
+  ] });
+}
+const P = F(
+  j
+);
+P.displayName = "AutocompleteControl";
 export {
-  B as AutocompleteControl
+  P as AutocompleteControl
 };

package/dist/components/AutocompleteControl/index.js

@@ -1,4 +1,4 @@
-import { A as e } from "../../SelectControl-JlfR4Ddv.js";
+import { AutocompleteControl as e } from "./AutocompleteControl.js";
 export {
   e as AutocompleteControl
 };

package/dist/components/Datepicker/Datepicker.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "react";
-import { D, D as f } from "../../Datepicker-5EuKlnxP.js";
+import { D, D as f } from "../../Datepicker-BvCR9LUk.js";
 import "../../styled-SBTDGe0C.js";
 import "../../InputAdornment-BZDlmn1r.js";
 import "../../useForkRef-9kN4DArm.js";

package/dist/components/Datepicker/index.js

@@ -1,5 +1,5 @@
-import { c as e, a as r, b as i, D as t, L as l, M as o, P as d, e as C, d as c, f as D, D as k, g as n, j as p, i as P, p as y, h as f } from "../../Datepicker-5EuKlnxP.js";
-import { A as b } from "../../AdapterDayjs-CI-cczs8.js";
+import { c as e, a as r, b as i, D as t, L as l, M as o, P as d, e as C, d as c, f as D, D as k, g as n, j as p, i as P, p as y, h as f } from "../../Datepicker-BvCR9LUk.js";
+import { A as b } from "../../AdapterDayjs-B-aQ7t7H.js";
 export {
   b as AdapterDayjs,
   e as DateCalendar,

package/dist/components/DatepickerControl/DatepickerControl.d.ts

@@ -1,6 +1,10 @@
 import { DOMAttributes, ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
-import { FormControlProps, FormLabelProps, FormHelperTextProps, FormSublabelProps, DatepickerProps } from '../../main';
 import { Dayjs } from 'dayjs';
+import { DatepickerProps } from '../Datepicker';
+import { FormControlProps } from '../FormControl';
+import { FormHelperTextProps } from '../FormHelperText';
+import { FormLabelProps } from '../FormLabel';
+import { FormSublabelProps } from '../FormSublabel';
 type DOMEventHandlers = keyof DOMAttributes<HTMLElement>;
 export interface DatepickerControlProps {
     value?: Dayjs | null;

package/dist/components/DatepickerControl/DatepickerControl.js

@@ -1,30 +1,126 @@
-import "react/jsx-runtime";
-import "react";
-import "../../hooks/useId.js";
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { forwardRef as N } from "react";
+import { D as R } from "../../Datepicker-BvCR9LUk.js";
+import { FormSublabel as S } from "../FormSublabel/FormSublabel.js";
+import { useId as q } from "../../hooks/useId.js";
 import "../../icons/ClearstoryIcon.js";
 import "../../icons/InternalOnlyIcon.js";
 import "../../icons/MoneyBucketIcon.js";
 import "../../icons/MoreCircleOutlineIcon.js";
-import "../../Info-Cykl51qM.js";
-import "../../theme/index.js";
-import "../../Autocomplete-FWamSgvx.js";
-import { D as A } from "../../SelectControl-JlfR4Ddv.js";
-import "../../Datepicker-5EuKlnxP.js";
-import "../DescriptionDetails/DescriptionDetails.js";
-import "../DescriptionList/DescriptionList.js";
-import "../DescriptionList/DescriptionListContext.js";
-import "../DescriptionTerm/DescriptionTerm.js";
-import "../Input/Input.js";
-import "../Select/Select.js";
-import "../../theme/internal.js";
-import "../ToastContainer/ToastContainer.js";
-import "../ToastContainer/ToastLabelContext.js";
-import "../../index-SzwnPTHF.js";
-import "../../FormControl-SJ7nmkLi.js";
-import "../../Box-CRpDZJO_.js";
-import "../../FormLabel-Cq6v8zn0.js";
-import "../../Tooltip-D_k6EcdK.js";
-import "../../FormHelperText-Dh36nlW5.js";
+import { I as z } from "../../Info-Cykl51qM.js";
+import { F as A } from "../../FormControl-SJ7nmkLi.js";
+import { B as G } from "../../Box-CRpDZJO_.js";
+import { F as J } from "../../FormLabel-Cq6v8zn0.js";
+import { T as K } from "../../Tooltip-D_k6EcdK.js";
+import { F as M } from "../../FormHelperText-Dh36nlW5.js";
+const O = N(
+  ({
+    disabled: m = !1,
+    error: a = !1,
+    fullWidth: p,
+    helperText: i,
+    label: t,
+    required: f = !1,
+    slotProps: e = {},
+    sublabel: n,
+    tooltip: d,
+    name: s,
+    value: h,
+    onChange: x,
+    onAccept: F,
+    onClose: I,
+    onOpen: k,
+    format: g,
+    views: y,
+    openTo: D,
+    disableFuture: b,
+    disablePast: w,
+    minDate: u,
+    maxDate: B,
+    closeOnSelect: C,
+    readOnly: $,
+    clearable: j,
+    reduceAnimations: T,
+    ...v
+  }, E) => {
+    const H = q("datepicker"), o = s || H, c = i ? `${o}-helper` : void 0;
+    return /* @__PURE__ */ l(
+      A,
+      {
+        disabled: m,
+        error: a,
+        fullWidth: p,
+        ...e.root,
+        children: [
+          /* @__PURE__ */ l(
+            G,
+            {
+              sx: {
+                alignItems: "center",
+                display: "flex",
+                gap: "0.25rem"
+              },
+              children: [
+                /* @__PURE__ */ r(J, { htmlFor: o, required: f, ...e.label, children: t }),
+                d && /* @__PURE__ */ r(K, { title: d, arrow: !0, children: /* @__PURE__ */ r(
+                  z,
+                  {
+                    sx: ({ vars: L }) => ({
+                      color: L?.palette.text.secondary,
+                      marginBlockEnd: "3px",
+                      height: "1rem",
+                      width: "1rem"
+                    })
+                  }
+                ) })
+              ]
+            }
+          ),
+          n && /* @__PURE__ */ r(S, { ...e.sublabel, children: n }),
+          /* @__PURE__ */ r(
+            R,
+            {
+              ref: E,
+              disabled: m,
+              name: o,
+              value: h,
+              onChange: x,
+              onAccept: F,
+              onClose: I,
+              onOpen: k,
+              format: g,
+              views: y,
+              openTo: D,
+              disableFuture: b,
+              disablePast: w,
+              minDate: u,
+              maxDate: B,
+              closeOnSelect: C,
+              readOnly: $,
+              clearable: j,
+              reduceAnimations: T,
+              error: a,
+              slotProps: {
+                field: {
+                  id: o,
+                  "aria-describedby": c,
+                  ...p && { sx: { width: "100%" } }
+                },
+                popper: {
+                  "aria-label": `Date picker${typeof t == "string" && ` for ${t}`}`
+                },
+                ...e?.datepicker
+              },
+              ...v
+            }
+          ),
+          i && /* @__PURE__ */ r(M, { id: c, ...e.helperText, children: i })
+        ]
+      }
+    );
+  }
+);
+O.displayName = "DatepickerControl";
 export {
-  A as DatepickerControl
+  O as DatepickerControl
 };

package/dist/components/DatepickerControl/index.js

@@ -1,4 +1,4 @@
-import { D as e } from "../../SelectControl-JlfR4Ddv.js";
+import { DatepickerControl as e } from "./DatepickerControl.js";
 export {
   e as DatepickerControl
 };

package/dist/components/DialogClose/DialogClose.d.ts

@@ -1,4 +1,4 @@
-import { IconButtonProps } from '../../main';
+import { IconButtonProps } from '../IconButton';
 export interface DialogCloseProps extends IconButtonProps {
     onClick: NonNullable<IconButtonProps["onClick"]>;
 }

package/dist/components/DialogClose/DialogClose.js

@@ -1,26 +1,11 @@
 import { jsx as r } from "react/jsx-runtime";
-import "react";
 import "../../icons/ClearstoryIcon.js";
 import "../../icons/InternalOnlyIcon.js";
 import "../../icons/MoneyBucketIcon.js";
 import "../../icons/MoreCircleOutlineIcon.js";
 import { C as i } from "../../Close-DeDd1tSW.js";
-import "../../theme/index.js";
-import "../../Autocomplete-FWamSgvx.js";
-import "../../SelectControl-JlfR4Ddv.js";
-import "../../Datepicker-5EuKlnxP.js";
-import "../DescriptionDetails/DescriptionDetails.js";
-import "../DescriptionList/DescriptionList.js";
-import "../DescriptionList/DescriptionListContext.js";
-import "../DescriptionTerm/DescriptionTerm.js";
-import "../Input/Input.js";
-import "../Select/Select.js";
-import "../../theme/internal.js";
-import "../ToastContainer/ToastContainer.js";
-import "../ToastContainer/ToastLabelContext.js";
-import "../../index-SzwnPTHF.js";
 import { I as m } from "../../IconButton-RfVV5QBc.js";
-const q = ({ sx: o, ...t }) => /* @__PURE__ */ r(
+const f = ({ sx: o, ...t }) => /* @__PURE__ */ r(
   m,
   {
     sx: [
@@ -36,5 +21,5 @@ const q = ({ sx: o, ...t }) => /* @__PURE__ */ r(
   }
 );
 export {
-  q as DialogClose
+  f as DialogClose
 };

package/dist/components/FormSublabel/FormSublabel.d.ts

@@ -1,10 +1,10 @@
-import { FormHelperTextProps } from '../../main';
+import { FormHelperTextProps } from '../FormHelperText';
 import { StyledComponent } from '@emotion/styled';
 import { FormHelperTextOwnProps, Theme } from '@mui/material';
 import { CommonProps } from '@mui/material/OverridableComponent';
 import { DetailedHTMLProps, HTMLAttributes } from 'react';
 import { MUIStyledCommonProps } from '@mui/system';
 export type FormSublabelProps = FormHelperTextProps;
-export declare const FormSublabel: StyledComponent< FormHelperTextOwnProps & CommonProps & Omit< DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "classes" | "children" | "className" | "style" | "error" | "disabled" | "margin" | "required" | "sx" | "variant" | "focused" | "filled"> & MUIStyledCommonProps<Theme> & {
+export declare const FormSublabel: StyledComponent< FormHelperTextOwnProps & CommonProps & Omit< DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "classes" | "children" | "className" | "style" | "error" | "disabled" | "margin" | "required" | "sx" | "variant" | "filled" | "focused"> & MUIStyledCommonProps<Theme> & {
     component?: React.ElementType;
 }, {}, {}>;

package/dist/components/FormSublabel/FormSublabel.js

@@ -1,25 +1,10 @@
-import "react";
-import "../../icons/ClearstoryIcon.js";
-import "../../icons/InternalOnlyIcon.js";
-import "../../icons/MoneyBucketIcon.js";
-import "../../icons/MoreCircleOutlineIcon.js";
-import "../../theme/index.js";
-import "../../Autocomplete-FWamSgvx.js";
-import { F as q } from "../../SelectControl-JlfR4Ddv.js";
-import "../../Datepicker-5EuKlnxP.js";
-import "../DescriptionDetails/DescriptionDetails.js";
-import "../DescriptionList/DescriptionList.js";
-import "../DescriptionList/DescriptionListContext.js";
-import "../DescriptionTerm/DescriptionTerm.js";
-import "react/jsx-runtime";
-import "../Input/Input.js";
-import "../Select/Select.js";
-import "../../theme/internal.js";
-import "../ToastContainer/ToastContainer.js";
-import "../ToastContainer/ToastLabelContext.js";
-import "../../index-SzwnPTHF.js";
-import "../../styled-SBTDGe0C.js";
-import "../../FormHelperText-Dh36nlW5.js";
+import { s as r } from "../../styled-SBTDGe0C.js";
+import { F as o } from "../../FormHelperText-Dh36nlW5.js";
+const a = r(o)(() => ({
+  marginBlockStart: 0,
+  marginBlockEnd: "3px",
+  marginInline: 0
+}));
 export {
-  q as FormSublabel
+  a as FormSublabel
 };

package/dist/components/FormSublabel/index.js

@@ -1,4 +1,4 @@
-import { F as a } from "../../SelectControl-JlfR4Ddv.js";
+import { FormSublabel as b } from "./FormSublabel.js";
 export {
-  a as FormSublabel
+  b as FormSublabel
 };

package/dist/components/InputControl/InputControl.d.ts

@@ -1,5 +1,9 @@
 import { DOMAttributes, ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
-import { InputProps, FormControlProps, FormLabelProps, FormHelperTextProps, FormSublabelProps } from '../../main';
+import { FormControlProps } from '../FormControl';
+import { FormHelperTextProps } from '../FormHelperText';
+import { FormLabelProps } from '../FormLabel';
+import { FormSublabelProps } from '../FormSublabel';
+import { InputProps } from '../Input';
 type DOMEventHandlers = keyof DOMAttributes<HTMLElement>;
 export interface InputControlProps extends Omit<InputProps, "ref" | "slotProps"> {
     helperText?: ReactNode;

package/dist/components/InputControl/InputControl.js

@@ -1,30 +1,94 @@
-import "react/jsx-runtime";
-import "react";
-import "../../hooks/useId.js";
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { FormSublabel as F } from "../FormSublabel/FormSublabel.js";
+import { Input as y } from "../Input/Input.js";
+import { useId as g } from "../../hooks/useId.js";
 import "../../icons/ClearstoryIcon.js";
 import "../../icons/InternalOnlyIcon.js";
 import "../../icons/MoneyBucketIcon.js";
 import "../../icons/MoreCircleOutlineIcon.js";
-import "../../Info-Cykl51qM.js";
-import "../../theme/index.js";
-import "../../Autocomplete-FWamSgvx.js";
-import { I as A } from "../../SelectControl-JlfR4Ddv.js";
-import "../../Datepicker-5EuKlnxP.js";
-import "../DescriptionDetails/DescriptionDetails.js";
-import "../DescriptionList/DescriptionList.js";
-import "../DescriptionList/DescriptionListContext.js";
-import "../DescriptionTerm/DescriptionTerm.js";
-import "../Input/Input.js";
-import "../Select/Select.js";
-import "../../theme/internal.js";
-import "../ToastContainer/ToastContainer.js";
-import "../ToastContainer/ToastLabelContext.js";
-import "../../index-SzwnPTHF.js";
-import "../../FormControl-SJ7nmkLi.js";
-import "../../Box-CRpDZJO_.js";
-import "../../FormLabel-Cq6v8zn0.js";
-import "../../Tooltip-D_k6EcdK.js";
-import "../../FormHelperText-Dh36nlW5.js";
+import { I as w } from "../../Info-Cykl51qM.js";
+import { F as B } from "../../FormControl-SJ7nmkLi.js";
+import { B as C } from "../../Box-CRpDZJO_.js";
+import { F as $ } from "../../FormLabel-Cq6v8zn0.js";
+import { T as j } from "../../Tooltip-D_k6EcdK.js";
+import { F as T } from "../../FormHelperText-Dh36nlW5.js";
+const k = u(
+  ({
+    disabled: a,
+    error: n,
+    fullWidth: d,
+    helperText: m,
+    id: f,
+    label: s,
+    required: b,
+    slotProps: o,
+    sublabel: p,
+    tooltip: l,
+    ...i
+  }, I) => {
+    const h = g("input"), t = f || h, e = m ? `${t}-helper` : void 0;
+    return /* @__PURE__ */ c(
+      B,
+      {
+        disabled: a,
+        error: n,
+        fullWidth: d,
+        ...o?.root,
+        children: [
+          /* @__PURE__ */ c(
+            C,
+            {
+              sx: {
+                alignItems: "center",
+                display: "flex",
+                gap: "0.25rem"
+              },
+              children: [
+                /* @__PURE__ */ r(
+                  $,
+                  {
+                    htmlFor: t,
+                    required: b,
+                    ...o?.label,
+                    children: s
+                  }
+                ),
+                l && /* @__PURE__ */ r(j, { title: l, arrow: !0, children: /* @__PURE__ */ r(
+                  w,
+                  {
+                    sx: ({ vars: x }) => ({
+                      color: x?.palette.text.secondary,
+                      marginBlockEnd: "3px",
+                      height: "1rem",
+                      width: "1rem"
+                    })
+                  }
+                ) })
+              ]
+            }
+          ),
+          p && /* @__PURE__ */ r(F, { ...o?.sublabel, children: p }),
+          /* @__PURE__ */ r(
+            y,
+            {
+              ref: I,
+              disabled: a,
+              error: n,
+              fullWidth: d,
+              id: t,
+              "aria-describedby": e ? i["aria-describedby"] ? `${i["aria-describedby"]} ${e}` : e : i["aria-describedby"],
+              slotProps: o?.input,
+              ...i
+            }
+          ),
+          m && /* @__PURE__ */ r(T, { id: e, ...o?.helperText, children: m })
+        ]
+      }
+    );
+  }
+);
+k.displayName = "InputControl";
 export {
-  A as InputControl
+  k as InputControl
 };

package/dist/components/InputControl/index.js

@@ -1,4 +1,4 @@
-import { I as t } from "../../SelectControl-JlfR4Ddv.js";
+import { InputControl as t } from "./InputControl.js";
 export {
   t as InputControl
 };