@planningcenter/tapestry 3.3.2-qa-889.0 → 3.4.1-qa-897.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (149) hide show
  1. package/dist/components/button/Button.d.ts +1 -0
  2. package/dist/components/button/Button.d.ts.map +1 -1
  3. package/dist/components/button/Button.js +1 -0
  4. package/dist/components/button/Button.js.map +1 -1
  5. package/dist/components/button/DropdownButton.d.ts +18 -4
  6. package/dist/components/button/DropdownButton.d.ts.map +1 -1
  7. package/dist/components/button/DropdownButton.js +7 -0
  8. package/dist/components/button/DropdownButton.js.map +1 -1
  9. package/dist/components/button/DropdownIconButton.d.ts +8 -0
  10. package/dist/components/button/DropdownIconButton.d.ts.map +1 -1
  11. package/dist/components/button/DropdownIconButton.js +8 -0
  12. package/dist/components/button/DropdownIconButton.js.map +1 -1
  13. package/dist/components/button/IconButton.d.ts +1 -0
  14. package/dist/components/button/IconButton.d.ts.map +1 -1
  15. package/dist/components/button/IconButton.js +1 -0
  16. package/dist/components/button/IconButton.js.map +1 -1
  17. package/dist/components/button/LoadingButton.d.ts +1 -0
  18. package/dist/components/button/LoadingButton.d.ts.map +1 -1
  19. package/dist/components/button/LoadingButton.js +1 -0
  20. package/dist/components/button/LoadingButton.js.map +1 -1
  21. package/dist/components/button/PageHeaderActionsDropdownButton.d.ts +8 -0
  22. package/dist/components/button/PageHeaderActionsDropdownButton.d.ts.map +1 -1
  23. package/dist/components/button/PageHeaderActionsDropdownButton.js +8 -0
  24. package/dist/components/button/PageHeaderActionsDropdownButton.js.map +1 -1
  25. package/dist/components/checkbox/Checkbox.d.ts +1 -0
  26. package/dist/components/checkbox/Checkbox.d.ts.map +1 -1
  27. package/dist/components/checkbox/Checkbox.js +1 -0
  28. package/dist/components/checkbox/Checkbox.js.map +1 -1
  29. package/dist/components/combo-box/ComboBox.d.ts +12 -2
  30. package/dist/components/combo-box/ComboBox.d.ts.map +1 -1
  31. package/dist/components/combo-box/ComboBox.js +6 -2
  32. package/dist/components/combo-box/ComboBox.js.map +1 -1
  33. package/dist/components/date-picker/DatePicker.d.ts +1 -1
  34. package/dist/components/date-picker/DatePicker.d.ts.map +1 -1
  35. package/dist/components/date-picker/DatePicker.js +12 -9
  36. package/dist/components/date-picker/DatePicker.js.map +1 -1
  37. package/dist/components/dropdown/Dropdown.d.ts +155 -0
  38. package/dist/components/dropdown/Dropdown.d.ts.map +1 -0
  39. package/dist/components/dropdown/Dropdown.js +103 -0
  40. package/dist/components/dropdown/Dropdown.js.map +1 -0
  41. package/dist/components/dropdown/index.d.ts +4 -0
  42. package/dist/components/dropdown/index.d.ts.map +1 -0
  43. package/dist/components/input/Input.d.ts +9 -0
  44. package/dist/components/input/Input.d.ts.map +1 -1
  45. package/dist/components/input/Input.js +9 -0
  46. package/dist/components/input/Input.js.map +1 -1
  47. package/dist/components/link/IconLink.d.ts +7 -0
  48. package/dist/components/link/IconLink.d.ts.map +1 -1
  49. package/dist/components/link/IconLink.js +7 -0
  50. package/dist/components/link/IconLink.js.map +1 -1
  51. package/dist/components/link/Link.d.ts +8 -0
  52. package/dist/components/link/Link.d.ts.map +1 -1
  53. package/dist/components/link/Link.js +8 -0
  54. package/dist/components/link/Link.js.map +1 -1
  55. package/dist/components/number-stepper/NumberStepper.d.ts +1 -1
  56. package/dist/components/number-stepper/NumberStepper.d.ts.map +1 -1
  57. package/dist/components/number-stepper/NumberStepper.js +1 -1
  58. package/dist/components/number-stepper/NumberStepper.js.map +1 -1
  59. package/dist/components/page-header/PageHeader.d.ts +8 -0
  60. package/dist/components/page-header/PageHeader.d.ts.map +1 -1
  61. package/dist/components/page-header/PageHeader.js +8 -0
  62. package/dist/components/page-header/PageHeader.js.map +1 -1
  63. package/dist/components/radio/Radio.d.ts +1 -0
  64. package/dist/components/radio/Radio.d.ts.map +1 -1
  65. package/dist/components/radio/Radio.js +1 -0
  66. package/dist/components/radio/Radio.js.map +1 -1
  67. package/dist/components/radio-group/RadioGroup.d.ts +1 -0
  68. package/dist/components/radio-group/RadioGroup.d.ts.map +1 -1
  69. package/dist/components/radio-group/RadioGroup.js +1 -0
  70. package/dist/components/radio-group/RadioGroup.js.map +1 -1
  71. package/dist/components/select/Select.d.ts +9 -0
  72. package/dist/components/select/Select.d.ts.map +1 -1
  73. package/dist/components/select/Select.js +9 -0
  74. package/dist/components/select/Select.js.map +1 -1
  75. package/dist/components/select/SelectNative.d.ts +10 -0
  76. package/dist/components/select/SelectNative.d.ts.map +1 -1
  77. package/dist/components/select/SelectNative.js +10 -0
  78. package/dist/components/select/SelectNative.js.map +1 -1
  79. package/dist/components/select/SelectPopover.d.ts +10 -0
  80. package/dist/components/select/SelectPopover.d.ts.map +1 -1
  81. package/dist/components/select/SelectPopover.js +10 -0
  82. package/dist/components/select/SelectPopover.js.map +1 -1
  83. package/dist/components/sidenav/Sidenav.d.ts +3 -0
  84. package/dist/components/sidenav/Sidenav.d.ts.map +1 -1
  85. package/dist/components/sidenav/Sidenav.js +3 -0
  86. package/dist/components/sidenav/Sidenav.js.map +1 -1
  87. package/dist/components/sidenav/SidenavItem.d.ts +3 -0
  88. package/dist/components/sidenav/SidenavItem.d.ts.map +1 -1
  89. package/dist/components/sidenav/SidenavItem.js +3 -0
  90. package/dist/components/sidenav/SidenavItem.js.map +1 -1
  91. package/dist/components/sidenav/SidenavSection.d.ts +3 -0
  92. package/dist/components/sidenav/SidenavSection.d.ts.map +1 -1
  93. package/dist/components/sidenav/SidenavSection.js +3 -0
  94. package/dist/components/sidenav/SidenavSection.js.map +1 -1
  95. package/dist/components/text-area/TextArea.d.ts +8 -0
  96. package/dist/components/text-area/TextArea.d.ts.map +1 -1
  97. package/dist/components/text-area/TextArea.js +8 -0
  98. package/dist/components/text-area/TextArea.js.map +1 -1
  99. package/dist/components/time-field/TimeField.d.ts +1 -1
  100. package/dist/components/time-field/TimeField.d.ts.map +1 -1
  101. package/dist/components/time-field/TimeField.js +1 -1
  102. package/dist/components/time-field/TimeField.js.map +1 -1
  103. package/dist/components/toggle-switch/ToggleSwitch.d.ts +3 -0
  104. package/dist/components/toggle-switch/ToggleSwitch.d.ts.map +1 -1
  105. package/dist/components/toggle-switch/ToggleSwitch.js +3 -0
  106. package/dist/components/toggle-switch/ToggleSwitch.js.map +1 -1
  107. package/dist/ext/@internationalized/date/dist/{CalendarDate.js → private/CalendarDate.js} +74 -88
  108. package/dist/ext/@internationalized/date/dist/private/CalendarDate.js.map +1 -0
  109. package/dist/ext/@internationalized/date/dist/{GregorianCalendar.js → private/calendars/GregorianCalendar.js} +26 -26
  110. package/dist/ext/@internationalized/date/dist/private/calendars/GregorianCalendar.js.map +1 -0
  111. package/dist/ext/@internationalized/date/dist/{conversion.js → private/conversion.js} +55 -55
  112. package/dist/ext/@internationalized/date/dist/private/conversion.js.map +1 -0
  113. package/dist/ext/@internationalized/date/dist/{manipulation.js → private/manipulation.js} +88 -91
  114. package/dist/ext/@internationalized/date/dist/private/manipulation.js.map +1 -0
  115. package/dist/ext/@internationalized/date/dist/private/queries.js +32 -0
  116. package/dist/ext/@internationalized/date/dist/private/queries.js.map +1 -0
  117. package/dist/ext/@internationalized/date/dist/private/string.js +51 -0
  118. package/dist/ext/@internationalized/date/dist/private/string.js.map +1 -0
  119. package/dist/ext/@internationalized/date/dist/{utils.js → private/utils.js} +2 -2
  120. package/dist/ext/@internationalized/date/dist/private/utils.js.map +1 -0
  121. package/dist/index.css +47 -42
  122. package/dist/index.css.map +1 -1
  123. package/dist/product-tokens/home.css +1 -0
  124. package/dist/reactRender.css +1390 -1260
  125. package/dist/reactRender.css.map +1 -1
  126. package/dist/reactRenderLegacy.css +1390 -1260
  127. package/dist/reactRenderLegacy.css.map +1 -1
  128. package/dist/tokens.css +8 -7
  129. package/dist/tokens.css.map +1 -1
  130. package/dist/unstable.css +172 -42
  131. package/dist/unstable.css.map +1 -1
  132. package/dist/unstable.d.ts +1 -0
  133. package/dist/unstable.d.ts.map +1 -1
  134. package/dist/unstable.js +1 -0
  135. package/dist/unstable.js.map +1 -1
  136. package/package.json +6 -6
  137. package/dist/ext/@internationalized/date/dist/CalendarDate.js.map +0 -1
  138. package/dist/ext/@internationalized/date/dist/GregorianCalendar.js.map +0 -1
  139. package/dist/ext/@internationalized/date/dist/conversion.js.map +0 -1
  140. package/dist/ext/@internationalized/date/dist/manipulation.js.map +0 -1
  141. package/dist/ext/@internationalized/date/dist/queries.js +0 -34
  142. package/dist/ext/@internationalized/date/dist/queries.js.map +0 -1
  143. package/dist/ext/@internationalized/date/dist/string.js +0 -51
  144. package/dist/ext/@internationalized/date/dist/string.js.map +0 -1
  145. package/dist/ext/@internationalized/date/dist/utils.js.map +0 -1
  146. package/dist/ext/@swc/helpers/esm/_check_private_redeclaration.js +0 -8
  147. package/dist/ext/@swc/helpers/esm/_check_private_redeclaration.js.map +0 -1
  148. package/dist/ext/@swc/helpers/esm/_class_private_field_init.js +0 -9
  149. package/dist/ext/@swc/helpers/esm/_class_private_field_init.js.map +0 -1
@@ -11,6 +11,7 @@ export type ButtonElementProps = Omit<BaseButtonElementProps, "label"> & {
11
11
  * Label must be a string.
12
12
  *
13
13
  * @component
14
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-button--docs | Storybook Documentation}
14
15
  */
15
16
  export declare const Button: React.ForwardRefExoticComponent<Omit<BaseButtonElementProps, "label"> & {
16
17
  /** The text content of the button. */
@@ -1 +1 @@
1
- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAA;AAElB,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAc,sBAAsB,EAAE,MAAM,cAAc,CAAA;AAEjE,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,sBAAsB,EAAE,OAAO,CAAC,GAAG;IACvE,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;IAXjB,sCAAsC;WAC/B,MAAM;2CAcd,CAAA"}
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAA;AAElB,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAc,sBAAsB,EAAE,MAAM,cAAc,CAAA;AAEjE,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,sBAAsB,EAAE,OAAO,CAAC,GAAG;IACvE,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM;IAZjB,sCAAsC;WAC/B,MAAM;2CAed,CAAA"}
@@ -7,6 +7,7 @@ import { BaseButton } from './BaseButton.js';
7
7
  * Label must be a string.
8
8
  *
9
9
  * @component
10
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-button--docs | Storybook Documentation}
10
11
  */
11
12
  const Button = forwardRef((props, ref) => {
12
13
  return React__default.createElement(BaseButton, { ...props, ref: ref });
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type ButtonElementProps = Omit<BaseButtonElementProps, \"label\"> & {\n /** The text content of the button. */\n label: string\n}\n\n/**\n * A button component that renders as a button element.\n * Supports various sizes, styles, and content types.\n * Label must be a string.\n *\n * @component\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonElementProps>(\n (props, ref) => {\n return <BaseButton {...props} ref={ref} />\n }\n)\n\nButton.displayName = \"Button\"\n"],"names":["React"],"mappings":";;;AAWA;;;;;;AAMG;AACI,MAAM,MAAM,GAAG,UAAU,CAC9B,CAAC,KAAK,EAAE,GAAG,KAAI;IACb,OAAOA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAA,GAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAA,CAAI;AAC5C,CAAC;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
1
+ {"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type ButtonElementProps = Omit<BaseButtonElementProps, \"label\"> & {\n /** The text content of the button. */\n label: string\n}\n\n/**\n * A button component that renders as a button element.\n * Supports various sizes, styles, and content types.\n * Label must be a string.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-button--docs | Storybook Documentation}\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonElementProps>(\n (props, ref) => {\n return <BaseButton {...props} ref={ref} />\n }\n)\n\nButton.displayName = \"Button\"\n"],"names":["React"],"mappings":";;;AAWA;;;;;;;AAOG;AACI,MAAM,MAAM,GAAG,UAAU,CAC9B,CAAC,KAAK,EAAE,GAAG,KAAI;IACb,OAAOA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAA,GAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAA,CAAI;AAC5C,CAAC;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
@@ -1,10 +1,17 @@
1
1
  import "./btn.css";
2
2
  import React from "react";
3
3
  export type DropdownButtonProps = {
4
- /** ID of the element controlled by this dropdown button. */
5
- "aria-controls": string;
6
- /** Whether the dropdown is expanded or not. */
7
- "aria-expanded": boolean;
4
+ /**
5
+ * ID of the element controlled by this dropdown button. Optional when wrapped
6
+ * in `<DropdownTrigger>` (RA's `<Pressable>` injects it from
7
+ * `PressResponderContext`); required when used standalone to drive a custom popover.
8
+ */
9
+ "aria-controls"?: string;
10
+ /**
11
+ * Whether the dropdown is expanded or not. Optional when wrapped in
12
+ * `<DropdownTrigger>`; required when used standalone.
13
+ */
14
+ "aria-expanded"?: boolean;
8
15
  suffix?: never;
9
16
  };
10
17
  export declare function dropdownProps({ className }: {
@@ -13,5 +20,12 @@ export declare function dropdownProps({ className }: {
13
20
  className: string;
14
21
  suffix: React.JSX.Element;
15
22
  };
23
+ /**
24
+ * A button that toggles a dropdown menu or popover. Appends a caret suffix
25
+ * and wires up `aria-controls` and `aria-expanded` to the controlled element.
26
+ *
27
+ * @component
28
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-button-dropdown-button--docs | Storybook Documentation}
29
+ */
16
30
  export declare const DropdownButton: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof import("./BaseButton").BaseButtonProps | "children"> & import("./BaseButton").BaseButtonProps & DropdownButtonProps & React.RefAttributes<HTMLButtonElement>>;
17
31
  //# sourceMappingURL=DropdownButton.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/DropdownButton.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAA;AAIlB,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,MAAM,MAAM,mBAAmB,GAAG;IAChC,4DAA4D;IAC5D,eAAe,EAAE,MAAM,CAAA;IACvB,+CAA+C;IAC/C,eAAe,EAAE,OAAO,CAAA;IACxB,MAAM,CAAC,EAAE,KAAK,CAAA;CACf,CAAA;AAED,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE;;;EAKlE;AAED,eAAO,MAAM,cAAc,yPAKzB,CAAA"}
1
+ {"version":3,"file":"DropdownButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/DropdownButton.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAA;AAIlB,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,MAAM,CAAC,EAAE,KAAK,CAAA;CACf,CAAA;AAED,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE;;;EAKlE;AAED;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,yPAKzB,CAAA"}
@@ -9,6 +9,13 @@ function dropdownProps({ className }) {
9
9
  suffix: React__default.createElement(Icon, { symbol: "general#down-caret", "aria-hidden": true }),
10
10
  };
11
11
  }
12
+ /**
13
+ * A button that toggles a dropdown menu or popover. Appends a caret suffix
14
+ * and wires up `aria-controls` and `aria-expanded` to the controlled element.
15
+ *
16
+ * @component
17
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-button-dropdown-button--docs | Storybook Documentation}
18
+ */
12
19
  const DropdownButton = forwardRef((props, ref) => {
13
20
  return React__default.createElement(BaseButton, { ref: ref, ...props, ...dropdownProps(props) });
14
21
  });
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownButton.js","sources":["../../../src/components/button/DropdownButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type DropdownButtonProps = {\n /** ID of the element controlled by this dropdown button. */\n \"aria-controls\": string\n /** Whether the dropdown is expanded or not. */\n \"aria-expanded\": boolean\n suffix?: never\n}\n\nexport function dropdownProps({ className }: { className?: string }) {\n return {\n className: classNames(className, \"tds-btn--dropdown\"),\n suffix: <Icon symbol=\"general#down-caret\" aria-hidden />,\n }\n}\n\nexport const DropdownButton = forwardRef<\n HTMLButtonElement,\n BaseButtonElementProps & DropdownButtonProps\n>((props, ref) => {\n return <BaseButton ref={ref} {...props} {...dropdownProps(props)} />\n})\n\nDropdownButton.displayName = \"DropdownButton\"\n"],"names":["React"],"mappings":";;;;;AAgBM,SAAU,aAAa,CAAC,EAAE,SAAS,EAA0B,EAAA;IACjE,OAAO;AACL,QAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,mBAAmB,CAAC;AACrD,QAAA,MAAM,EAAEA,cAAA,CAAA,aAAA,CAAC,IAAI,IAAC,MAAM,EAAC,oBAAoB,EAAA,aAAA,EAAA,IAAA,EAAA,CAAe;KACzD;AACH;AAEO,MAAM,cAAc,GAAG,UAAU,CAGtC,CAAC,KAAK,EAAE,GAAG,KAAI;AACf,IAAA,OAAOA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA,GAAM,KAAK,EAAA,GAAM,aAAa,CAAC,KAAK,CAAC,GAAI;AACtE,CAAC;AAED,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}
1
+ {"version":3,"file":"DropdownButton.js","sources":["../../../src/components/button/DropdownButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type DropdownButtonProps = {\n /**\n * ID of the element controlled by this dropdown button. Optional when wrapped\n * in `<DropdownTrigger>` (RA's `<Pressable>` injects it from\n * `PressResponderContext`); required when used standalone to drive a custom popover.\n */\n \"aria-controls\"?: string\n /**\n * Whether the dropdown is expanded or not. Optional when wrapped in\n * `<DropdownTrigger>`; required when used standalone.\n */\n \"aria-expanded\"?: boolean\n suffix?: never\n}\n\nexport function dropdownProps({ className }: { className?: string }) {\n return {\n className: classNames(className, \"tds-btn--dropdown\"),\n suffix: <Icon symbol=\"general#down-caret\" aria-hidden />,\n }\n}\n\n/**\n * A button that toggles a dropdown menu or popover. Appends a caret suffix\n * and wires up `aria-controls` and `aria-expanded` to the controlled element.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-button-dropdown-button--docs | Storybook Documentation}\n */\nexport const DropdownButton = forwardRef<\n HTMLButtonElement,\n BaseButtonElementProps & DropdownButtonProps\n>((props, ref) => {\n return <BaseButton ref={ref} {...props} {...dropdownProps(props)} />\n})\n\nDropdownButton.displayName = \"DropdownButton\"\n"],"names":["React"],"mappings":";;;;;AAuBM,SAAU,aAAa,CAAC,EAAE,SAAS,EAA0B,EAAA;IACjE,OAAO;AACL,QAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,mBAAmB,CAAC;AACrD,QAAA,MAAM,EAAEA,cAAA,CAAA,aAAA,CAAC,IAAI,IAAC,MAAM,EAAC,oBAAoB,EAAA,aAAA,EAAA,IAAA,EAAA,CAAe;KACzD;AACH;AAEA;;;;;;AAMG;AACI,MAAM,cAAc,GAAG,UAAU,CAGtC,CAAC,KAAK,EAAE,GAAG,KAAI;AACf,IAAA,OAAOA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA,GAAM,KAAK,EAAA,GAAM,aAAa,CAAC,KAAK,CAAC,GAAI;AACtE,CAAC;AAED,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}
@@ -1,5 +1,13 @@
1
1
  import React from "react";
2
2
  import { DropdownButtonProps } from "./DropdownButton";
3
+ /**
4
+ * An icon-only button that toggles a dropdown menu or popover. Appends a
5
+ * caret suffix to the icon and wires up `aria-controls` and `aria-expanded`
6
+ * to the controlled element. Requires an `aria-label` for accessibility.
7
+ *
8
+ * @component
9
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-button-dropdown-icon-button--docs | Storybook Documentation}
10
+ */
3
11
  export declare const DropdownIconButton: React.ForwardRefExoticComponent<Omit<import("./BaseButton").BaseButtonElementProps, "label"> & {
4
12
  "aria-label": string;
5
13
  icon: React.ReactNode;
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownIconButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/DropdownIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,mBAAmB,EAAiB,MAAM,kBAAkB,CAAA;AAGrE,eAAO,MAAM,kBAAkB;;;iEAK7B,CAAA"}
1
+ {"version":3,"file":"DropdownIconButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/DropdownIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,mBAAmB,EAAiB,MAAM,kBAAkB,CAAA;AAGrE;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB;;;iEAK7B,CAAA"}
@@ -2,6 +2,14 @@ import React__default, { forwardRef } from 'react';
2
2
  import { dropdownProps } from './DropdownButton.js';
3
3
  import { IconButton } from './IconButton.js';
4
4
 
5
+ /**
6
+ * An icon-only button that toggles a dropdown menu or popover. Appends a
7
+ * caret suffix to the icon and wires up `aria-controls` and `aria-expanded`
8
+ * to the controlled element. Requires an `aria-label` for accessibility.
9
+ *
10
+ * @component
11
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-button-dropdown-icon-button--docs | Storybook Documentation}
12
+ */
5
13
  const DropdownIconButton = forwardRef((props, ref) => {
6
14
  return React__default.createElement(IconButton, { ref: ref, ...props, ...dropdownProps(props) });
7
15
  });
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownIconButton.js","sources":["../../../src/components/button/DropdownIconButton.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\"\n\nimport { DropdownButtonProps, dropdownProps } from \"./DropdownButton\"\nimport { IconButton, IconButtonProps } from \"./IconButton\"\n\nexport const DropdownIconButton = forwardRef<\n HTMLButtonElement,\n IconButtonProps & DropdownButtonProps\n>((props, ref) => {\n return <IconButton ref={ref} {...props} {...dropdownProps(props)} />\n})\n\nDropdownIconButton.displayName = \"DropdownIconButton\"\n"],"names":["React"],"mappings":";;;;AAKO,MAAM,kBAAkB,GAAG,UAAU,CAG1C,CAAC,KAAK,EAAE,GAAG,KAAI;AACf,IAAA,OAAOA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA,GAAM,KAAK,EAAA,GAAM,aAAa,CAAC,KAAK,CAAC,GAAI;AACtE,CAAC;AAED,kBAAkB,CAAC,WAAW,GAAG,oBAAoB;;;;"}
1
+ {"version":3,"file":"DropdownIconButton.js","sources":["../../../src/components/button/DropdownIconButton.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\"\n\nimport { DropdownButtonProps, dropdownProps } from \"./DropdownButton\"\nimport { IconButton, IconButtonProps } from \"./IconButton\"\n\n/**\n * An icon-only button that toggles a dropdown menu or popover. Appends a\n * caret suffix to the icon and wires up `aria-controls` and `aria-expanded`\n * to the controlled element. Requires an `aria-label` for accessibility.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-button-dropdown-icon-button--docs | Storybook Documentation}\n */\nexport const DropdownIconButton = forwardRef<\n HTMLButtonElement,\n IconButtonProps & DropdownButtonProps\n>((props, ref) => {\n return <IconButton ref={ref} {...props} {...dropdownProps(props)} />\n})\n\nDropdownIconButton.displayName = \"DropdownIconButton\"\n"],"names":["React"],"mappings":";;;;AAKA;;;;;;;AAOG;AACI,MAAM,kBAAkB,GAAG,UAAU,CAG1C,CAAC,KAAK,EAAE,GAAG,KAAI;AACf,IAAA,OAAOA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA,GAAM,KAAK,EAAA,GAAM,aAAa,CAAC,KAAK,CAAC,GAAI;AACtE,CAAC;AAED,kBAAkB,CAAC,WAAW,GAAG,oBAAoB;;;;"}
@@ -12,6 +12,7 @@ export type IconButtonProps = Omit<BaseButtonElementProps, "label"> & {
12
12
  * Requires an icon and aria-label for accessibility.
13
13
  *
14
14
  * @component
15
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-button-icon-button--docs | Storybook Documentation}
15
16
  */
16
17
  export declare const IconButton: React.ForwardRefExoticComponent<Omit<BaseButtonElementProps, "label"> & {
17
18
  /** Accessible label. Required for icon-only buttons to provide context about the button's purpose. */
@@ -1 +1 @@
1
- {"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAA;AAGlB,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAc,sBAAsB,EAAE,MAAM,cAAc,CAAA;AAEjE,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,sBAAsB,EAAE,OAAO,CAAC,GAAG;IACpE,sGAAsG;IACtG,YAAY,EAAE,MAAM,CAAA;IACpB,sFAAsF;IACtF,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;CACtB,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,UAAU;IAZrB,sGAAsG;kBACxF,MAAM;IACpB,sFAAsF;UAChF,KAAK,CAAC,SAAS;2CAsBtB,CAAA"}
1
+ {"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAA;AAGlB,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAc,sBAAsB,EAAE,MAAM,cAAc,CAAA;AAEjE,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,sBAAsB,EAAE,OAAO,CAAC,GAAG;IACpE,sGAAsG;IACtG,YAAY,EAAE,MAAM,CAAA;IACpB,sFAAsF;IACtF,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;CACtB,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,UAAU;IAbrB,sGAAsG;kBACxF,MAAM;IACpB,sFAAsF;UAChF,KAAK,CAAC,SAAS;2CAuBtB,CAAA"}
@@ -7,6 +7,7 @@ import { BaseButton } from './BaseButton.js';
7
7
  * Requires an icon and aria-label for accessibility.
8
8
  *
9
9
  * @component
10
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-button-icon-button--docs | Storybook Documentation}
10
11
  */
11
12
  const IconButton = forwardRef(({ className, icon, ...restProps }, ref) => {
12
13
  const iconOnlyClassName = classNames("tds-btn--icononly", className);
@@ -1 +1 @@
1
- {"version":3,"file":"IconButton.js","sources":["../../../src/components/button/IconButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type IconButtonProps = Omit<BaseButtonElementProps, \"label\"> & {\n /** Accessible label. Required for icon-only buttons to provide context about the button's purpose. */\n \"aria-label\": string\n /** The icon to display in the button. Set via story args for non-primitive values. */\n icon: React.ReactNode\n}\n\n/**\n * An icon-only button component that renders as a button element.\n * Requires an icon and aria-label for accessibility.\n *\n * @component\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n ({ className, icon, ...restProps }: IconButtonProps, ref) => {\n const iconOnlyClassName = classNames(\"tds-btn--icononly\", className)\n\n return (\n <BaseButton\n {...restProps}\n label={icon}\n className={iconOnlyClassName}\n ref={ref}\n />\n )\n }\n)\n\nIconButton.displayName = \"IconButton\"\n"],"names":["React"],"mappings":";;;;AAcA;;;;;AAKG;AACI,MAAM,UAAU,GAAG,UAAU,CAClC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,SAAS,EAAmB,EAAE,GAAG,KAAI;IAC1D,MAAM,iBAAiB,GAAG,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC;AAEpE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,UAAU,OACL,SAAS,EACb,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,CACR;AAEN,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
1
+ {"version":3,"file":"IconButton.js","sources":["../../../src/components/button/IconButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type IconButtonProps = Omit<BaseButtonElementProps, \"label\"> & {\n /** Accessible label. Required for icon-only buttons to provide context about the button's purpose. */\n \"aria-label\": string\n /** The icon to display in the button. Set via story args for non-primitive values. */\n icon: React.ReactNode\n}\n\n/**\n * An icon-only button component that renders as a button element.\n * Requires an icon and aria-label for accessibility.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-button-icon-button--docs | Storybook Documentation}\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n ({ className, icon, ...restProps }: IconButtonProps, ref) => {\n const iconOnlyClassName = classNames(\"tds-btn--icononly\", className)\n\n return (\n <BaseButton\n {...restProps}\n label={icon}\n className={iconOnlyClassName}\n ref={ref}\n />\n )\n }\n)\n\nIconButton.displayName = \"IconButton\"\n"],"names":["React"],"mappings":";;;;AAcA;;;;;;AAMG;AACI,MAAM,UAAU,GAAG,UAAU,CAClC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,SAAS,EAAmB,EAAE,GAAG,KAAI;IAC1D,MAAM,iBAAiB,GAAG,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC;AAEpE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,UAAU,OACL,SAAS,EACb,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,CACR;AAEN,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
@@ -25,6 +25,7 @@ export interface LoadingButtonProps extends BaseButtonElementProps {
25
25
  * <Button loading={true} label="Submit" />
26
26
  *
27
27
  * @component
28
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/deprecated-loadingbutton--docs | Storybook Documentation}
28
29
  */
29
30
  export declare const LoadingButton: React.ForwardRefExoticComponent<LoadingButtonProps & React.RefAttributes<HTMLButtonElement>>;
30
31
  //# sourceMappingURL=LoadingButton.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"LoadingButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/LoadingButton.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAA;AAElB,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAc,sBAAsB,EAAE,MAAM,cAAc,CAAA;AAEjE;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB;IAChE,+GAA+G;IAC/G,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,aAAa,8FAIzB,CAAA"}
1
+ {"version":3,"file":"LoadingButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/LoadingButton.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAA;AAElB,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAc,sBAAsB,EAAE,MAAM,cAAc,CAAA;AAEjE;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB;IAChE,+GAA+G;IAC/G,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,aAAa,8FAIzB,CAAA"}
@@ -16,6 +16,7 @@ import { BaseButton } from './BaseButton.js';
16
16
  * <Button loading={true} label="Submit" />
17
17
  *
18
18
  * @component
19
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/deprecated-loadingbutton--docs | Storybook Documentation}
19
20
  */
20
21
  const LoadingButton = forwardRef((props, ref) => {
21
22
  return React__default.createElement(BaseButton, { ...props, ref: ref });
@@ -1 +1 @@
1
- {"version":3,"file":"LoadingButton.js","sources":["../../../src/components/button/LoadingButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\n/**\n * @deprecated Use ButtonElementProps with loading prop instead. LoadingButton will be removed in a future version.\n */\nexport interface LoadingButtonProps extends BaseButtonElementProps {\n /** Whether the button is in a loading state. When true, the button is disabled and shows a loading spinner. */\n loading?: boolean\n /** Accessible label to use when the button is in loading state. */\n loadingAriaLabel?: string\n}\n\n/**\n * @deprecated Use Button with loading prop instead. LoadingButton will be removed in a future version.\n *\n * A loading button component that shows a loading indicator when the loading prop is true.\n * When loading, the button is automatically disabled and shows a spinner.\n * Supports all BaseButton props including prefix and suffix.\n *\n * @example\n * // Deprecated\n * <LoadingButton loading={true} label=\"Submit\" />\n *\n * // Use this instead:\n * <Button loading={true} label=\"Submit\" />\n *\n * @component\n */\nexport const LoadingButton = forwardRef<HTMLButtonElement, LoadingButtonProps>(\n (props, ref) => {\n return <BaseButton {...props} ref={ref} />\n }\n)\n\nLoadingButton.displayName = \"LoadingButton\"\n"],"names":["React"],"mappings":";;;AAgBA;;;;;;;;;;;;;;;AAeG;AACI,MAAM,aAAa,GAAG,UAAU,CACrC,CAAC,KAAK,EAAE,GAAG,KAAI;IACb,OAAOA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAA,GAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAA,CAAI;AAC5C,CAAC;AAGH,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}
1
+ {"version":3,"file":"LoadingButton.js","sources":["../../../src/components/button/LoadingButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\n/**\n * @deprecated Use ButtonElementProps with loading prop instead. LoadingButton will be removed in a future version.\n */\nexport interface LoadingButtonProps extends BaseButtonElementProps {\n /** Whether the button is in a loading state. When true, the button is disabled and shows a loading spinner. */\n loading?: boolean\n /** Accessible label to use when the button is in loading state. */\n loadingAriaLabel?: string\n}\n\n/**\n * @deprecated Use Button with loading prop instead. LoadingButton will be removed in a future version.\n *\n * A loading button component that shows a loading indicator when the loading prop is true.\n * When loading, the button is automatically disabled and shows a spinner.\n * Supports all BaseButton props including prefix and suffix.\n *\n * @example\n * // Deprecated\n * <LoadingButton loading={true} label=\"Submit\" />\n *\n * // Use this instead:\n * <Button loading={true} label=\"Submit\" />\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/deprecated-loadingbutton--docs | Storybook Documentation}\n */\nexport const LoadingButton = forwardRef<HTMLButtonElement, LoadingButtonProps>(\n (props, ref) => {\n return <BaseButton {...props} ref={ref} />\n }\n)\n\nLoadingButton.displayName = \"LoadingButton\"\n"],"names":["React"],"mappings":";;;AAgBA;;;;;;;;;;;;;;;;AAgBG;AACI,MAAM,aAAa,GAAG,UAAU,CACrC,CAAC,KAAK,EAAE,GAAG,KAAI;IACb,OAAOA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAA,GAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAA,CAAI;AAC5C,CAAC;AAGH,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}
@@ -16,6 +16,14 @@ export declare function needsAttentionProps({ className, needsAttention, }: {
16
16
  className: string | undefined;
17
17
  prefix?: undefined;
18
18
  };
19
+ /**
20
+ * A dropdown button styled for the page header actions area. Renders with
21
+ * the `secondary-page-header` kind and supports an optional `needsAttention`
22
+ * state that adds warning styling and an attention icon.
23
+ *
24
+ * @component
25
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-button-page-header-actions-dropdown-button--docs | Storybook Documentation}
26
+ */
19
27
  export declare const PageHeaderActionsDropdownButton: React.ForwardRefExoticComponent<Omit<BaseButtonElementProps, "kind"> & DropdownButtonProps & {
20
28
  /** Whether the button needs attention. Adds warning styling and attention icon when true. */
21
29
  needsAttention?: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"PageHeaderActionsDropdownButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/PageHeaderActionsDropdownButton.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAA;AAGlB,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAA;AACrD,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtE,MAAM,MAAM,oCAAoC,GAAG,IAAI,CACrD,sBAAsB,EACtB,MAAM,CACP,GACC,mBAAmB,GAAG;IACpB,6FAA6F;IAC7F,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAEH,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,cAAc,GACf,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;;;;;;EAWA;AAED,eAAO,MAAM,+BAA+B;IAvBxC,6FAA6F;qBAC5E,OAAO;2CA2C3B,CAAA"}
1
+ {"version":3,"file":"PageHeaderActionsDropdownButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/PageHeaderActionsDropdownButton.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAA;AAGlB,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAA;AACrD,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtE,MAAM,MAAM,oCAAoC,GAAG,IAAI,CACrD,sBAAsB,EACtB,MAAM,CACP,GACC,mBAAmB,GAAG;IACpB,6FAA6F;IAC7F,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAEH,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,cAAc,GACf,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;;;;;;EAWA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,+BAA+B;IA/BxC,6FAA6F;qBAC5E,OAAO;2CAmD3B,CAAA"}
@@ -12,6 +12,14 @@ function needsAttentionProps({ className, needsAttention, }) {
12
12
  className,
13
13
  };
14
14
  }
15
+ /**
16
+ * A dropdown button styled for the page header actions area. Renders with
17
+ * the `secondary-page-header` kind and supports an optional `needsAttention`
18
+ * state that adds warning styling and an attention icon.
19
+ *
20
+ * @component
21
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-button-page-header-actions-dropdown-button--docs | Storybook Documentation}
22
+ */
15
23
  const PageHeaderActionsDropdownButton = forwardRef(({ className, needsAttention, ...props }, ref) => {
16
24
  return (React__default.createElement(DropdownButton, { ref: ref, ...props, kind: "secondary-page-header", ...needsAttentionProps({ className, needsAttention }) }));
17
25
  });
@@ -1 +1 @@
1
- {"version":3,"file":"PageHeaderActionsDropdownButton.js","sources":["../../../src/components/button/PageHeaderActionsDropdownButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButtonElementProps } from \"./BaseButton\"\nimport { DropdownButton, DropdownButtonProps } from \"./DropdownButton\"\n\nexport type PageHeaderActionsDropdownButtonProps = Omit<\n BaseButtonElementProps,\n \"kind\"\n> &\n DropdownButtonProps & {\n /** Whether the button needs attention. Adds warning styling and attention icon when true. */\n needsAttention?: boolean\n }\n\nexport function needsAttentionProps({\n className,\n needsAttention,\n}: {\n className?: string\n needsAttention?: boolean\n}) {\n return needsAttention\n ? {\n className: classNames(className, \"tds-btn--attention\"),\n prefix: (\n <span className=\"attention-icon\" aria-label=\"Needs attention!\" />\n ),\n }\n : {\n className,\n }\n}\n\nexport const PageHeaderActionsDropdownButton = forwardRef<\n HTMLButtonElement,\n PageHeaderActionsDropdownButtonProps\n>(\n (\n {\n className,\n needsAttention,\n ...props\n }: PageHeaderActionsDropdownButtonProps,\n ref\n ) => {\n return (\n <DropdownButton\n ref={ref}\n {...props}\n kind=\"secondary-page-header\"\n {...needsAttentionProps({ className, needsAttention })}\n />\n )\n }\n)\n\nPageHeaderActionsDropdownButton.displayName = \"PageHeaderActionsDropdownButton\"\n"],"names":["React"],"mappings":";;;;SAiBgB,mBAAmB,CAAC,EAClC,SAAS,EACT,cAAc,GAIf,EAAA;AACC,IAAA,OAAO;AACL,UAAE;AACE,YAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACtD,MAAM,GACJA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,gBAAgB,EAAA,YAAA,EAAY,kBAAkB,EAAA,CAAG,CAClE;AACF;AACH,UAAE;YACE,SAAS;SACV;AACP;AAEO,MAAM,+BAA+B,GAAG,UAAU,CAIvD,CACE,EACE,SAAS,EACT,cAAc,EACd,GAAG,KAAK,EAC6B,EACvC,GAAG,KACD;IACF,QACEA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACb,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EACT,IAAI,EAAC,uBAAuB,EAAA,GACxB,mBAAmB,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC,EAAA,CACtD;AAEN,CAAC;AAGH,+BAA+B,CAAC,WAAW,GAAG,iCAAiC;;;;"}
1
+ {"version":3,"file":"PageHeaderActionsDropdownButton.js","sources":["../../../src/components/button/PageHeaderActionsDropdownButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButtonElementProps } from \"./BaseButton\"\nimport { DropdownButton, DropdownButtonProps } from \"./DropdownButton\"\n\nexport type PageHeaderActionsDropdownButtonProps = Omit<\n BaseButtonElementProps,\n \"kind\"\n> &\n DropdownButtonProps & {\n /** Whether the button needs attention. Adds warning styling and attention icon when true. */\n needsAttention?: boolean\n }\n\nexport function needsAttentionProps({\n className,\n needsAttention,\n}: {\n className?: string\n needsAttention?: boolean\n}) {\n return needsAttention\n ? {\n className: classNames(className, \"tds-btn--attention\"),\n prefix: (\n <span className=\"attention-icon\" aria-label=\"Needs attention!\" />\n ),\n }\n : {\n className,\n }\n}\n\n/**\n * A dropdown button styled for the page header actions area. Renders with\n * the `secondary-page-header` kind and supports an optional `needsAttention`\n * state that adds warning styling and an attention icon.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-button-page-header-actions-dropdown-button--docs | Storybook Documentation}\n */\nexport const PageHeaderActionsDropdownButton = forwardRef<\n HTMLButtonElement,\n PageHeaderActionsDropdownButtonProps\n>(\n (\n {\n className,\n needsAttention,\n ...props\n }: PageHeaderActionsDropdownButtonProps,\n ref\n ) => {\n return (\n <DropdownButton\n ref={ref}\n {...props}\n kind=\"secondary-page-header\"\n {...needsAttentionProps({ className, needsAttention })}\n />\n )\n }\n)\n\nPageHeaderActionsDropdownButton.displayName = \"PageHeaderActionsDropdownButton\"\n"],"names":["React"],"mappings":";;;;SAiBgB,mBAAmB,CAAC,EAClC,SAAS,EACT,cAAc,GAIf,EAAA;AACC,IAAA,OAAO;AACL,UAAE;AACE,YAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACtD,MAAM,GACJA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,gBAAgB,EAAA,YAAA,EAAY,kBAAkB,EAAA,CAAG,CAClE;AACF;AACH,UAAE;YACE,SAAS;SACV;AACP;AAEA;;;;;;;AAOG;AACI,MAAM,+BAA+B,GAAG,UAAU,CAIvD,CACE,EACE,SAAS,EACT,cAAc,EACd,GAAG,KAAK,EAC6B,EACvC,GAAG,KACD;IACF,QACEA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACb,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EACT,IAAI,EAAC,uBAAuB,EAAA,GACxB,mBAAmB,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC,EAAA,CACtD;AAEN,CAAC;AAGH,+BAA+B,CAAC,WAAW,GAAG,iCAAiC;;;;"}
@@ -41,6 +41,7 @@ export type CheckboxElementProps = Omit<InputHTMLAttributes<HTMLInputElement>, k
41
41
  * `<button>`, as well as Tapestry or Tapestry-React interactive components.
42
42
  *
43
43
  * @component
44
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-checkbox--docs | Storybook Documentation}
44
45
  */
45
46
  export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxElementProps & React.RefAttributes<HTMLInputElement>>;
46
47
  export {};
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AACpB,OAAO,qBAAqB,CAAA;AAK5B,OAAO,KAAK,EAAE,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAE9D,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,CAAA;AAEtC,UAAU,iBAAiB;IACzB,uEAAuE;IACvE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,+FAA+F;IAC/F,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,0HAA0H;IAC1H,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gCAAgC;IAChC,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,UAAU,iBAAkB,SAAQ,iBAAiB;IACnD,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB;;;;;OAKG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,UAAU,0BAA2B,SAAQ,iBAAiB;IAC5D,iBAAiB,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG,0BAA0B,CAAA;AAE1E,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,aAAa,GAAG,MAAM,CAC7B,GACC,aAAa,CAAA;AAEf;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,QAAQ,+FAyDpB,CAAA"}
1
+ {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AACpB,OAAO,qBAAqB,CAAA;AAK5B,OAAO,KAAK,EAAE,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAE9D,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,CAAA;AAEtC,UAAU,iBAAiB;IACzB,uEAAuE;IACvE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,+FAA+F;IAC/F,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,0HAA0H;IAC1H,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gCAAgC;IAChC,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,UAAU,iBAAkB,SAAQ,iBAAiB;IACnD,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB;;;;;OAKG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,UAAU,0BAA2B,SAAQ,iBAAiB;IAC5D,iBAAiB,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG,0BAA0B,CAAA;AAE1E,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,aAAa,GAAG,MAAM,CAC7B,GACC,aAAa,CAAA;AAEf;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,QAAQ,+FAyDpB,CAAA"}
@@ -17,6 +17,7 @@ import React__default, { forwardRef } from 'react';
17
17
  * `<button>`, as well as Tapestry or Tapestry-React interactive components.
18
18
  *
19
19
  * @component
20
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-checkbox--docs | Storybook Documentation}
20
21
  */
21
22
  const Checkbox = forwardRef(({ className, description, id, indeterminate = false, invalid, label, size = "md", ...restProps }, ref) => {
22
23
  const combinedClassName = classNames("tds-checkbox", size && size === "sm" && `tds-checkbox--sm`, invalid && "tds-checkbox--invalid", className);
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import \"./index.css\"\nimport \"./tds-indeterminate\"\n\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, InputHTMLAttributes } from \"react\"\n\nexport type CheckboxSize = \"md\" | \"sm\"\n\ninterface CheckboxBaseProps {\n /** Optional description text that appears below the checkbox label. */\n description?: string\n /** Whether the checkbox is in an indeterminate state. If true, checked should also be true. */\n indeterminate?: boolean\n /** Whether the checkbox is in an invalid state. If true, include a description to explain why the checkbox is invalid. */\n invalid?: boolean\n /** The size of the checkbox. */\n size?: CheckboxSize\n}\n\ninterface CheckboxWithLabel extends CheckboxBaseProps {\n \"aria-labelledby\"?: never\n /**\n * Label content for the checkbox. When using non-string content\n * (e.g. JSX), it must not contain interactive elements. This\n * includes native HTML elements such as `<a>` and `<button>`, as\n * well as Tapestry or Tapestry-React interactive components.\n */\n label: React.ReactNode\n}\n\ninterface CheckboxWithAriaLabelledBy extends CheckboxBaseProps {\n \"aria-labelledby\": string\n label?: never\n}\n\nexport type CheckboxProps = CheckboxWithLabel | CheckboxWithAriaLabelledBy\n\nexport type CheckboxElementProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n keyof CheckboxProps | \"type\"\n> &\n CheckboxProps\n\n/**\n * A checkbox component that renders as a checkbox input with label.\n * Supports various sizes, error states, and disabled states.\n *\n * **Required:** You must provide either:\n * - `label` - Label content for the checkbox\n * - `aria-labelledby` - ID of an external element that provides the label\n *\n * When using non-string content for `label` (e.g. JSX), it must not contain\n * interactive elements. This includes native HTML elements such as `<a>` and\n * `<button>`, as well as Tapestry or Tapestry-React interactive components.\n *\n * @component\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxElementProps>(\n (\n {\n className,\n description,\n id,\n indeterminate = false,\n invalid,\n label,\n size = \"md\",\n ...restProps\n }: CheckboxElementProps,\n ref\n ) => {\n const combinedClassName = classNames(\n \"tds-checkbox\",\n size && size === \"sm\" && `tds-checkbox--sm`,\n invalid && \"tds-checkbox--invalid\",\n className\n )\n\n const stableId = useId()\n const checkboxId = id || `tds-checkbox-${stableId}`\n\n const WrapperElement = indeterminate ? \"tds-indeterminate\" : React.Fragment\n\n return (\n <div className={combinedClassName}>\n <WrapperElement>\n <input\n {...restProps}\n aria-describedby={\n description ? `${checkboxId}-description` : undefined\n }\n aria-invalid={invalid}\n id={checkboxId}\n ref={ref}\n type=\"checkbox\"\n />\n </WrapperElement>\n {label && <label htmlFor={checkboxId}>{label}</label>}\n {description && (\n <p\n id={`${checkboxId}-description`}\n className=\"tds-checkbox-description\"\n >\n <Icon\n className=\"tds-checkbox-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n aria-hidden\n />\n {description}\n </p>\n )}\n </div>\n )\n }\n)\n\nCheckbox.displayName = \"Checkbox\"\n"],"names":["React"],"mappings":";;;;;;AA6CA;;;;;;;;;;;;;AAaG;AACI,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,SAAS,EACT,WAAW,EACX,EAAE,EACF,aAAa,GAAG,KAAK,EACrB,OAAO,EACP,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACS,EACvB,GAAG,KACD;IACF,MAAM,iBAAiB,GAAG,UAAU,CAClC,cAAc,EACd,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,CAAA,gBAAA,CAAkB,EAC3C,OAAO,IAAI,uBAAuB,EAClC,SAAS,CACV;AAED,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,UAAU,GAAG,EAAE,IAAI,CAAA,aAAA,EAAgB,QAAQ,EAAE;AAEnD,IAAA,MAAM,cAAc,GAAG,aAAa,GAAG,mBAAmB,GAAGA,cAAK,CAAC,QAAQ;AAE3E,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;AAC/B,QAAAA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,IAAA;AACb,YAAAA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,SAAS,EAAA,kBAAA,EAEX,WAAW,GAAG,CAAA,EAAG,UAAU,CAAA,YAAA,CAAc,GAAG,SAAS,EAAA,cAAA,EAEzC,OAAO,EACrB,EAAE,EAAE,UAAU,EACd,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,EAAA,CACf,CACa;AAChB,QAAA,KAAK,IAAIA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,UAAU,EAAA,EAAG,KAAK,CAAS;QACpD,WAAW,KACVA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACE,EAAE,EAAE,CAAA,EAAG,UAAU,CAAA,YAAA,CAAc,EAC/B,SAAS,EAAC,0BAA0B,EAAA;YAEpCA,cAAA,CAAA,aAAA,CAAC,IAAI,IACH,SAAS,EAAC,uCAAuC,EACjD,MAAM,EAAC,8BAA8B,EAAA,aAAA,EAAA,IAAA,EAAA,CAErC;AACD,YAAA,WAAW,CACV,CACL,CACG;AAEV,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
1
+ {"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import \"./index.css\"\nimport \"./tds-indeterminate\"\n\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, InputHTMLAttributes } from \"react\"\n\nexport type CheckboxSize = \"md\" | \"sm\"\n\ninterface CheckboxBaseProps {\n /** Optional description text that appears below the checkbox label. */\n description?: string\n /** Whether the checkbox is in an indeterminate state. If true, checked should also be true. */\n indeterminate?: boolean\n /** Whether the checkbox is in an invalid state. If true, include a description to explain why the checkbox is invalid. */\n invalid?: boolean\n /** The size of the checkbox. */\n size?: CheckboxSize\n}\n\ninterface CheckboxWithLabel extends CheckboxBaseProps {\n \"aria-labelledby\"?: never\n /**\n * Label content for the checkbox. When using non-string content\n * (e.g. JSX), it must not contain interactive elements. This\n * includes native HTML elements such as `<a>` and `<button>`, as\n * well as Tapestry or Tapestry-React interactive components.\n */\n label: React.ReactNode\n}\n\ninterface CheckboxWithAriaLabelledBy extends CheckboxBaseProps {\n \"aria-labelledby\": string\n label?: never\n}\n\nexport type CheckboxProps = CheckboxWithLabel | CheckboxWithAriaLabelledBy\n\nexport type CheckboxElementProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n keyof CheckboxProps | \"type\"\n> &\n CheckboxProps\n\n/**\n * A checkbox component that renders as a checkbox input with label.\n * Supports various sizes, error states, and disabled states.\n *\n * **Required:** You must provide either:\n * - `label` - Label content for the checkbox\n * - `aria-labelledby` - ID of an external element that provides the label\n *\n * When using non-string content for `label` (e.g. JSX), it must not contain\n * interactive elements. This includes native HTML elements such as `<a>` and\n * `<button>`, as well as Tapestry or Tapestry-React interactive components.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-checkbox--docs | Storybook Documentation}\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxElementProps>(\n (\n {\n className,\n description,\n id,\n indeterminate = false,\n invalid,\n label,\n size = \"md\",\n ...restProps\n }: CheckboxElementProps,\n ref\n ) => {\n const combinedClassName = classNames(\n \"tds-checkbox\",\n size && size === \"sm\" && `tds-checkbox--sm`,\n invalid && \"tds-checkbox--invalid\",\n className\n )\n\n const stableId = useId()\n const checkboxId = id || `tds-checkbox-${stableId}`\n\n const WrapperElement = indeterminate ? \"tds-indeterminate\" : React.Fragment\n\n return (\n <div className={combinedClassName}>\n <WrapperElement>\n <input\n {...restProps}\n aria-describedby={\n description ? `${checkboxId}-description` : undefined\n }\n aria-invalid={invalid}\n id={checkboxId}\n ref={ref}\n type=\"checkbox\"\n />\n </WrapperElement>\n {label && <label htmlFor={checkboxId}>{label}</label>}\n {description && (\n <p\n id={`${checkboxId}-description`}\n className=\"tds-checkbox-description\"\n >\n <Icon\n className=\"tds-checkbox-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n aria-hidden\n />\n {description}\n </p>\n )}\n </div>\n )\n }\n)\n\nCheckbox.displayName = \"Checkbox\"\n"],"names":["React"],"mappings":";;;;;;AA6CA;;;;;;;;;;;;;;AAcG;AACI,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,SAAS,EACT,WAAW,EACX,EAAE,EACF,aAAa,GAAG,KAAK,EACrB,OAAO,EACP,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACS,EACvB,GAAG,KACD;IACF,MAAM,iBAAiB,GAAG,UAAU,CAClC,cAAc,EACd,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,CAAA,gBAAA,CAAkB,EAC3C,OAAO,IAAI,uBAAuB,EAClC,SAAS,CACV;AAED,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,UAAU,GAAG,EAAE,IAAI,CAAA,aAAA,EAAgB,QAAQ,EAAE;AAEnD,IAAA,MAAM,cAAc,GAAG,aAAa,GAAG,mBAAmB,GAAGA,cAAK,CAAC,QAAQ;AAE3E,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;AAC/B,QAAAA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,IAAA;AACb,YAAAA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,SAAS,EAAA,kBAAA,EAEX,WAAW,GAAG,CAAA,EAAG,UAAU,CAAA,YAAA,CAAc,GAAG,SAAS,EAAA,cAAA,EAEzC,OAAO,EACrB,EAAE,EAAE,UAAU,EACd,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,EAAA,CACf,CACa;AAChB,QAAA,KAAK,IAAIA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,UAAU,EAAA,EAAG,KAAK,CAAS;QACpD,WAAW,KACVA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACE,EAAE,EAAE,CAAA,EAAG,UAAU,CAAA,YAAA,CAAc,EAC/B,SAAS,EAAC,0BAA0B,EAAA;YAEpCA,cAAA,CAAA,aAAA,CAAC,IAAI,IACH,SAAS,EAAC,uCAAuC,EACjD,MAAM,EAAC,8BAA8B,EAAA,aAAA,EAAA,IAAA,EAAA,CAErC;AACD,YAAA,WAAW,CACV,CACL,CACG;AAEV,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
@@ -3,7 +3,7 @@ import "../input-text-base/index.css";
3
3
  import "./index.css";
4
4
  import type { CombineAriaPropsWithCustomProps } from "../../utilities/reactAriaProps";
5
5
  import React, { type ReactNode } from "react";
6
- import type { ComboBoxProps as AriaComboBoxProps, Key, ListBoxItemProps, ListBoxProps as AriaListBoxProps, ListBoxSectionProps } from "react-aria-components";
6
+ import { type ComboBoxProps as AriaComboBoxProps, type Key, type ListBoxItemProps, type ListBoxProps as AriaListBoxProps, type ListBoxSectionProps } from "react-aria-components/ComboBox";
7
7
  export type ComboBoxSize = "md" | "lg";
8
8
  export type ComboBoxLoadingState = "error" | "filtering" | "idle" | "loading" | "loadingMore" | "sorting";
9
9
  type ComboBoxChildren<T extends object> = NonNullable<AriaListBoxProps<T>["children"]>;
@@ -29,6 +29,14 @@ export interface ComboBoxProps<T extends object = object> {
29
29
  * - Other values render as `"idle"`.
30
30
  */
31
31
  loadingState?: ComboBoxLoadingState;
32
+ /**
33
+ * The interaction that opens the popover.
34
+ * - `"input"`: opens when the user enters text in the input.
35
+ * - `"focus"`: opens when the user focuses (via click or keyboard) into the input.
36
+ * - `"manual"`: opens only via the trigger button or arrow keys.
37
+ * @default "focus"
38
+ */
39
+ menuTrigger?: "focus" | "input" | "manual";
32
40
  /**
33
41
  * Called when the selected value(s) change.
34
42
  * Receives `Key[]` when `selectionMode` is `"multiple"`, otherwise `Key | null`.
@@ -48,7 +56,7 @@ export interface ComboBoxProps<T extends object = object> {
48
56
  size?: ComboBoxSize;
49
57
  }
50
58
  type AriaComboBoxPropsToOmit = "slot";
51
- type AriaComboBoxPropsToInclude = "allowsEmptyCollection" | "defaultInputValue" | "defaultItems" | "defaultValue" | "disabledKeys" | "inputValue" | "items" | "menuTrigger" | "name" | "onInputChange" | "selectionMode" | "value";
59
+ type AriaComboBoxPropsToInclude = "allowsEmptyCollection" | "defaultInputValue" | "defaultItems" | "defaultValue" | "disabledKeys" | "inputValue" | "items" | "name" | "onInputChange" | "selectionMode" | "value";
52
60
  export type ComboBoxElementProps<T extends object = object> = CombineAriaPropsWithCustomProps<AriaComboBoxProps<T, "single" | "multiple">, ComboBoxProps<T>, AriaComboBoxPropsToOmit, AriaComboBoxPropsToInclude>;
53
61
  /**
54
62
  * A combo box combines a text input with a filterable popover
@@ -79,6 +87,7 @@ export type ComboBoxItemElementProps<T extends object = object> = CombineAriaPro
79
87
  * type-ahead and screen readers have a stable label to use.
80
88
  *
81
89
  * @component
90
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-combobox--docs | Storybook Documentation}
82
91
  */
83
92
  export declare function ComboBoxItem<T extends object>({ className, disabled, ...restProps }: ComboBoxItemElementProps<T>): React.JSX.Element;
84
93
  export interface ComboBoxSectionProps {
@@ -94,6 +103,7 @@ export type ComboBoxSectionElementProps<T extends object = object> = CombineAria
94
103
  * an optional `title` heading above its items.
95
104
  *
96
105
  * @component
106
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-combobox--docs | Storybook Documentation}
97
107
  */
98
108
  export declare function ComboBoxSection<T extends object>({ children, className, title, ...restProps }: ComboBoxSectionElementProps<T>): React.JSX.Element;
99
109
  export {};
@@ -1 +1 @@
1
- {"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/ComboBox.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/ComboBox.tsx"],"names":[],"mappings":"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"}
@@ -2,7 +2,9 @@ import LoadingSpinner from '../internal/LoadingSpinner.js';
2
2
  import Icon from '../../utilities/Icon.js';
3
3
  import classNames from 'classnames';
4
4
  import React__default from 'react';
5
- import { ListBoxLoadMoreItem, ComboBox as ComboBox$1, Label, Group, Input, Button, Popover, ListBox, Text, ListBoxItem, ListBoxSection, Header, Collection } from 'react-aria-components';
5
+ import { ListBoxLoadMoreItem, ComboBox as ComboBox$1, Label, Input, Button, Popover, ListBox, Text, ListBoxItem, ListBoxSection, Collection } from 'react-aria-components/ComboBox';
6
+ import { Group } from 'react-aria-components/Group';
7
+ import { Header } from 'react-aria-components/Header';
6
8
 
7
9
  function resolveEmptyState(value) {
8
10
  return typeof value === "function" ? value() : value;
@@ -20,7 +22,7 @@ function resolveEmptyState(value) {
20
22
  * @component
21
23
  * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-combobox--docs | Storybook Documentation}
22
24
  */
23
- function ComboBox({ allowsEmptyCollection = true, children, className, description, disabled, filter, hideLabel, invalid, label, loadingState, menuTrigger, onChange, onLoadMore, placeholder, readOnly, renderEmptyState = "No results", required, size = "md", ...restProps }) {
25
+ function ComboBox({ allowsEmptyCollection = true, children, className, description, disabled, filter, hideLabel, invalid, label, loadingState, menuTrigger = "focus", onChange, onLoadMore, placeholder, readOnly, renderEmptyState = "No results", required, size = "md", ...restProps }) {
24
26
  const combinedClassName = classNames("tds-field tds-combo-box", {
25
27
  "tds-combo-box--lg": size === "lg",
26
28
  "tds-field--lg": size === "lg",
@@ -65,6 +67,7 @@ function ComboBox({ allowsEmptyCollection = true, children, className, descripti
65
67
  * type-ahead and screen readers have a stable label to use.
66
68
  *
67
69
  * @component
70
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-combobox--docs | Storybook Documentation}
68
71
  */
69
72
  function ComboBoxItem({ className, disabled, ...restProps }) {
70
73
  return (React__default.createElement(ListBoxItem, { ...restProps, className: classNames("tds-combo-box-list-item", className), isDisabled: disabled }));
@@ -74,6 +77,7 @@ function ComboBoxItem({ className, disabled, ...restProps }) {
74
77
  * an optional `title` heading above its items.
75
78
  *
76
79
  * @component
80
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-combobox--docs | Storybook Documentation}
77
81
  */
78
82
  function ComboBoxSection({ children, className, title, ...restProps }) {
79
83
  return (React__default.createElement(ListBoxSection, { ...restProps, className: classNames("tds-combo-box-list-section", className) },
@@ -1 +1 @@
1
- {"version":3,"file":"ComboBox.js","sources":["../../../src/components/combo-box/ComboBox.tsx"],"sourcesContent":["import \"../button/btn.css\"\nimport \"../input-text-base/index.css\"\nimport \"./index.css\"\n\nimport LoadingSpinner from \"@components/internal/LoadingSpinner\"\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React, { type ReactNode } from \"react\"\nimport type {\n ComboBoxProps as AriaComboBoxProps,\n Key,\n ListBoxItemProps,\n ListBoxProps as AriaListBoxProps,\n ListBoxSectionProps,\n} from \"react-aria-components\"\nimport {\n Button,\n Collection,\n ComboBox as AriaComboBox,\n Group,\n Header,\n Input,\n Label,\n ListBox,\n ListBoxItem,\n ListBoxLoadMoreItem,\n ListBoxSection,\n Popover,\n Text,\n} from \"react-aria-components\"\n\nexport type ComboBoxSize = \"md\" | \"lg\"\n\nexport type ComboBoxLoadingState =\n | \"error\"\n | \"filtering\"\n | \"idle\"\n | \"loading\"\n | \"loadingMore\"\n | \"sorting\"\n\ntype ComboBoxChildren<T extends object> = NonNullable<\n AriaListBoxProps<T>[\"children\"]\n>\n\nexport interface ComboBoxProps<T extends object = object> {\n /** The contents of the listbox. */\n children: ComboBoxChildren<T>\n /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n description?: string\n /** Disables the field and trigger button. */\n disabled?: boolean\n /** Custom filter function for determining if an item should appear in the list. */\n filter?: (textValue: string, inputValue: string) => boolean\n /** If `true`, the `label` text is rendered as an `aria-label` instead of a visible label element. */\n hideLabel?: boolean\n /** Whether the input is in an invalid state. */\n invalid?: boolean\n /** Accessible label for the field. */\n label: string\n /**\n * Async loading state for the listbox.\n * - `\"loading\"`: while the collection is empty, replaces the empty state with a spinner.\n * - `\"loadingMore\"`: shows an inline spinner at the bottom of the listbox (use with `onLoadMore`).\n * - Other values render as `\"idle\"`.\n */\n loadingState?: ComboBoxLoadingState\n /**\n * Called when the selected value(s) change.\n * Receives `Key[]` when `selectionMode` is `\"multiple\"`, otherwise `Key | null`.\n */\n onChange?: ((value: Key | null) => void) | ((value: Key[]) => void)\n /** Called when the user scrolls near the bottom of the listbox. Pair with `loadingState` for infinite scroll. */\n onLoadMore?: () => void\n /** Placeholder text for the input. */\n placeholder?: string\n /** If `true`, allows the value to be read but not changed. */\n readOnly?: boolean\n /** Content to display when there are no items in the list. Defaults to \"No results\". */\n renderEmptyState?: ReactNode | (() => ReactNode)\n /** If `true`, appends an asterisk at the end of the label text. */\n required?: boolean\n /** The size of the combo box. */\n size?: ComboBoxSize\n}\n\ntype AriaComboBoxPropsToOmit = \"slot\"\n\ntype AriaComboBoxPropsToInclude =\n | \"allowsEmptyCollection\"\n | \"defaultInputValue\"\n | \"defaultItems\"\n | \"defaultValue\"\n | \"disabledKeys\"\n | \"inputValue\"\n | \"items\"\n | \"menuTrigger\"\n | \"name\"\n | \"onInputChange\"\n | \"selectionMode\"\n | \"value\"\n\nexport type ComboBoxElementProps<T extends object = object> =\n CombineAriaPropsWithCustomProps<\n AriaComboBoxProps<T, \"single\" | \"multiple\">,\n ComboBoxProps<T>,\n AriaComboBoxPropsToOmit,\n AriaComboBoxPropsToInclude\n >\n\nfunction resolveEmptyState(value: ReactNode | (() => ReactNode)): ReactNode {\n return typeof value === \"function\" ? value() : value\n}\n\n/**\n * A combo box combines a text input with a filterable popover\n * listbox, allowing users to type to search and select from a list of options.\n *\n * It supports both single and multiple selection (`selectionMode`), custom filtering,\n * and asynchronous data loading with infinite scroll capabilities (`loadingState` and `onLoadMore`).\n * Collections can be either static or dynamic, managed via the `children`, `items`,\n * or `defaultItems` props. To construct the dropdown list, compose this component\n * with `ComboBoxItem` for individual options and `ComboBoxSection` for grouping.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-combobox--docs | Storybook Documentation}\n */\nexport function ComboBox<T extends object>({\n allowsEmptyCollection = true,\n children,\n className,\n description,\n disabled,\n filter,\n hideLabel,\n invalid,\n label,\n loadingState,\n menuTrigger,\n onChange,\n onLoadMore,\n placeholder,\n readOnly,\n renderEmptyState = \"No results\",\n required,\n size = \"md\",\n ...restProps\n}: ComboBoxElementProps<T>) {\n const combinedClassName = classNames(\n \"tds-field tds-combo-box\",\n {\n \"tds-combo-box--lg\": size === \"lg\",\n \"tds-field--lg\": size === \"lg\",\n },\n className\n )\n\n const loadMoreItem = onLoadMore && (\n <ListBoxLoadMoreItem\n className=\"tds-combo-box-load-more\"\n isLoading={loadingState === \"loadingMore\"}\n onLoadMore={onLoadMore}\n >\n <div aria-label=\"Loading more\" role=\"status\">\n <LoadingSpinner />\n </div>\n </ListBoxLoadMoreItem>\n )\n\n const renderChildren = () => {\n if (typeof children === \"function\") {\n return (\n <Collection items={restProps.items ?? restProps.defaultItems}>\n {children}\n </Collection>\n )\n }\n return children\n }\n\n return (\n // React Aria's ComboBox is generic over selection mode (M). We instantiate\n // it with the union \"single\" | \"multiple\" so value/defaultValue/selectionMode\n // accept both shapes. onChange still needs a cast because our type is a union\n // of function types (to allow narrower handlers like\n // `setValue: (Key|null) => void`), which isn't assignable to RAC's\n // single-function signature.\n <AriaComboBox<T, \"single\" | \"multiple\">\n {...restProps}\n allowsEmptyCollection={allowsEmptyCollection}\n aria-label={hideLabel ? label : undefined}\n className={combinedClassName}\n defaultFilter={filter}\n isDisabled={disabled}\n isInvalid={invalid}\n isReadOnly={readOnly}\n isRequired={required}\n menuTrigger={menuTrigger}\n onChange={onChange as (value: Key | Key[] | null) => void}\n >\n {!hideLabel && <Label className=\"tds-field-label\">{label}</Label>}\n <Group className=\"tds-field-control tds-combo-box-field\">\n <Input className=\"tds-combo-box-input\" placeholder={placeholder} />\n {menuTrigger !== \"focus\" && !readOnly && (\n <Button className=\"tds-combo-box-button tds-btn tds-btn--infield\">\n <Icon aria-hidden symbol=\"general#down-caret\" />\n </Button>\n )}\n </Group>\n <Popover className=\"tds-combo-box-popover\">\n <ListBox\n className=\"tds-combo-box-list\"\n renderEmptyState={\n allowsEmptyCollection\n ? () => (\n <div\n aria-label={\n loadingState === \"loading\" ? \"Loading\" : undefined\n }\n className=\"tds-combo-box-empty-state\"\n role={loadingState === \"loading\" ? \"status\" : undefined}\n >\n {loadingState === \"loading\" ? (\n <LoadingSpinner />\n ) : (\n resolveEmptyState(renderEmptyState)\n )}\n </div>\n )\n : undefined\n }\n >\n {renderChildren()}\n {loadMoreItem}\n </ListBox>\n </Popover>\n {description && (\n <Text className=\"tds-field-description\" slot=\"description\">\n <Icon\n aria-hidden\n className=\"tds-field-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n />\n {description}\n </Text>\n )}\n </AriaComboBox>\n )\n}\n\nexport interface ComboBoxItemProps {\n /** Disables the item. */\n disabled?: boolean\n}\n\ntype AriaListBoxItemPropsToOmit = \"isDisabled\"\n\ntype AriaListBoxItemPropsToInclude = \"onAction\" | \"textValue\" | \"value\"\n\nexport type ComboBoxItemElementProps<T extends object = object> =\n CombineAriaPropsWithCustomProps<\n ListBoxItemProps<T>,\n ComboBoxItemProps,\n AriaListBoxItemPropsToOmit,\n AriaListBoxItemPropsToInclude\n >\n\n/**\n * A selectable option within a {@link ComboBox}. Renders as a listbox item.\n *\n * Provide an `id` (or `key` when rendering from a collection) to identify the\n * option, and `textValue` when the visible children are not plain text so\n * type-ahead and screen readers have a stable label to use.\n *\n * @component\n */\nexport function ComboBoxItem<T extends object>({\n className,\n disabled,\n ...restProps\n}: ComboBoxItemElementProps<T>) {\n return (\n <ListBoxItem\n {...restProps}\n className={classNames(\"tds-combo-box-list-item\", className)}\n isDisabled={disabled}\n />\n )\n}\n\nexport interface ComboBoxSectionProps {\n /** The items rendered within the section. */\n children: ReactNode\n /** Optional heading text rendered above the section's items. */\n title?: string\n}\n\ntype AriaListBoxSectionPropsToInclude = \"dependencies\"\n\nexport type ComboBoxSectionElementProps<T extends object = object> =\n CombineAriaPropsWithCustomProps<\n ListBoxSectionProps<T>,\n ComboBoxSectionProps,\n never,\n AriaListBoxSectionPropsToInclude\n >\n\n/**\n * A group of related {@link ComboBoxItem}s within a {@link ComboBox}. Renders\n * an optional `title` heading above its items.\n *\n * @component\n */\nexport function ComboBoxSection<T extends object>({\n children,\n className,\n title,\n ...restProps\n}: ComboBoxSectionElementProps<T>) {\n return (\n <ListBoxSection\n {...restProps}\n className={classNames(\"tds-combo-box-list-section\", className)}\n >\n {title && (\n <Header className=\"tds-combo-box-section-header\">{title}</Header>\n )}\n {children}\n </ListBoxSection>\n )\n}\n"],"names":["React","AriaComboBox"],"mappings":"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"}
1
+ {"version":3,"file":"ComboBox.js","sources":["../../../src/components/combo-box/ComboBox.tsx"],"sourcesContent":["import \"../button/btn.css\"\nimport \"../input-text-base/index.css\"\nimport \"./index.css\"\n\nimport LoadingSpinner from \"@components/internal/LoadingSpinner\"\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React, { type ReactNode } from \"react\"\nimport {\n Button,\n Collection,\n ComboBox as AriaComboBox,\n type ComboBoxProps as AriaComboBoxProps,\n Input,\n type Key,\n Label,\n ListBox,\n ListBoxItem,\n type ListBoxItemProps,\n ListBoxLoadMoreItem,\n type ListBoxProps as AriaListBoxProps,\n ListBoxSection,\n type ListBoxSectionProps,\n Popover,\n Text,\n} from \"react-aria-components/ComboBox\"\nimport { Group } from \"react-aria-components/Group\"\nimport { Header } from \"react-aria-components/Header\"\n\nexport type ComboBoxSize = \"md\" | \"lg\"\n\nexport type ComboBoxLoadingState =\n | \"error\"\n | \"filtering\"\n | \"idle\"\n | \"loading\"\n | \"loadingMore\"\n | \"sorting\"\n\ntype ComboBoxChildren<T extends object> = NonNullable<\n AriaListBoxProps<T>[\"children\"]\n>\n\nexport interface ComboBoxProps<T extends object = object> {\n /** The contents of the listbox. */\n children: ComboBoxChildren<T>\n /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n description?: string\n /** Disables the field and trigger button. */\n disabled?: boolean\n /** Custom filter function for determining if an item should appear in the list. */\n filter?: (textValue: string, inputValue: string) => boolean\n /** If `true`, the `label` text is rendered as an `aria-label` instead of a visible label element. */\n hideLabel?: boolean\n /** Whether the input is in an invalid state. */\n invalid?: boolean\n /** Accessible label for the field. */\n label: string\n /**\n * Async loading state for the listbox.\n * - `\"loading\"`: while the collection is empty, replaces the empty state with a spinner.\n * - `\"loadingMore\"`: shows an inline spinner at the bottom of the listbox (use with `onLoadMore`).\n * - Other values render as `\"idle\"`.\n */\n loadingState?: ComboBoxLoadingState\n /**\n * The interaction that opens the popover.\n * - `\"input\"`: opens when the user enters text in the input.\n * - `\"focus\"`: opens when the user focuses (via click or keyboard) into the input.\n * - `\"manual\"`: opens only via the trigger button or arrow keys.\n * @default \"focus\"\n */\n menuTrigger?: \"focus\" | \"input\" | \"manual\"\n /**\n * Called when the selected value(s) change.\n * Receives `Key[]` when `selectionMode` is `\"multiple\"`, otherwise `Key | null`.\n */\n onChange?: ((value: Key | null) => void) | ((value: Key[]) => void)\n /** Called when the user scrolls near the bottom of the listbox. Pair with `loadingState` for infinite scroll. */\n onLoadMore?: () => void\n /** Placeholder text for the input. */\n placeholder?: string\n /** If `true`, allows the value to be read but not changed. */\n readOnly?: boolean\n /** Content to display when there are no items in the list. Defaults to \"No results\". */\n renderEmptyState?: ReactNode | (() => ReactNode)\n /** If `true`, appends an asterisk at the end of the label text. */\n required?: boolean\n /** The size of the combo box. */\n size?: ComboBoxSize\n}\n\ntype AriaComboBoxPropsToOmit = \"slot\"\n\ntype AriaComboBoxPropsToInclude =\n | \"allowsEmptyCollection\"\n | \"defaultInputValue\"\n | \"defaultItems\"\n | \"defaultValue\"\n | \"disabledKeys\"\n | \"inputValue\"\n | \"items\"\n | \"name\"\n | \"onInputChange\"\n | \"selectionMode\"\n | \"value\"\n\nexport type ComboBoxElementProps<T extends object = object> =\n CombineAriaPropsWithCustomProps<\n AriaComboBoxProps<T, \"single\" | \"multiple\">,\n ComboBoxProps<T>,\n AriaComboBoxPropsToOmit,\n AriaComboBoxPropsToInclude\n >\n\nfunction resolveEmptyState(value: ReactNode | (() => ReactNode)): ReactNode {\n return typeof value === \"function\" ? value() : value\n}\n\n/**\n * A combo box combines a text input with a filterable popover\n * listbox, allowing users to type to search and select from a list of options.\n *\n * It supports both single and multiple selection (`selectionMode`), custom filtering,\n * and asynchronous data loading with infinite scroll capabilities (`loadingState` and `onLoadMore`).\n * Collections can be either static or dynamic, managed via the `children`, `items`,\n * or `defaultItems` props. To construct the dropdown list, compose this component\n * with `ComboBoxItem` for individual options and `ComboBoxSection` for grouping.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-combobox--docs | Storybook Documentation}\n */\nexport function ComboBox<T extends object>({\n allowsEmptyCollection = true,\n children,\n className,\n description,\n disabled,\n filter,\n hideLabel,\n invalid,\n label,\n loadingState,\n menuTrigger = \"focus\",\n onChange,\n onLoadMore,\n placeholder,\n readOnly,\n renderEmptyState = \"No results\",\n required,\n size = \"md\",\n ...restProps\n}: ComboBoxElementProps<T>) {\n const combinedClassName = classNames(\n \"tds-field tds-combo-box\",\n {\n \"tds-combo-box--lg\": size === \"lg\",\n \"tds-field--lg\": size === \"lg\",\n },\n className\n )\n\n const loadMoreItem = onLoadMore && (\n <ListBoxLoadMoreItem\n className=\"tds-combo-box-load-more\"\n isLoading={loadingState === \"loadingMore\"}\n onLoadMore={onLoadMore}\n >\n <div aria-label=\"Loading more\" role=\"status\">\n <LoadingSpinner />\n </div>\n </ListBoxLoadMoreItem>\n )\n\n const renderChildren = () => {\n if (typeof children === \"function\") {\n return (\n <Collection items={restProps.items ?? restProps.defaultItems}>\n {children}\n </Collection>\n )\n }\n return children\n }\n\n return (\n // React Aria's ComboBox is generic over selection mode (M). We instantiate\n // it with the union \"single\" | \"multiple\" so value/defaultValue/selectionMode\n // accept both shapes. onChange still needs a cast because our type is a union\n // of function types (to allow narrower handlers like\n // `setValue: (Key|null) => void`), which isn't assignable to RAC's\n // single-function signature.\n <AriaComboBox<T, \"single\" | \"multiple\">\n {...restProps}\n allowsEmptyCollection={allowsEmptyCollection}\n aria-label={hideLabel ? label : undefined}\n className={combinedClassName}\n defaultFilter={filter}\n isDisabled={disabled}\n isInvalid={invalid}\n isReadOnly={readOnly}\n isRequired={required}\n menuTrigger={menuTrigger}\n onChange={onChange as (value: Key | Key[] | null) => void}\n >\n {!hideLabel && <Label className=\"tds-field-label\">{label}</Label>}\n <Group className=\"tds-field-control tds-combo-box-field\">\n <Input className=\"tds-combo-box-input\" placeholder={placeholder} />\n {menuTrigger !== \"focus\" && !readOnly && (\n <Button className=\"tds-combo-box-button tds-btn tds-btn--infield\">\n <Icon aria-hidden symbol=\"general#down-caret\" />\n </Button>\n )}\n </Group>\n <Popover className=\"tds-combo-box-popover\">\n <ListBox\n className=\"tds-combo-box-list\"\n renderEmptyState={\n allowsEmptyCollection\n ? () => (\n <div\n aria-label={\n loadingState === \"loading\" ? \"Loading\" : undefined\n }\n className=\"tds-combo-box-empty-state\"\n role={loadingState === \"loading\" ? \"status\" : undefined}\n >\n {loadingState === \"loading\" ? (\n <LoadingSpinner />\n ) : (\n resolveEmptyState(renderEmptyState)\n )}\n </div>\n )\n : undefined\n }\n >\n {renderChildren()}\n {loadMoreItem}\n </ListBox>\n </Popover>\n {description && (\n <Text className=\"tds-field-description\" slot=\"description\">\n <Icon\n aria-hidden\n className=\"tds-field-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n />\n {description}\n </Text>\n )}\n </AriaComboBox>\n )\n}\n\nexport interface ComboBoxItemProps {\n /** Disables the item. */\n disabled?: boolean\n}\n\ntype AriaListBoxItemPropsToOmit = \"isDisabled\"\n\ntype AriaListBoxItemPropsToInclude = \"onAction\" | \"textValue\" | \"value\"\n\nexport type ComboBoxItemElementProps<T extends object = object> =\n CombineAriaPropsWithCustomProps<\n ListBoxItemProps<T>,\n ComboBoxItemProps,\n AriaListBoxItemPropsToOmit,\n AriaListBoxItemPropsToInclude\n >\n\n/**\n * A selectable option within a {@link ComboBox}. Renders as a listbox item.\n *\n * Provide an `id` (or `key` when rendering from a collection) to identify the\n * option, and `textValue` when the visible children are not plain text so\n * type-ahead and screen readers have a stable label to use.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-combobox--docs | Storybook Documentation}\n */\nexport function ComboBoxItem<T extends object>({\n className,\n disabled,\n ...restProps\n}: ComboBoxItemElementProps<T>) {\n return (\n <ListBoxItem\n {...restProps}\n className={classNames(\"tds-combo-box-list-item\", className)}\n isDisabled={disabled}\n />\n )\n}\n\nexport interface ComboBoxSectionProps {\n /** The items rendered within the section. */\n children: ReactNode\n /** Optional heading text rendered above the section's items. */\n title?: string\n}\n\ntype AriaListBoxSectionPropsToInclude = \"dependencies\"\n\nexport type ComboBoxSectionElementProps<T extends object = object> =\n CombineAriaPropsWithCustomProps<\n ListBoxSectionProps<T>,\n ComboBoxSectionProps,\n never,\n AriaListBoxSectionPropsToInclude\n >\n\n/**\n * A group of related {@link ComboBoxItem}s within a {@link ComboBox}. Renders\n * an optional `title` heading above its items.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-combobox--docs | Storybook Documentation}\n */\nexport function ComboBoxSection<T extends object>({\n children,\n className,\n title,\n ...restProps\n}: ComboBoxSectionElementProps<T>) {\n return (\n <ListBoxSection\n {...restProps}\n className={classNames(\"tds-combo-box-list-section\", className)}\n >\n {title && (\n <Header className=\"tds-combo-box-section-header\">{title}</Header>\n )}\n {children}\n </ListBoxSection>\n )\n}\n"],"names":["React","AriaComboBox"],"mappings":"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"}
@@ -4,7 +4,7 @@ import "./index.css";
4
4
  import { type DateValue } from "@internationalized/date";
5
5
  import type { CombineAriaPropsWithCustomProps } from "../../utilities/reactAriaProps";
6
6
  import React from "react";
7
- import { type DatePickerProps as AriaDatePickerProps } from "react-aria-components";
7
+ import { type DatePickerProps as AriaDatePickerProps } from "react-aria-components/DatePicker";
8
8
  export type DatePickerSize = "md" | "lg";
9
9
  export type DatePickerDateValue = DateValue | string;
10
10
  export interface DatePickerProps {
@@ -1 +1 @@
1
- {"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAC1B,OAAO,8BAA8B,CAAA;AACrC,OAAO,aAAa,CAAA;AAEpB,OAAO,EAEL,KAAK,SAAS,EAIf,MAAM,yBAAyB,CAAA;AAEhC,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAA;AAEhF,OAAO,KAA+C,MAAM,OAAO,CAAA;AACnE,OAAO,EAWL,KAAK,eAAe,IAAI,mBAAmB,EAS5C,MAAM,uBAAuB,CAAA;AAU9B,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAA;AAExC,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAA;AAepD,MAAM,WAAW,eAAe;IAC9B,gGAAgG;IAChG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4FAA4F;IAC5F,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAA;IACtE,qGAAqG;IACrG,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gDAAgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,wFAAwF;IACxF,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAA;IAChD,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,uEAAuE;IACvE,GAAG,CAAC,EAAE,mBAAmB,CAAA;IACzB,uEAAuE;IACvE,GAAG,CAAC,EAAE,mBAAmB,CAAA;IACzB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAA;IAC5C,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mCAAmC;IACnC,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,oEAAoE;IACpE,KAAK,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAA;CACnC;AAED,KAAK,yBAAyB,GAC1B,UAAU,GACV,aAAa,GACb,cAAc,GACd,aAAa,GACb,cAAc,GACd,WAAW,GACX,cAAc,GACd,kBAAkB,GAClB,qBAAqB,GACrB,yBAAyB,GACzB,MAAM,CAAA;AAEV,KAAK,4BAA4B,GAAG,QAAQ,GAAG,MAAM,GAAG,cAAc,CAAA;AAEtE,MAAM,MAAM,sBAAsB,GAAG,+BAA+B,CAClE,mBAAmB,CAAC,SAAS,CAAC,EAC9B,eAAe,EACf,yBAAyB,EACzB,4BAA4B,CAC7B,CAAA;AAoOD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,WAAW,EACX,QAAQ,EACR,cAAc,EACd,SAAS,EACT,OAAO,EACP,iBAAiB,EACjB,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAW,EACX,KAAK,EACL,GAAG,SAAS,EACb,EAAE,sBAAsB,qBAwFxB;yBAzGe,UAAU"}
1
+ {"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAC1B,OAAO,8BAA8B,CAAA;AACrC,OAAO,aAAa,CAAA;AAEpB,OAAO,EAEL,KAAK,SAAS,EAIf,MAAM,yBAAyB,CAAA;AAEhC,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAA;AAEhF,OAAO,KAA+C,MAAM,OAAO,CAAA;AAEnE,OAAO,EAUL,KAAK,eAAe,IAAI,mBAAmB,EAM5C,MAAM,kCAAkC,CAAA;AAYzC,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAA;AAExC,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAA;AAepD,MAAM,WAAW,eAAe;IAC9B,gGAAgG;IAChG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4FAA4F;IAC5F,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAA;IACtE,qGAAqG;IACrG,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gDAAgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,wFAAwF;IACxF,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAA;IAChD,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,uEAAuE;IACvE,GAAG,CAAC,EAAE,mBAAmB,CAAA;IACzB,uEAAuE;IACvE,GAAG,CAAC,EAAE,mBAAmB,CAAA;IACzB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAA;IAC5C,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mCAAmC;IACnC,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,oEAAoE;IACpE,KAAK,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAA;CACnC;AAED,KAAK,yBAAyB,GAC1B,UAAU,GACV,aAAa,GACb,cAAc,GACd,aAAa,GACb,cAAc,GACd,WAAW,GACX,cAAc,GACd,kBAAkB,GAClB,qBAAqB,GACrB,yBAAyB,GACzB,MAAM,CAAA;AAEV,KAAK,4BAA4B,GAAG,QAAQ,GAAG,MAAM,GAAG,cAAc,CAAA;AAEtE,MAAM,MAAM,sBAAsB,GAAG,+BAA+B,CAClE,mBAAmB,CAAC,SAAS,CAAC,EAC9B,eAAe,EACf,yBAAyB,EACzB,4BAA4B,CAC7B,CAAA;AAoOD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,WAAW,EACX,QAAQ,EACR,cAAc,EACd,SAAS,EACT,OAAO,EACP,iBAAiB,EACjB,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAW,EACX,KAAK,EACL,GAAG,SAAS,EACb,EAAE,sBAAsB,qBAwFxB;yBAzGe,UAAU"}
@@ -1,12 +1,15 @@
1
- import { CalendarDate as $35ea8db9cb2ccb90$export$99faa760c7908e4f } from './../../ext/@internationalized/date/dist/CalendarDate.js';
2
- import { today as $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3, getLocalTimeZone as $14e0f24ef4ac5c92$export$aa8b41735afcabd2 } from './../../ext/@internationalized/date/dist/queries.js';
3
- import { parseDate as $fae977aafc393c5c$export$6b862160d295c8e } from './../../ext/@internationalized/date/dist/string.js';
1
+ import { CalendarDate as $2aaf608024c21ca1$export$99faa760c7908e4f } from './../../ext/@internationalized/date/dist/private/CalendarDate.js';
2
+ import { today as $ad063034c8620db8$export$d0bdf45af03a6ea3, getLocalTimeZone as $ad063034c8620db8$export$aa8b41735afcabd2 } from './../../ext/@internationalized/date/dist/private/queries.js';
3
+ import { parseDate as $58246871e4652552$export$6b862160d295c8e } from './../../ext/@internationalized/date/dist/private/string.js';
4
4
  import Icon from '../../utilities/Icon.js';
5
5
  import classNames from 'classnames';
6
6
  import React__default, { useState, useContext } from 'react';
7
- import { DatePicker as DatePicker$1, Label, Group, DateInput, DateSegment, Button, Popover, Dialog, Calendar, Text, CalendarStateContext, ListBox, ListBoxItem, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell } from 'react-aria-components';
7
+ import { CalendarStateContext } from 'react-aria-components/Calendar';
8
+ import { DatePicker as DatePicker$1, Label, Group, DateInput, DateSegment, Button, Popover, Calendar, Text, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell } from 'react-aria-components/DatePicker';
9
+ import { Dialog } from 'react-aria-components/Dialog';
10
+ import { ListBox, ListBoxItem } from 'react-aria-components/ListBox';
8
11
 
9
- const _today = $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2());
12
+ const _today = $ad063034c8620db8$export$d0bdf45af03a6ea3($ad063034c8620db8$export$aa8b41735afcabd2());
10
13
  const MONTHS = Array.from({ length: 12 }, (_, i) => i);
11
14
  const YEARS = Array.from({ length: 131 }, (_, i) => _today.year - 100 + i);
12
15
  const shortMonthFormatter = new Intl.DateTimeFormat(undefined, {
@@ -21,7 +24,7 @@ function toCalendarDate(input) {
21
24
  if (typeof input === "object" && "calendar" in input) {
22
25
  return input;
23
26
  }
24
- return $fae977aafc393c5c$export$6b862160d295c8e(input);
27
+ return $58246871e4652552$export$6b862160d295c8e(input);
25
28
  }
26
29
  function DatePickerOverlay({ children, variant, }) {
27
30
  return (React__default.createElement("div", { "aria-label": `Select ${variant}`, "aria-modal": "true", className: `tds-date-picker-overlay tds-date-picker-overlay--${variant}`, role: "dialog" }, children));
@@ -33,7 +36,7 @@ function DatePickerCalendarBody({ activeOverlay, setActiveOverlay, }) {
33
36
  // current value (whether typed into the input segments or set via `value`).
34
37
  const state = useContext(CalendarStateContext);
35
38
  const focusedDate = state.focusedDate;
36
- const today = $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2());
39
+ const today = $ad063034c8620db8$export$d0bdf45af03a6ea3($ad063034c8620db8$export$aa8b41735afcabd2());
37
40
  function handleOverlaySelectionChange(keys, onSelect) {
38
41
  if (keys === "all")
39
42
  return;
@@ -42,11 +45,11 @@ function DatePickerCalendarBody({ activeOverlay, setActiveOverlay, }) {
42
45
  onSelect(Number(first));
43
46
  }
44
47
  function handleMonthSelect(monthIndex) {
45
- state.setFocusedDate(new $35ea8db9cb2ccb90$export$99faa760c7908e4f(focusedDate.year, monthIndex + 1, 1));
48
+ state.setFocusedDate(new $2aaf608024c21ca1$export$99faa760c7908e4f(focusedDate.year, monthIndex + 1, 1));
46
49
  setActiveOverlay(null);
47
50
  }
48
51
  function handleYearSelect(year) {
49
- state.setFocusedDate(new $35ea8db9cb2ccb90$export$99faa760c7908e4f(year, focusedDate.month, 1));
52
+ state.setFocusedDate(new $2aaf608024c21ca1$export$99faa760c7908e4f(year, focusedDate.month, 1));
50
53
  setActiveOverlay(null);
51
54
  }
52
55
  return (React__default.createElement(React__default.Fragment, null,