@planningcenter/tapestry 4.2.0-rc.3 → 4.2.0-rc.5

package/dist/components/page-header/PageHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/PageHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,QAAgB,EAChB,OAAe,GAChB,EAAE;IACD;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,qBA+BA"}
+{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/PageHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,QAAgB,EAChB,OAAe,GAChB,EAAE;IACD;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,qBA6BA"}

package/dist/components/page-header/PageHeader.js

@@ -24,8 +24,8 @@ function PageHeader({ children, actions, navigation, className, inactive = false
         React.createElement("div", { className: "tds-page-header__title-bar" },
             React.createElement("div", { className: "tds-page-header__primary" }, children),
             actions && (React.createElement("div", { className: "tds-page-header__actions tds-no-print" }, actions))),
-        navigation && (React.createElement("nav", { className: "tds-page-header__nav tds-no-print" },
-            React.createElement("tds-scroll-to-selected-in-unordered-list", null, navigation)))));
+        navigation && (React.createElement("tds-scroll-to-selected-in-unordered-list", null,
+            React.createElement("nav", { className: "tds-page-header__nav tds-no-print" }, navigation)))));
 }
 
 export { PageHeader };

package/dist/components/page-header/PageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.js","sources":["../../../src/components/page-header/PageHeader.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport React from \"react\"\n\n/**\n * A page header lays out the primary title, optional navigation, and\n * action buttons at the top of a page. Use one per page to anchor the\n * page's identity and primary controls.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-page-header--docs | Storybook Documentation}\n */\nexport function PageHeader({\n  children,\n  actions,\n  navigation,\n  className,\n  inactive = false,\n  profile = false,\n}: {\n  /**\n   * Actions to be displayed on the right side of the header. Elements\n   * should be styled as buttons.\n   */\n  actions?: React.ReactNode\n  /**\n   * The main content of the page header. It will be displayed prominently. For simple pages, providing a h1 will suffice.\n   */\n  children: React.ReactNode\n  className?: string\n  /**\n   * Indicates whether the page header is inactive or not. When set to true, the page header is visually inactive\n   */\n  inactive?: boolean\n  /**\n   * Navigation links to be displayed on the left side of the header.\n   * Contents should be an unordered list with items being links or\n   * buttons. Specify `selected` for the active link (as well as adding\n   * `aria-current=\"page\"` for accessibility).\n   */\n  navigation?: React.ReactNode\n  /**\n   * Indicates whether the page header is a profile page header or not. When set to true, the page header will visually center the title and actions at mobile breakpoints.\n   */\n  profile?: boolean\n}) {\n  const hasMultiActions = actions\n    ? React.isValidElement(actions) && actions.type === React.Fragment\n      ? React.Children.count(actions.props.children) > 1\n      : React.Children.count(actions) > 1\n    : false\n\n  return (\n    <header\n      className={classNames(\"tds-page-header\", className, {\n        \"has-multi-actions\": hasMultiActions,\n        \"has-nav\": !!navigation,\n        inactive,\n        \"tds-page-header--profile\": profile,\n      })}\n    >\n      <div className=\"tds-page-header__title-bar\">\n        <div className=\"tds-page-header__primary\">{children}</div>\n        {actions && (\n          <div className=\"tds-page-header__actions tds-no-print\">{actions}</div>\n        )}\n      </div>\n      {navigation && (\n        <nav className=\"tds-page-header__nav tds-no-print\">\n          <tds-scroll-to-selected-in-unordered-list>\n            {navigation}\n          </tds-scroll-to-selected-in-unordered-list>\n        </nav>\n      )}\n    </header>\n  )\n}\n"],"names":[],"mappings":";;;AAGA;;;;;;;AAOG;SACa,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,GA2BhB,EAAA;IACC,MAAM,eAAe,GAAG;AACtB,UAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,IAAI,KAAK,KAAK,CAAC;AACxD,cAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG;cAC/C,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG;UAClC,KAAK;IAET,QACE,gCACE,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,SAAS,EAAE;AAClD,YAAA,mBAAmB,EAAE,eAAe;YACpC,SAAS,EAAE,CAAC,CAAC,UAAU;YACvB,QAAQ;AACR,YAAA,0BAA0B,EAAE,OAAO;SACpC,CAAC,EAAA;QAEF,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,EAAA;AACzC,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0BAA0B,EAAA,EAAE,QAAQ,CAAO;YACzD,OAAO,KACN,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uCAAuC,EAAA,EAAE,OAAO,CAAO,CACvE,CACG;AACL,QAAA,UAAU,KACT,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,EAAA;AAChD,YAAA,KAAA,CAAA,aAAA,CAAA,0CAAA,EAAA,IAAA,EACG,UAAU,CAC8B,CACvC,CACP,CACM;AAEb;;;;"}
+{"version":3,"file":"PageHeader.js","sources":["../../../src/components/page-header/PageHeader.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport React from \"react\"\n\n/**\n * A page header lays out the primary title, optional navigation, and\n * action buttons at the top of a page. Use one per page to anchor the\n * page's identity and primary controls.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-page-header--docs | Storybook Documentation}\n */\nexport function PageHeader({\n  children,\n  actions,\n  navigation,\n  className,\n  inactive = false,\n  profile = false,\n}: {\n  /**\n   * Actions to be displayed on the right side of the header. Elements\n   * should be styled as buttons.\n   */\n  actions?: React.ReactNode\n  /**\n   * The main content of the page header. It will be displayed prominently. For simple pages, providing a h1 will suffice.\n   */\n  children: React.ReactNode\n  className?: string\n  /**\n   * Indicates whether the page header is inactive or not. When set to true, the page header is visually inactive\n   */\n  inactive?: boolean\n  /**\n   * Navigation links to be displayed on the left side of the header.\n   * Contents should be an unordered list with items being links or\n   * buttons. Specify `selected` for the active link (as well as adding\n   * `aria-current=\"page\"` for accessibility).\n   */\n  navigation?: React.ReactNode\n  /**\n   * Indicates whether the page header is a profile page header or not. When set to true, the page header will visually center the title and actions at mobile breakpoints.\n   */\n  profile?: boolean\n}) {\n  const hasMultiActions = actions\n    ? React.isValidElement(actions) && actions.type === React.Fragment\n      ? React.Children.count(actions.props.children) > 1\n      : React.Children.count(actions) > 1\n    : false\n\n  return (\n    <header\n      className={classNames(\"tds-page-header\", className, {\n        \"has-multi-actions\": hasMultiActions,\n        \"has-nav\": !!navigation,\n        inactive,\n        \"tds-page-header--profile\": profile,\n      })}\n    >\n      <div className=\"tds-page-header__title-bar\">\n        <div className=\"tds-page-header__primary\">{children}</div>\n        {actions && (\n          <div className=\"tds-page-header__actions tds-no-print\">{actions}</div>\n        )}\n      </div>\n      {navigation && (\n        <tds-scroll-to-selected-in-unordered-list>\n          <nav className=\"tds-page-header__nav tds-no-print\">{navigation}</nav>\n        </tds-scroll-to-selected-in-unordered-list>\n      )}\n    </header>\n  )\n}\n"],"names":[],"mappings":";;;AAGA;;;;;;;AAOG;SACa,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,GA2BhB,EAAA;IACC,MAAM,eAAe,GAAG;AACtB,UAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,IAAI,KAAK,KAAK,CAAC;AACxD,cAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG;cAC/C,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG;UAClC,KAAK;IAET,QACE,gCACE,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,SAAS,EAAE;AAClD,YAAA,mBAAmB,EAAE,eAAe;YACpC,SAAS,EAAE,CAAC,CAAC,UAAU;YACvB,QAAQ;AACR,YAAA,0BAA0B,EAAE,OAAO;SACpC,CAAC,EAAA;QAEF,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,EAAA;AACzC,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0BAA0B,EAAA,EAAE,QAAQ,CAAO;YACzD,OAAO,KACN,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uCAAuC,EAAA,EAAE,OAAO,CAAO,CACvE,CACG;AACL,QAAA,UAAU,KACT,KAAA,CAAA,aAAA,CAAA,0CAAA,EAAA,IAAA;YACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,EAAA,EAAE,UAAU,CAAO,CAC5B,CAC5C,CACM;AAEb;;;;"}

package/dist/components/page-header/tds-scroll-to-selected-in-unordered-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tds-scroll-to-selected-in-unordered-list.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/tds-scroll-to-selected-in-unordered-list.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAsC9B,OAAO,CAAC,MAAM,CAAC;IAEb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,0CAA0C,EAAE,KAAK,CAAC,iBAAiB,CACjE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG;gBAAE,KAAK,CAAC,EAAE,MAAM,CAAA;aAAE,EACtD,WAAW,CACZ,CAAA;SACF;KACF;CACF"}
+{"version":3,"file":"tds-scroll-to-selected-in-unordered-list.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/tds-scroll-to-selected-in-unordered-list.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AA4C9B,OAAO,CAAC,MAAM,CAAC;IAEb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,0CAA0C,EAAE,KAAK,CAAC,iBAAiB,CACjE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG;gBAAE,KAAK,CAAC,EAAE,MAAM,CAAA;aAAE,EACtD,WAAW,CACZ,CAAA;SACF;KACF;CACF"}

package/dist/components/page-header/tds-scroll-to-selected-in-unordered-list.js

@@ -3,14 +3,19 @@
  *
  * Usage:
  *   <tds-scroll-to-selected-in-unordered-list>
- *     <ul>
- *       <li><a class="selected">Item</a></li>
- *     </ul>
+ *     <nav>
+ *       <ul>
+ *         <li><a class="selected">Item</a></li>
+ *       </ul>
+ *     </nav>
  *   </tds-scroll-to-selected-in-unordered-list>
  */
 if (typeof HTMLElement !== "undefined") {
     class TdsScrollToSelectedInUnorderedList extends HTMLElement {
         connectedCallback() {
+            requestAnimationFrame(() => this.scrollToSelected());
+        }
+        scrollToSelected() {
             const ulElement = this.querySelector("ul");
             if (!ulElement)
                 return;

package/dist/components/page-header/tds-scroll-to-selected-in-unordered-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"tds-scroll-to-selected-in-unordered-list.js","sources":["../../../src/components/page-header/tds-scroll-to-selected-in-unordered-list.ts"],"sourcesContent":["import type React from \"react\"\n\n/**\n * A custom element that scrolls its child element with the class \"selected\" into view.\n *\n * Usage:\n *   <tds-scroll-to-selected-in-unordered-list>\n *     <ul>\n *       <li><a class=\"selected\">Item</a></li>\n *     </ul>\n *   </tds-scroll-to-selected-in-unordered-list>\n */\nif (typeof HTMLElement !== \"undefined\") {\n  class TdsScrollToSelectedInUnorderedList extends HTMLElement {\n    connectedCallback() {\n      const ulElement = this.querySelector(\"ul\")\n      if (!ulElement) return\n      const selectedItem = ulElement.querySelector(\".selected\")\n      if (selectedItem) {\n        const bounds = selectedItem.getBoundingClientRect()\n        const ulBounds = ulElement.getBoundingClientRect()\n        if (bounds.right > ulBounds.right || bounds.left < ulBounds.left) {\n          ulElement.scrollTo({\n            left: ulElement.scrollLeft + bounds.left - ulBounds.left,\n          })\n        }\n      }\n    }\n  }\n\n  if (!customElements.get(\"tds-scroll-to-selected-in-unordered-list\")) {\n    customElements.define(\n      \"tds-scroll-to-selected-in-unordered-list\",\n      TdsScrollToSelectedInUnorderedList\n    )\n  }\n}\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      \"tds-scroll-to-selected-in-unordered-list\": React.DetailedHTMLProps<\n        React.HTMLAttributes<HTMLElement> & { value?: string },\n        HTMLElement\n      >\n    }\n  }\n}\n"],"names":[],"mappings":"AAEA;;;;;;;;;AASG;AACH,IAAI,OAAO,WAAW,KAAK,WAAW,EAAE;IACtC,MAAM,kCAAmC,SAAQ,WAAW,CAAA;QAC1D,iBAAiB,GAAA;YACf,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;AAC1C,YAAA,IAAI,CAAC,SAAS;gBAAE;YAChB,MAAM,YAAY,GAAG,SAAS,CAAC,aAAa,CAAC,WAAW,CAAC;YACzD,IAAI,YAAY,EAAE;AAChB,gBAAA,MAAM,MAAM,GAAG,YAAY,CAAC,qBAAqB,EAAE;AACnD,gBAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,qBAAqB,EAAE;AAClD,gBAAA,IAAI,MAAM,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,IAAI,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,EAAE;oBAChE,SAAS,CAAC,QAAQ,CAAC;wBACjB,IAAI,EAAE,SAAS,CAAC,UAAU,GAAG,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI;AACzD,qBAAA,CAAC;gBACJ;YACF;QACF;AACD;IAED,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,0CAA0C,CAAC,EAAE;AACnE,QAAA,cAAc,CAAC,MAAM,CACnB,0CAA0C,EAC1C,kCAAkC,CACnC;IACH;AACF"}
+{"version":3,"file":"tds-scroll-to-selected-in-unordered-list.js","sources":["../../../src/components/page-header/tds-scroll-to-selected-in-unordered-list.ts"],"sourcesContent":["import type React from \"react\"\n\n/**\n * A custom element that scrolls its child element with the class \"selected\" into view.\n *\n * Usage:\n *   <tds-scroll-to-selected-in-unordered-list>\n *     <nav>\n *       <ul>\n *         <li><a class=\"selected\">Item</a></li>\n *       </ul>\n *     </nav>\n *   </tds-scroll-to-selected-in-unordered-list>\n */\nif (typeof HTMLElement !== \"undefined\") {\n  class TdsScrollToSelectedInUnorderedList extends HTMLElement {\n    connectedCallback() {\n      requestAnimationFrame(() => this.scrollToSelected())\n    }\n\n    scrollToSelected() {\n      const ulElement = this.querySelector(\"ul\")\n      if (!ulElement) return\n      const selectedItem = ulElement.querySelector(\".selected\")\n      if (selectedItem) {\n        const bounds = selectedItem.getBoundingClientRect()\n        const ulBounds = ulElement.getBoundingClientRect()\n        if (bounds.right > ulBounds.right || bounds.left < ulBounds.left) {\n          ulElement.scrollTo({\n            left: ulElement.scrollLeft + bounds.left - ulBounds.left,\n          })\n        }\n      }\n    }\n  }\n\n  if (!customElements.get(\"tds-scroll-to-selected-in-unordered-list\")) {\n    customElements.define(\n      \"tds-scroll-to-selected-in-unordered-list\",\n      TdsScrollToSelectedInUnorderedList\n    )\n  }\n}\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      \"tds-scroll-to-selected-in-unordered-list\": React.DetailedHTMLProps<\n        React.HTMLAttributes<HTMLElement> & { value?: string },\n        HTMLElement\n      >\n    }\n  }\n}\n"],"names":[],"mappings":"AAEA;;;;;;;;;;;AAWG;AACH,IAAI,OAAO,WAAW,KAAK,WAAW,EAAE;IACtC,MAAM,kCAAmC,SAAQ,WAAW,CAAA;QAC1D,iBAAiB,GAAA;YACf,qBAAqB,CAAC,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACtD;QAEA,gBAAgB,GAAA;YACd,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;AAC1C,YAAA,IAAI,CAAC,SAAS;gBAAE;YAChB,MAAM,YAAY,GAAG,SAAS,CAAC,aAAa,CAAC,WAAW,CAAC;YACzD,IAAI,YAAY,EAAE;AAChB,gBAAA,MAAM,MAAM,GAAG,YAAY,CAAC,qBAAqB,EAAE;AACnD,gBAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,qBAAqB,EAAE;AAClD,gBAAA,IAAI,MAAM,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,IAAI,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,EAAE;oBAChE,SAAS,CAAC,QAAQ,CAAC;wBACjB,IAAI,EAAE,SAAS,CAAC,UAAU,GAAG,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI;AACzD,qBAAA,CAAC;gBACJ;YACF;QACF;AACD;IAED,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,0CAA0C,CAAC,EAAE;AACnE,QAAA,cAAc,CAAC,MAAM,CACnB,0CAA0C,EAC1C,kCAAkC,CACnC;IACH;AACF"}

package/dist/index.css

@@ -5029,6 +5029,8 @@ a.tds-dropdown-item:is(:hover, :active){
     position:sticky;
     bottom:0;
     background:var(--t-surface-color-card);
+    border-end-start-radius:var(--t-border-radius-lg);
+    border-end-end-radius:var(--t-border-radius-lg);
   }
 }