npm - @planningcenter/tapestry - Versions diffs - 3.3.1 → 3.3.2-qa-891.0 - Mend

@planningcenter/tapestry 3.3.1 → 3.3.2-qa-891.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 (146) hide show

package/dist/components/number-stepper/NumberStepper.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import Icon from '../../utilities/Icon.js';
 import classNames from 'classnames';
 import React__default from 'react';
-import { NumberField, Label, Group, Input, Button, Text } from 'react-aria-components';
+import { NumberField, Label, Group, Input, Button, Text } from 'react-aria-components/NumberField';
 /**
  * A number stepper component that pairs a numeric input with increment and

package/dist/components/number-stepper/NumberStepper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NumberStepper.js","sources":["../../../src/components/number-stepper/NumberStepper.tsx"],"sourcesContent":["import \"../button/btn.css\"\nimport \"../input-text-base/index.css\"\nimport \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React from \"react\"\nimport {\n Button,\n Group,\n Input,\n Label,\n NumberField as AriaNumberField,\n type NumberFieldProps as AriaNumberFieldProps,\n Text,\n} from \"react-aria-components\"\n\nexport type NumberStepperSize = \"md\" \| \"lg\"\n\nexport interface NumberStepperProps {\n /** The default uncontrolled value. /\n defaultValue?: number\n /* Helper text displayed below the component. Styled as error text when `invalid` is `true`. /\n description?: string\n /* Disables the input and stepper buttons. /\n disabled?: boolean\n /* If `true`, renders the label visually hidden. /\n hideLabel?: boolean\n /* If `true`, applies error styling to the field and description. /\n invalid?: boolean\n /* Accessible label for the field. /\n label: string\n /* Maximum allowed value. /\n max?: number\n /* Minimum allowed value. /\n min?: number\n /* Allows the value to be read but not changed. /\n readOnly?: boolean\n /* If `true`, appends an asterisk after the label text. /\n required?: boolean\n /* The size of the number stepper. /\n size?: NumberStepperSize\n}\n\ntype AriaNumberFieldPropsToOmit =\n \| \"children\"\n \| \"render\"\n \| \"slot\"\n \| \"validate\"\n \| \"validationBehavior\"\n\ntype AriaNumberFieldPropsToInclude =\n \| \"formatOptions\"\n \| \"name\"\n \| \"onChange\"\n \| \"step\"\n \| \"value\"\n\nexport type NumberStepperElementProps = CombineAriaPropsWithCustomProps<\n AriaNumberFieldProps,\n NumberStepperProps,\n AriaNumberFieldPropsToOmit,\n AriaNumberFieldPropsToInclude\n>\n\n/\n A number stepper component that pairs a numeric input with increment and\n * decrement buttons. Use it when users need to enter or adjust a number by\n * small amounts, such as quantities or counts.\n \n Constrain the input with `min`, `max`, and `step`, and customize display\n * (currency, percentage, decimal precision) via the `formatOptions` prop.\n \n @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-numberstepper--docs \| Storybook Documentation}\n */\nexport function NumberStepper({\n className,\n defaultValue,\n description,\n disabled,\n hideLabel,\n invalid,\n label,\n max,\n min,\n readOnly,\n required,\n size = \"md\",\n ...restProps\n}: NumberStepperElementProps) {\n const combinedClassName = classNames(\n \"tds-field tds-number-stepper\",\n {\n \"tds-field--lg\": size === \"lg\",\n \"tds-number-stepper--lg\": size === \"lg\",\n },\n className\n )\n\n return (\n <AriaNumberField\n {...restProps}\n aria-label={hideLabel ? label : undefined}\n className={combinedClassName}\n defaultValue={defaultValue}\n isDisabled={disabled}\n isInvalid={invalid}\n isReadOnly={readOnly}\n isRequired={required}\n maxValue={max}\n minValue={min}\n >\n {!hideLabel && <Label className=\"tds-field-label\">{label}</Label>}\n <Group className=\"tds-field-control tds-number-stepper-field\">\n <Input className=\"tds-number-stepper-input\" />\n <Button\n className=\"tds-btn tds-btn--infield tds-number-stepper-button\"\n slot=\"decrement\"\n >\n <Icon aria-hidden symbol=\"general#minus\" />\n </Button>\n <Button\n className=\"tds-btn tds-btn--infield tds-number-stepper-button\"\n slot=\"increment\"\n >\n <Icon aria-hidden symbol=\"general#plus\" />\n </Button>\n </Group>\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 </AriaNumberField>\n )\n}\n"],"names":["React","AriaNumberField"],"mappings":";;;;;AAkEA;;;;;;;;;;AAUG;AACG,SAAU,aAAa,CAAC,EAC5B,SAAS,EACT,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,SAAS,EACT,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACc,EAAA;AAC1B,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,8BAA8B,EAC9B;QACE,eAAe,EAAE,IAAI,KAAK,IAAI;QAC9B,wBAAwB,EAAE,IAAI,KAAK,IAAI;KACxC,EACD,SAAS,CACV;IAED,QACEA,6BAACC,WAAe,EAAA,EAAA,GACV,SAAS,EAAA,YAAA,EACD,SAAS,GAAG,KAAK,GAAG,SAAS,EACzC,SAAS,EAAE,iBAAiB,EAC5B,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,QAAQ,EACpB,SAAS,EAAE,OAAO,EAClB,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,QAAQ,EAAE,GAAG,EACb,QAAQ,EAAE,GAAG,EAAA;QAEZ,CAAC,SAAS,IAAID,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,iBAAiB,EAAA,EAAE,KAAK,CAAS;AACjE,QAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,4CAA4C,EAAA;AAC3D,YAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,0BAA0B,EAAA,CAAG;YAC9CA,cAAA,CAAA,aAAA,CAAC,MAAM,IACL,SAAS,EAAC,oDAAoD,EAC9D,IAAI,EAAC,WAAW,EAAA;AAEhB,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EAAA,IAAA,EAAa,MAAM,EAAC,eAAe,GAAG,CACpC;YACTA,cAAA,CAAA,aAAA,CAAC,MAAM,IACL,SAAS,EAAC,oDAAoD,EAC9D,IAAI,EAAC,WAAW,EAAA;AAEhB,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EAAA,IAAA,EAAa,MAAM,EAAC,cAAc,EAAA,CAAG,CACnC,CACH;QACP,WAAW,KACVA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uBAAuB,EAAC,IAAI,EAAC,aAAa,EAAA;YACxDA,cAAA,CAAA,aAAA,CAAC,IAAI,yBAEH,SAAS,EAAC,oCAAoC,EAC9C,MAAM,EAAC,8BAA8B,EAAA,CACrC;AACD,YAAA,WAAW,CACP,CACR,CACe;AAEtB;;;;"}
1	+ {"version":3,"file":"NumberStepper.js","sources":["../../../src/components/number-stepper/NumberStepper.tsx"],"sourcesContent":["import \"../button/btn.css\"\nimport \"../input-text-base/index.css\"\nimport \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React from \"react\"\nimport {\n Button,\n Group,\n Input,\n Label,\n NumberField as AriaNumberField,\n type NumberFieldProps as AriaNumberFieldProps,\n Text,\n} from \"react-aria-components/NumberField\"\n\nexport type NumberStepperSize = \"md\" \| \"lg\"\n\nexport interface NumberStepperProps {\n /** The default uncontrolled value. /\n defaultValue?: number\n /* Helper text displayed below the component. Styled as error text when `invalid` is `true`. /\n description?: string\n /* Disables the input and stepper buttons. /\n disabled?: boolean\n /* If `true`, renders the label visually hidden. /\n hideLabel?: boolean\n /* If `true`, applies error styling to the field and description. /\n invalid?: boolean\n /* Accessible label for the field. /\n label: string\n /* Maximum allowed value. /\n max?: number\n /* Minimum allowed value. /\n min?: number\n /* Allows the value to be read but not changed. /\n readOnly?: boolean\n /* If `true`, appends an asterisk after the label text. /\n required?: boolean\n /* The size of the number stepper. /\n size?: NumberStepperSize\n}\n\ntype AriaNumberFieldPropsToOmit =\n \| \"children\"\n \| \"render\"\n \| \"slot\"\n \| \"validate\"\n \| \"validationBehavior\"\n\ntype AriaNumberFieldPropsToInclude =\n \| \"formatOptions\"\n \| \"name\"\n \| \"onChange\"\n \| \"step\"\n \| \"value\"\n\nexport type NumberStepperElementProps = CombineAriaPropsWithCustomProps<\n AriaNumberFieldProps,\n NumberStepperProps,\n AriaNumberFieldPropsToOmit,\n AriaNumberFieldPropsToInclude\n>\n\n/\n A number stepper component that pairs a numeric input with increment and\n * decrement buttons. Use it when users need to enter or adjust a number by\n * small amounts, such as quantities or counts.\n \n Constrain the input with `min`, `max`, and `step`, and customize display\n * (currency, percentage, decimal precision) via the `formatOptions` prop.\n \n @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-numberstepper--docs \| Storybook Documentation}\n */\nexport function NumberStepper({\n className,\n defaultValue,\n description,\n disabled,\n hideLabel,\n invalid,\n label,\n max,\n min,\n readOnly,\n required,\n size = \"md\",\n ...restProps\n}: NumberStepperElementProps) {\n const combinedClassName = classNames(\n \"tds-field tds-number-stepper\",\n {\n \"tds-field--lg\": size === \"lg\",\n \"tds-number-stepper--lg\": size === \"lg\",\n },\n className\n )\n\n return (\n <AriaNumberField\n {...restProps}\n aria-label={hideLabel ? label : undefined}\n className={combinedClassName}\n defaultValue={defaultValue}\n isDisabled={disabled}\n isInvalid={invalid}\n isReadOnly={readOnly}\n isRequired={required}\n maxValue={max}\n minValue={min}\n >\n {!hideLabel && <Label className=\"tds-field-label\">{label}</Label>}\n <Group className=\"tds-field-control tds-number-stepper-field\">\n <Input className=\"tds-number-stepper-input\" />\n <Button\n className=\"tds-btn tds-btn--infield tds-number-stepper-button\"\n slot=\"decrement\"\n >\n <Icon aria-hidden symbol=\"general#minus\" />\n </Button>\n <Button\n className=\"tds-btn tds-btn--infield tds-number-stepper-button\"\n slot=\"increment\"\n >\n <Icon aria-hidden symbol=\"general#plus\" />\n </Button>\n </Group>\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 </AriaNumberField>\n )\n}\n"],"names":["React","AriaNumberField"],"mappings":";;;;;AAkEA;;;;;;;;;;AAUG;AACG,SAAU,aAAa,CAAC,EAC5B,SAAS,EACT,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,SAAS,EACT,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACc,EAAA;AAC1B,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,8BAA8B,EAC9B;QACE,eAAe,EAAE,IAAI,KAAK,IAAI;QAC9B,wBAAwB,EAAE,IAAI,KAAK,IAAI;KACxC,EACD,SAAS,CACV;IAED,QACEA,6BAACC,WAAe,EAAA,EAAA,GACV,SAAS,EAAA,YAAA,EACD,SAAS,GAAG,KAAK,GAAG,SAAS,EACzC,SAAS,EAAE,iBAAiB,EAC5B,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,QAAQ,EACpB,SAAS,EAAE,OAAO,EAClB,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,QAAQ,EAAE,GAAG,EACb,QAAQ,EAAE,GAAG,EAAA;QAEZ,CAAC,SAAS,IAAID,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,iBAAiB,EAAA,EAAE,KAAK,CAAS;AACjE,QAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,4CAA4C,EAAA;AAC3D,YAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,0BAA0B,EAAA,CAAG;YAC9CA,cAAA,CAAA,aAAA,CAAC,MAAM,IACL,SAAS,EAAC,oDAAoD,EAC9D,IAAI,EAAC,WAAW,EAAA;AAEhB,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EAAA,IAAA,EAAa,MAAM,EAAC,eAAe,GAAG,CACpC;YACTA,cAAA,CAAA,aAAA,CAAC,MAAM,IACL,SAAS,EAAC,oDAAoD,EAC9D,IAAI,EAAC,WAAW,EAAA;AAEhB,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EAAA,IAAA,EAAa,MAAM,EAAC,cAAc,EAAA,CAAG,CACnC,CACH;QACP,WAAW,KACVA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uBAAuB,EAAC,IAAI,EAAC,aAAa,EAAA;YACxDA,cAAA,CAAA,aAAA,CAAC,IAAI,yBAEH,SAAS,EAAC,oCAAoC,EAC9C,MAAM,EAAC,8BAA8B,EAAA,CACrC;AACD,YAAA,WAAW,CACP,CACR,CACe;AAEtB;;;;"}

package/dist/components/page-header/PageHeader.d.ts CHANGED Viewed

@@ -1,4 +1,12 @@
 import React from "react";
+/**
+ * A page header lays out the primary title, optional navigation, and
+ * action buttons at the top of a page. Use one per page to anchor the
+ * page's identity and primary controls.
+ *
+ * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-page-header--docs | Storybook Documentation}
+ */
 export declare function PageHeader({ children, actions, navigation, className, inactive, profile, }: {
     /**
      * Actions to be displayed on the right side of the header. Elements

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/PageHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAEhD,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"}
1	+ {"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/PageHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAEhD;;;;;;;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"}

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

@@ -1,6 +1,14 @@
 import classNames from 'classnames';
 import React, { useRef, useEffect } from 'react';
+/**
+ * A page header lays out the primary title, optional navigation, and
+ * action buttons at the top of a page. Use one per page to anchor the
+ * page's identity and primary controls.
+ *
+ * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-page-header--docs | Storybook Documentation}
+ */
 function PageHeader({ children, actions, navigation, className, inactive = false, profile = false, }) {
     const hasMultiActions = actions
         ? React.isValidElement(actions) && actions.type === React.Fragment

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PageHeader.js","sources":["../../../src/components/page-header/PageHeader.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport React, { useEffect, useRef } from \"react\"\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 const nav = useScrollToSelected(navigation)\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 ref={nav} className=\"tds-page-header__nav tds-no-print\">\n {navigation}\n </nav>\n )}\n </header>\n )\n}\n\nfunction useScrollToSelected(navigation: React.ReactNode) {\n const nav = useRef<HTMLElement>(null)\n useEffect(() => {\n if (!nav.current) return\n const ulElement = nav.current.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 }, [navigation])\n return nav\n}\n"],"names":[],"mappings":";;;~~SAGgB~~,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;AAET,IAAA,MAAM,GAAG,GAAG,mBAAmB,CAAC,UAAU,CAAC;IAE3C,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,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,mCAAmC,IACzD,UAAU,CACP,CACP,CACM;AAEb;AAEA,SAAS,mBAAmB,CAAC,UAA2B,EAAA;AACtD,IAAA,MAAM,GAAG,GAAG,MAAM,CAAc,IAAI,CAAC;IACrC,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,GAAG,CAAC,OAAO;YAAE;QAClB,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC;AACjD,QAAA,IAAI,CAAC,SAAS;YAAE;QAChB,MAAM,YAAY,GAAG,SAAS,CAAC,aAAa,CAAC,WAAW,CAAC;QACzD,IAAI,YAAY,EAAE;AAChB,YAAA,MAAM,MAAM,GAAG,YAAY,CAAC,qBAAqB,EAAE;AACnD,YAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,qBAAqB,EAAE;AAClD,YAAA,IAAI,MAAM,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,IAAI,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,EAAE;gBAChE,SAAS,CAAC,QAAQ,CAAC;oBACjB,IAAI,EAAE,SAAS,CAAC,UAAU,GAAG,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI;AACzD,iBAAA,CAAC;YACJ;QACF;AACF,IAAA,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;AAChB,IAAA,OAAO,GAAG;AACZ;;;;"}
1	+ {"version":3,"file":"PageHeader.js","sources":["../../../src/components/page-header/PageHeader.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport React, { useEffect, useRef } 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 const nav = useScrollToSelected(navigation)\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 ref={nav} className=\"tds-page-header__nav tds-no-print\">\n {navigation}\n </nav>\n )}\n </header>\n )\n}\n\nfunction useScrollToSelected(navigation: React.ReactNode) {\n const nav = useRef<HTMLElement>(null)\n useEffect(() => {\n if (!nav.current) return\n const ulElement = nav.current.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 }, [navigation])\n return nav\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;AAET,IAAA,MAAM,GAAG,GAAG,mBAAmB,CAAC,UAAU,CAAC;IAE3C,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,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,mCAAmC,IACzD,UAAU,CACP,CACP,CACM;AAEb;AAEA,SAAS,mBAAmB,CAAC,UAA2B,EAAA;AACtD,IAAA,MAAM,GAAG,GAAG,MAAM,CAAc,IAAI,CAAC;IACrC,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,GAAG,CAAC,OAAO;YAAE;QAClB,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC;AACjD,QAAA,IAAI,CAAC,SAAS;YAAE;QAChB,MAAM,YAAY,GAAG,SAAS,CAAC,aAAa,CAAC,WAAW,CAAC;QACzD,IAAI,YAAY,EAAE;AAChB,YAAA,MAAM,MAAM,GAAG,YAAY,CAAC,qBAAqB,EAAE;AACnD,YAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,qBAAqB,EAAE;AAClD,YAAA,IAAI,MAAM,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,IAAI,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,EAAE;gBAChE,SAAS,CAAC,QAAQ,CAAC;oBACjB,IAAI,EAAE,SAAS,CAAC,UAAU,GAAG,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI;AACzD,iBAAA,CAAC;YACJ;QACF;AACF,IAAA,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;AAChB,IAAA,OAAO,GAAG;AACZ;;;;"}

package/dist/components/radio/Radio.d.ts CHANGED Viewed

@@ -39,6 +39,7 @@ export type RadioElementProps = Omit<InputHTMLAttributes<HTMLInputElement>, keyo
  * `<button>`, as well as Tapestry or Tapestry-React interactive components.
  *
  * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-radio--docs | Storybook Documentation}
  */
 export declare const Radio: React.ForwardRefExoticComponent<RadioElementProps & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/radio/Radio.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAE9D,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;AAEnC,UAAU,cAAc;IACtB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oFAAoF;IACpF,IAAI,EAAE,MAAM,CAAA;IACZ,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED,UAAU,cAAe,SAAQ,cAAc;IAC7C,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB;;;;;OAKG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,UAAU,uBAAwB,SAAQ,cAAc;IACtD,iBAAiB,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,uBAAuB,CAAA;AAEjE,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,UAAU,GAAG,MAAM,CAC1B,GACC,UAAU,CAAA;AAEZ~~;;;;;;;;;;;;;;GAcG~~;AACH,eAAO,MAAM,KAAK,4FAuCjB,CAAA"}
1	+ {"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAE9D,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;AAEnC,UAAU,cAAc;IACtB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oFAAoF;IACpF,IAAI,EAAE,MAAM,CAAA;IACZ,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED,UAAU,cAAe,SAAQ,cAAc;IAC7C,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB;;;;;OAKG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,UAAU,uBAAwB,SAAQ,cAAc;IACtD,iBAAiB,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,uBAAuB,CAAA;AAEjE,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,UAAU,GAAG,MAAM,CAC1B,GACC,UAAU,CAAA;AAEZ;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,KAAK,4FAuCjB,CAAA"}

package/dist/components/radio/Radio.js CHANGED Viewed

@@ -16,6 +16,7 @@ import React__default, { forwardRef } from 'react';
  * `<button>`, as well as Tapestry or Tapestry-React interactive components.
  *
  * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-radio--docs | Storybook Documentation}
  */
 const Radio = forwardRef(({ className, description, id, label, size = "md", ...restProps }, ref) => {
     const combinedClassName = classNames("tds-radio", size && size === "sm" && `tds-radio--sm`, className);

package/dist/components/radio/Radio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, InputHTMLAttributes } from \"react\"\n\nexport type RadioSize = \"md\" \| \"sm\"\n\ninterface RadioBaseProps {\n /** Optional description text that appears below the radio label. /\n description?: string\n /* The name of the radio group. All radios in the group must have the same name. /\n name: string\n /* The size of the radio. /\n size?: RadioSize\n}\n\ninterface RadioWithLabel extends RadioBaseProps {\n \"aria-labelledby\"?: never\n /\n Label content for the radio. 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 RadioWithAriaLabelledBy extends RadioBaseProps {\n \"aria-labelledby\": string\n label?: never\n}\n\nexport type RadioProps = RadioWithLabel \| RadioWithAriaLabelledBy\n\nexport type RadioElementProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n keyof RadioProps \| \"type\"\n> &\n RadioProps\n\n/\n A radio component that renders as a radio input with label.\n * Supports various sizes.\n * Must have a name attribute.\n \n Required: You must provide either:\n * - `label` - Label content for the radio\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 Radio = forwardRef<HTMLInputElement, RadioElementProps>(\n (\n {\n className,\n description,\n id,\n label,\n size = \"md\",\n ...restProps\n }: RadioElementProps,\n ref\n ) => {\n const combinedClassName = classNames(\n \"tds-radio\",\n size && size === \"sm\" && `tds-radio--sm`,\n className\n )\n\n const stableId = useId()\n const radioId = id \|\| `tds-radio-${stableId}`\n\n return (\n <div className={combinedClassName}>\n <input\n {...restProps}\n aria-describedby={description ? `${radioId}-description` : undefined}\n id={radioId}\n ref={ref}\n type=\"radio\"\n />\n {label && <label htmlFor={radioId}>{label}</label>}\n {description && (\n <p id={`${radioId}-description`} className=\"tds-radio-description\">\n {description}\n </p>\n )}\n </div>\n )\n }\n)\n\nRadio.displayName = \"Radio\"\n"],"names":["React"],"mappings":";;;;AAyCA~~;;;;;;;;;;;;;;AAcG~~;AACI,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,SAAS,EACT,WAAW,EACX,EAAE,EACF,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACM,EACpB,GAAG,KACD;AACF,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,WAAW,EACX,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,CAAA,aAAA,CAAe,EACxC,SAAS,CACV;AAED,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,OAAO,GAAG,EAAE,IAAI,CAAA,UAAA,EAAa,QAAQ,EAAE;AAE7C,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;QAC/BA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,SAAS,EAAA,kBAAA,EACK,WAAW,GAAG,CAAA,EAAG,OAAO,CAAA,YAAA,CAAc,GAAG,SAAS,EACpE,EAAE,EAAE,OAAO,EACX,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EAAA,CACZ;AACD,QAAA,KAAK,IAAIA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,OAAO,EAAA,EAAG,KAAK,CAAS;AACjD,QAAA,WAAW,KACVA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,EAAE,EAAE,CAAA,EAAG,OAAO,CAAA,YAAA,CAAc,EAAE,SAAS,EAAC,uBAAuB,EAAA,EAC/D,WAAW,CACV,CACL,CACG;AAEV,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}
1	+ {"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, InputHTMLAttributes } from \"react\"\n\nexport type RadioSize = \"md\" \| \"sm\"\n\ninterface RadioBaseProps {\n /** Optional description text that appears below the radio label. /\n description?: string\n /* The name of the radio group. All radios in the group must have the same name. /\n name: string\n /* The size of the radio. /\n size?: RadioSize\n}\n\ninterface RadioWithLabel extends RadioBaseProps {\n \"aria-labelledby\"?: never\n /\n Label content for the radio. 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 RadioWithAriaLabelledBy extends RadioBaseProps {\n \"aria-labelledby\": string\n label?: never\n}\n\nexport type RadioProps = RadioWithLabel \| RadioWithAriaLabelledBy\n\nexport type RadioElementProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n keyof RadioProps \| \"type\"\n> &\n RadioProps\n\n/\n A radio component that renders as a radio input with label.\n * Supports various sizes.\n * Must have a name attribute.\n \n Required: You must provide either:\n * - `label` - Label content for the radio\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-radio--docs \| Storybook Documentation}\n */\nexport const Radio = forwardRef<HTMLInputElement, RadioElementProps>(\n (\n {\n className,\n description,\n id,\n label,\n size = \"md\",\n ...restProps\n }: RadioElementProps,\n ref\n ) => {\n const combinedClassName = classNames(\n \"tds-radio\",\n size && size === \"sm\" && `tds-radio--sm`,\n className\n )\n\n const stableId = useId()\n const radioId = id \|\| `tds-radio-${stableId}`\n\n return (\n <div className={combinedClassName}>\n <input\n {...restProps}\n aria-describedby={description ? `${radioId}-description` : undefined}\n id={radioId}\n ref={ref}\n type=\"radio\"\n />\n {label && <label htmlFor={radioId}>{label}</label>}\n {description && (\n <p id={`${radioId}-description`} className=\"tds-radio-description\">\n {description}\n </p>\n )}\n </div>\n )\n }\n)\n\nRadio.displayName = \"Radio\"\n"],"names":["React"],"mappings":";;;;AAyCA;;;;;;;;;;;;;;;AAeG;AACI,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,SAAS,EACT,WAAW,EACX,EAAE,EACF,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACM,EACpB,GAAG,KACD;AACF,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,WAAW,EACX,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,CAAA,aAAA,CAAe,EACxC,SAAS,CACV;AAED,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,OAAO,GAAG,EAAE,IAAI,CAAA,UAAA,EAAa,QAAQ,EAAE;AAE7C,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;QAC/BA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,SAAS,EAAA,kBAAA,EACK,WAAW,GAAG,CAAA,EAAG,OAAO,CAAA,YAAA,CAAc,GAAG,SAAS,EACpE,EAAE,EAAE,OAAO,EACX,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EAAA,CACZ;AACD,QAAA,KAAK,IAAIA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,OAAO,EAAA,EAAG,KAAK,CAAS;AACjD,QAAA,WAAW,KACVA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,EAAE,EAAE,CAAA,EAAG,OAAO,CAAA,YAAA,CAAc,EAAE,SAAS,EAAC,uBAAuB,EAAA,EAC/D,WAAW,CACV,CACL,CACG;AAEV,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

package/dist/components/radio-group/RadioGroup.d.ts CHANGED Viewed

@@ -19,6 +19,7 @@ export type RadioGroupElementProps = Omit<FieldsetHTMLAttributes<HTMLFieldSetEle
  * Label is required and must be a string. Renders as <legend>.
  *
  * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-radio-group--docs | Storybook Documentation}
  */
 export declare const RadioGroup: {
     ({ children, className, description, invalid, label, size, ...restProps }: RadioGroupElementProps): React.JSX.Element;

package/dist/components/radio-group/RadioGroup.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAKpB,OAAO,KAAK,EAAE,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAA;AAErD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAA;AAExC,MAAM,WAAW,eAAe;IAC9B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uJAAuJ;IACvJ,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+GAA+G;IAC/G,KAAK,EAAE,MAAM,CAAA;IACb,8CAA8C;IAC9C,IAAI,CAAC,EAAE,cAAc,CAAA;CACtB;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,MAAM,eAAe,CACtB,GACC,eAAe,CAAA;AAEjB~~;;;;;;;GAOG~~;AACH,eAAO,MAAM,UAAU;+EAQpB,sBAAsB;;CAiCxB,CAAA"}
1	+ {"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAKpB,OAAO,KAAK,EAAE,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAA;AAErD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAA;AAExC,MAAM,WAAW,eAAe;IAC9B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uJAAuJ;IACvJ,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+GAA+G;IAC/G,KAAK,EAAE,MAAM,CAAA;IACb,8CAA8C;IAC9C,IAAI,CAAC,EAAE,cAAc,CAAA;CACtB;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,MAAM,eAAe,CACtB,GACC,eAAe,CAAA;AAEjB;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU;+EAQpB,sBAAsB;;CAiCxB,CAAA"}

package/dist/components/radio-group/RadioGroup.js CHANGED Viewed

@@ -10,6 +10,7 @@ import React__default from 'react';
  * Label is required and must be a string. Renders as <legend>.
  *
  * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-radio-group--docs | Storybook Documentation}
  */
 const RadioGroup = ({ children, className, description, invalid, label, size = "md", ...restProps }) => {
     const combinedClassName = classNames("tds-radio-group", size && size === "sm" && "tds-radio-group--sm", className);

package/dist/components/radio-group/RadioGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioGroup.js","sources":["../../../src/components/radio-group/RadioGroup.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { FieldsetHTMLAttributes } from \"react\"\n\nexport type RadioGroupSize = \"md\" \| \"sm\"\n\nexport interface RadioGroupProps {\n /** Optional description text that appears below the label. /\n description?: string\n /* Is invalid. If true, include a description to explain why; and if no description is provided, description defaults to \"Please select an option\". /\n invalid?: boolean\n /* The label text (required). Renders as `<legend>` (not `<label>`) because `RadioGroup` is a `<fieldset>`. /\n label: string\n /* The size. Does not affect child radios. /\n size?: RadioGroupSize\n}\n\nexport type RadioGroupElementProps = Omit<\n FieldsetHTMLAttributes<HTMLFieldSetElement>,\n keyof RadioGroupProps\n> &\n RadioGroupProps\n\n/\n A radio group component that renders as a fieldset with legend.\n * Use to group two or more Radio components.\n * Supports label and description text, sizes, invalid, and disabled state.\n * Label is required and must be a string. Renders as <legend>.\n \n @component\n */\nexport const RadioGroup = ({\n children,\n className,\n description,\n invalid,\n label,\n size = \"md\",\n ...restProps\n}: RadioGroupElementProps) => {\n const combinedClassName = classNames(\n \"tds-radio-group\",\n size && size === \"sm\" && \"tds-radio-group--sm\",\n className\n )\n const stableId = useId()\n\n const displayDescription =\n description \|\| (invalid ? \"Please select an option\" : undefined)\n const descriptionId = `tds-radio-group-${stableId}-description`\n\n return (\n <fieldset\n {...restProps}\n aria-describedby={displayDescription ? descriptionId : undefined}\n aria-invalid={invalid ? \"true\" : undefined}\n className={combinedClassName}\n >\n <legend>{label}</legend>\n {displayDescription && (\n <p id={descriptionId} className=\"tds-radio-group-description\">\n <Icon\n className=\"tds-radio-group-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n aria-hidden\n />\n {displayDescription}\n </p>\n )}\n <div className=\"tds-radio-group-fields\">{children}</div>\n </fieldset>\n )\n}\n\nRadioGroup.displayName = \"RadioGroup\"\n"],"names":["React"],"mappings":";;;;;AA0BA~~;;;;;;;AAOG~~;AACI,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,WAAW,EACX,OAAO,EACP,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACW,KAAI;AAC3B,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,iBAAiB,EACjB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,qBAAqB,EAC9C,SAAS,CACV;AACD,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AAExB,IAAA,MAAM,kBAAkB,GACtB,WAAW,KAAK,OAAO,GAAG,yBAAyB,GAAG,SAAS,CAAC;AAClE,IAAA,MAAM,aAAa,GAAG,CAAA,gBAAA,EAAmB,QAAQ,cAAc;IAE/D,QACEA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAA,GACM,SAAS,EAAA,kBAAA,EACK,kBAAkB,GAAG,aAAa,GAAG,SAAS,kBAClD,OAAO,GAAG,MAAM,GAAG,SAAS,EAC1C,SAAS,EAAE,iBAAiB,EAAA;AAE5B,QAAAA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA,EAAS,KAAK,CAAU;QACvB,kBAAkB,KACjBA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,EAAE,EAAE,aAAa,EAAE,SAAS,EAAC,6BAA6B,EAAA;YAC3DA,cAAA,CAAA,aAAA,CAAC,IAAI,IACH,SAAS,EAAC,0CAA0C,EACpD,MAAM,EAAC,8BAA8B,EAAA,aAAA,EAAA,IAAA,EAAA,CAErC;AACD,YAAA,kBAAkB,CACjB,CACL;QACDA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAA,EAAE,QAAQ,CAAO,CAC/C;AAEf;AAEA,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
1	+ {"version":3,"file":"RadioGroup.js","sources":["../../../src/components/radio-group/RadioGroup.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { FieldsetHTMLAttributes } from \"react\"\n\nexport type RadioGroupSize = \"md\" \| \"sm\"\n\nexport interface RadioGroupProps {\n /** Optional description text that appears below the label. /\n description?: string\n /* Is invalid. If true, include a description to explain why; and if no description is provided, description defaults to \"Please select an option\". /\n invalid?: boolean\n /* The label text (required). Renders as `<legend>` (not `<label>`) because `RadioGroup` is a `<fieldset>`. /\n label: string\n /* The size. Does not affect child radios. /\n size?: RadioGroupSize\n}\n\nexport type RadioGroupElementProps = Omit<\n FieldsetHTMLAttributes<HTMLFieldSetElement>,\n keyof RadioGroupProps\n> &\n RadioGroupProps\n\n/\n A radio group component that renders as a fieldset with legend.\n * Use to group two or more Radio components.\n * Supports label and description text, sizes, invalid, and disabled state.\n * Label is required and must be a string. Renders as <legend>.\n \n @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-radio-group--docs \| Storybook Documentation}\n */\nexport const RadioGroup = ({\n children,\n className,\n description,\n invalid,\n label,\n size = \"md\",\n ...restProps\n}: RadioGroupElementProps) => {\n const combinedClassName = classNames(\n \"tds-radio-group\",\n size && size === \"sm\" && \"tds-radio-group--sm\",\n className\n )\n const stableId = useId()\n\n const displayDescription =\n description \|\| (invalid ? \"Please select an option\" : undefined)\n const descriptionId = `tds-radio-group-${stableId}-description`\n\n return (\n <fieldset\n {...restProps}\n aria-describedby={displayDescription ? descriptionId : undefined}\n aria-invalid={invalid ? \"true\" : undefined}\n className={combinedClassName}\n >\n <legend>{label}</legend>\n {displayDescription && (\n <p id={descriptionId} className=\"tds-radio-group-description\">\n <Icon\n className=\"tds-radio-group-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n aria-hidden\n />\n {displayDescription}\n </p>\n )}\n <div className=\"tds-radio-group-fields\">{children}</div>\n </fieldset>\n )\n}\n\nRadioGroup.displayName = \"RadioGroup\"\n"],"names":["React"],"mappings":";;;;;AA0BA;;;;;;;;AAQG;AACI,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,WAAW,EACX,OAAO,EACP,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACW,KAAI;AAC3B,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,iBAAiB,EACjB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,qBAAqB,EAC9C,SAAS,CACV;AACD,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AAExB,IAAA,MAAM,kBAAkB,GACtB,WAAW,KAAK,OAAO,GAAG,yBAAyB,GAAG,SAAS,CAAC;AAClE,IAAA,MAAM,aAAa,GAAG,CAAA,gBAAA,EAAmB,QAAQ,cAAc;IAE/D,QACEA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAA,GACM,SAAS,EAAA,kBAAA,EACK,kBAAkB,GAAG,aAAa,GAAG,SAAS,kBAClD,OAAO,GAAG,MAAM,GAAG,SAAS,EAC1C,SAAS,EAAE,iBAAiB,EAAA;AAE5B,QAAAA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA,EAAS,KAAK,CAAU;QACvB,kBAAkB,KACjBA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,EAAE,EAAE,aAAa,EAAE,SAAS,EAAC,6BAA6B,EAAA;YAC3DA,cAAA,CAAA,aAAA,CAAC,IAAI,IACH,SAAS,EAAC,0CAA0C,EACpD,MAAM,EAAC,8BAA8B,EAAA,aAAA,EAAA,IAAA,EAAA,CAErC;AACD,YAAA,kBAAkB,CACjB,CACL;QACDA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAA,EAAE,QAAQ,CAAO,CAC/C;AAEf;AAEA,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

package/dist/components/select/Select.d.ts CHANGED Viewed

@@ -137,6 +137,15 @@ export type ComplexSelectElementProps = BaseSelectElementProps & SelectProps & {
     complex: true;
 };
 export type SelectElementProps = NativeSelectElementProps | ComplexSelectElementProps;
+/**
+ * A select component for choosing a single value from a list of options.
+ * By default renders a native `<select>`; set `complex` to render a popover
+ * listbox that supports rich option content (icons, descriptions). Supports
+ * option groups, dividers, invalid state, and `lg`/`md` sizing.
+ *
+ * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-select--docs | Storybook Documentation}
+ */
 export declare const Select: React.ForwardRefExoticComponent<SelectElementProps & React.RefAttributes<HTMLSelectElement>>;
 export {};
 //# sourceMappingURL=Select.d.ts.map

package/dist/components/select/Select.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.tsx"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.tsx"],"names":[],"mappings":"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"}

package/dist/components/select/Select.js CHANGED Viewed

@@ -15,6 +15,15 @@ function normalizeSelectValue(value) {
 // ---------------------------------------------------------------------------
 // Select (public)
 // ---------------------------------------------------------------------------
+/**
+ * A select component for choosing a single value from a list of options.
+ * By default renders a native `<select>`; set `complex` to render a popover
+ * listbox that supports rich option content (icons, descriptions). Supports
+ * option groups, dividers, invalid state, and `lg`/`md` sizing.
+ *
+ * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-select--docs | Storybook Documentation}
+ */
 const Select = forwardRef(function Select(props, ref) {
     const { "aria-label": userAriaLabel, "aria-labelledby": userAriaLabelledBy, className, complex, defaultValue, description, hideLabel, id, invalid, label, onChange, options, placeholder, required, size, value, ...restProps } = props;
     const triggerRef = useRef(null);

package/dist/components/select/Select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, type SelectHTMLAttributes, useRef } from \"react\"\n\nimport { SelectNative } from \"./SelectNative\"\nimport { SelectPopover } from \"./SelectPopover\"\n\n// ---------------------------------------------------------------------------\n// Shared types\n// ---------------------------------------------------------------------------\n\nexport type SelectSize = \"lg\" \| \"md\"\n\n/*\n String-labelled option variant. Valid in both native (`complex={false}`)\n * and complex (`complex={true}`) modes. The `label` doubles as the type-ahead\n * search target.\n /\nexport interface SelectOptionWithTextLabel {\n /* Arbitrary `data-` attributes are forwarded to the rendered option. /\n [key: `data-${string}`]: boolean \| number \| string \| undefined\n /** Whether this option is non-interactive. /\n disabled?: boolean\n divider?: never\n /* Displayed as the option content and used for type-ahead matching. /\n label: string\n textValue?: never\n /* Unique identifier for the option. /\n value: string\n}\n\n/\n Rich-content option variant. The popover (`complex={true}`) renders the\n * `label` node directly; the native `<select>` (`complex={false}`) falls back\n * to `textValue` for the visible text. Requires a plain-text `textValue` so\n * type-ahead matching, screen reader announcements, and the native fallback\n * all have something stable to use.\n /\nexport interface SelectOptionWithNodeLabel {\n /* Arbitrary `data-` attributes are forwarded to the rendered option. /\n [key: `data-${string}`]: boolean \| number \| string \| undefined\n /** Whether this option is non-interactive. /\n disabled?: boolean\n divider?: never\n /\n Option content. Rendered as JSX in complex mode; in native mode, the\n * visible text comes from `textValue` instead.\n /\n label: React.ReactNode\n /\n Plain-text fallback for type-ahead matching, screen reader\n * announcements, and the native `<select>`'s visible option text when\n * `label` is a React node.\n /\n textValue: string\n /* Unique identifier for the option. /\n value: string\n}\n\n/\n Visual-separator option variant. Renders a divider line between options\n * (or between groups of options). Carries no value of its own.\n /\nexport interface SelectOptionDivider {\n disabled?: never\n /* Renders a visual separator between options. /\n divider: true\n label?: never\n textValue?: never\n value?: never\n}\n\nexport type SelectOption =\n \| SelectOptionDivider\n \| SelectOptionWithNodeLabel\n \| SelectOptionWithTextLabel\n\n/\n A group entry in `Select`'s `options` array. Renders a heading above its\n * `options` and nests them visually beneath it.\n /\nexport interface SelectOptionsGroup {\n /\n Whether all options in this group are non-interactive. Disables every\n * nested option regardless of its own `disabled` flag.\n /\n disabled?: boolean\n /* Visible heading displayed above the group's options. /\n label: string\n /* The selectable options nested under this group. /\n options: SelectOption[]\n}\n\nexport type SelectItem = SelectOption \| SelectOptionsGroup\n\n// ---------------------------------------------------------------------------\n// Select component props\n// ---------------------------------------------------------------------------\n\ninterface SelectBaseProps {\n /\n When true, renders as a popover listbox instead of a native `<select>`.\n * Enables rich content in options (icons, descriptions).\n /\n complex?: boolean\n /\n Helper text displayed below the select. Styled as error text when\n * `invalid`. Defaults to `\"Please select an option\"` when `invalid` is true\n * and no description is provided.\n /\n description?: string\n /\n Whether the select is in an invalid state. Shows the default description\n * if none is provided.\n /\n invalid?: boolean\n /* A flat or mixed array of options and option groups. /\n options: SelectItem[]\n /* Placeholder text shown when no option is selected. Defaults to `\"Select an option\"`. /\n placeholder?: string\n /* The size of the select. /\n size?: SelectSize\n}\n\ninterface SelectWithVisibleLabel extends SelectBaseProps {\n /* If true, the label is visually hidden and set as aria-label. /\n hideLabel?: false\n /\n The label text for the select. Required unless `aria-label` or\n * `aria-labelledby` is provided.\n /\n label: string\n}\n\ninterface SelectWithHiddenLabel extends SelectBaseProps {\n /* If true, the label is visually hidden and set as aria-label. /\n hideLabel: true\n /* The label text for the select. Must be a string when hidden. /\n label: string\n}\n\ninterface SelectWithAriaLabel extends SelectBaseProps {\n /* Accessible label for the select. Use when no visible label exists. /\n \"aria-label\": string\n hideLabel?: never\n label?: never\n}\n\ninterface SelectWithAriaLabelledBy extends SelectBaseProps {\n /\n ID of an external label element. Use instead of `label` when a visible\n * label exists elsewhere on the page.\n */\n \"aria-labelledby\": string\n hideLabel?: never\n label?: never\n}\n\nexport type SelectProps =\n \| SelectWithAriaLabel\n \| SelectWithAriaLabelledBy\n \| SelectWithHiddenLabel\n \| SelectWithVisibleLabel\n\ntype BaseSelectElementProps = Omit<\n SelectHTMLAttributes<HTMLSelectElement>,\n keyof SelectProps \| \"multiple\" \| \"size\"\n>\n\nexport type NativeSelectElementProps = BaseSelectElementProps &\n SelectProps & {\n complex?: false\n }\n\nexport type ComplexSelectElementProps = BaseSelectElementProps &\n SelectProps & {\n complex: true\n }\n\nexport type SelectElementProps =\n \| NativeSelectElementProps\n \| ComplexSelectElementProps\n\nfunction normalizeSelectValue(\n value:\n \| NativeSelectElementProps[\"defaultValue\"]\n \| NativeSelectElementProps[\"value\"]\n \| ComplexSelectElementProps[\"defaultValue\"]\n \| ComplexSelectElementProps[\"value\"]\n) {\n if (value === undefined \|\| value === null) return undefined\n if (Array.isArray(value)) return value[0]\n return String(value)\n}\n\n// ---------------------------------------------------------------------------\n// Select (public)\n// ---------------------------------------------------------------------------\n\nexport const Select = forwardRef<HTMLSelectElement, SelectElementProps>(\n function Select(props: SelectElementProps, ref) {\n const {\n \"aria-label\": userAriaLabel,\n \"aria-labelledby\": userAriaLabelledBy,\n className,\n complex,\n defaultValue,\n description,\n hideLabel,\n id,\n invalid,\n label,\n onChange,\n options,\n placeholder,\n required,\n size,\n value,\n ...restProps\n } = props\n\n const triggerRef = useRef<HTMLButtonElement>(null)\n const stableId = useId()\n const controlId = id \|\| `tds-select-${stableId}`\n const labelId = `${controlId}-label`\n const resolvedDescription =\n description \|\| (invalid ? \"Please select an option\" : undefined)\n const descriptionId = resolvedDescription\n ? `${controlId}-description`\n : undefined\n const computedClassName = classNames(\n \"tds-select\",\n {\n \"tds-select--invalid\": invalid,\n \"tds-select--lg\": size === \"lg\",\n \"tds-select--required\": required,\n },\n className\n )\n\n const normalizedDefaultValue = normalizeSelectValue(defaultValue)\n const normalizedValue = normalizeSelectValue(value)\n\n const computedDefaultValue =\n normalizedDefaultValue === undefined && normalizedValue === undefined\n ? \"\"\n : normalizedDefaultValue\n const effectivePlaceholder =\n normalizedDefaultValue !== undefined && normalizedDefaultValue !== \"\"\n ? null\n : placeholder \|\| \"Select an option\"\n const showLabel = !!label && !hideLabel\n const computedAriaLabel = userAriaLabel ?? (hideLabel ? label : undefined)\n const computedAriaLabelledBy =\n userAriaLabelledBy ??\n (computedAriaLabel \|\| !showLabel ? undefined : labelId)\n\n const sharedControlProps = {\n ...restProps,\n \"aria-describedby\": descriptionId,\n \"aria-label\": computedAriaLabel,\n \"aria-labelledby\": computedAriaLabelledBy,\n defaultValue: computedDefaultValue,\n invalid,\n options,\n placeholder: effectivePlaceholder,\n required,\n value: normalizedValue,\n }\n\n const handleComplexLabelClick = () => triggerRef.current?.focus()\n\n const SelectComponent = complex ? SelectPopover : SelectNative\n\n return (\n <div className={computedClassName}>\n {showLabel &&\n (complex ? (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- mirrors native label click-to-focus; keyboard users interact with the combobox directly\n <div\n className=\"tds-select-label\"\n id={labelId}\n onClick={handleComplexLabelClick}\n >\n {label}\n </div>\n ) : (\n <label htmlFor={controlId} id={labelId}>\n {label}\n </label>\n ))}\n <SelectComponent\n {...sharedControlProps}\n ref={ref}\n id={controlId}\n onChange={onChange}\n {...(complex && { triggerRef })}\n />\n {resolvedDescription && descriptionId && (\n <p className=\"tds-select-description\" id={descriptionId}>\n <Icon\n aria-hidden\n className=\"tds-select-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n />\n {resolvedDescription}\n </p>\n )}\n </div>\n )\n }\n)\n\nSelect.displayName = \"Select\"\n"],"names":["React"],"mappings":"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"}
1	+ {"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, type SelectHTMLAttributes, useRef } from \"react\"\n\nimport { SelectNative } from \"./SelectNative\"\nimport { SelectPopover } from \"./SelectPopover\"\n\n// ---------------------------------------------------------------------------\n// Shared types\n// ---------------------------------------------------------------------------\n\nexport type SelectSize = \"lg\" \| \"md\"\n\n/*\n String-labelled option variant. Valid in both native (`complex={false}`)\n * and complex (`complex={true}`) modes. The `label` doubles as the type-ahead\n * search target.\n /\nexport interface SelectOptionWithTextLabel {\n /* Arbitrary `data-` attributes are forwarded to the rendered option. /\n [key: `data-${string}`]: boolean \| number \| string \| undefined\n /** Whether this option is non-interactive. /\n disabled?: boolean\n divider?: never\n /* Displayed as the option content and used for type-ahead matching. /\n label: string\n textValue?: never\n /* Unique identifier for the option. /\n value: string\n}\n\n/\n Rich-content option variant. The popover (`complex={true}`) renders the\n * `label` node directly; the native `<select>` (`complex={false}`) falls back\n * to `textValue` for the visible text. Requires a plain-text `textValue` so\n * type-ahead matching, screen reader announcements, and the native fallback\n * all have something stable to use.\n /\nexport interface SelectOptionWithNodeLabel {\n /* Arbitrary `data-` attributes are forwarded to the rendered option. /\n [key: `data-${string}`]: boolean \| number \| string \| undefined\n /** Whether this option is non-interactive. /\n disabled?: boolean\n divider?: never\n /\n Option content. Rendered as JSX in complex mode; in native mode, the\n * visible text comes from `textValue` instead.\n /\n label: React.ReactNode\n /\n Plain-text fallback for type-ahead matching, screen reader\n * announcements, and the native `<select>`'s visible option text when\n * `label` is a React node.\n /\n textValue: string\n /* Unique identifier for the option. /\n value: string\n}\n\n/\n Visual-separator option variant. Renders a divider line between options\n * (or between groups of options). Carries no value of its own.\n /\nexport interface SelectOptionDivider {\n disabled?: never\n /* Renders a visual separator between options. /\n divider: true\n label?: never\n textValue?: never\n value?: never\n}\n\nexport type SelectOption =\n \| SelectOptionDivider\n \| SelectOptionWithNodeLabel\n \| SelectOptionWithTextLabel\n\n/\n A group entry in `Select`'s `options` array. Renders a heading above its\n * `options` and nests them visually beneath it.\n /\nexport interface SelectOptionsGroup {\n /\n Whether all options in this group are non-interactive. Disables every\n * nested option regardless of its own `disabled` flag.\n /\n disabled?: boolean\n /* Visible heading displayed above the group's options. /\n label: string\n /* The selectable options nested under this group. /\n options: SelectOption[]\n}\n\nexport type SelectItem = SelectOption \| SelectOptionsGroup\n\n// ---------------------------------------------------------------------------\n// Select component props\n// ---------------------------------------------------------------------------\n\ninterface SelectBaseProps {\n /\n When true, renders as a popover listbox instead of a native `<select>`.\n * Enables rich content in options (icons, descriptions).\n /\n complex?: boolean\n /\n Helper text displayed below the select. Styled as error text when\n * `invalid`. Defaults to `\"Please select an option\"` when `invalid` is true\n * and no description is provided.\n /\n description?: string\n /\n Whether the select is in an invalid state. Shows the default description\n * if none is provided.\n /\n invalid?: boolean\n /* A flat or mixed array of options and option groups. /\n options: SelectItem[]\n /* Placeholder text shown when no option is selected. Defaults to `\"Select an option\"`. /\n placeholder?: string\n /* The size of the select. /\n size?: SelectSize\n}\n\ninterface SelectWithVisibleLabel extends SelectBaseProps {\n /* If true, the label is visually hidden and set as aria-label. /\n hideLabel?: false\n /\n The label text for the select. Required unless `aria-label` or\n * `aria-labelledby` is provided.\n /\n label: string\n}\n\ninterface SelectWithHiddenLabel extends SelectBaseProps {\n /* If true, the label is visually hidden and set as aria-label. /\n hideLabel: true\n /* The label text for the select. Must be a string when hidden. /\n label: string\n}\n\ninterface SelectWithAriaLabel extends SelectBaseProps {\n /* Accessible label for the select. Use when no visible label exists. /\n \"aria-label\": string\n hideLabel?: never\n label?: never\n}\n\ninterface SelectWithAriaLabelledBy extends SelectBaseProps {\n /\n ID of an external label element. Use instead of `label` when a visible\n * label exists elsewhere on the page.\n /\n \"aria-labelledby\": string\n hideLabel?: never\n label?: never\n}\n\nexport type SelectProps =\n \| SelectWithAriaLabel\n \| SelectWithAriaLabelledBy\n \| SelectWithHiddenLabel\n \| SelectWithVisibleLabel\n\ntype BaseSelectElementProps = Omit<\n SelectHTMLAttributes<HTMLSelectElement>,\n keyof SelectProps \| \"multiple\" \| \"size\"\n>\n\nexport type NativeSelectElementProps = BaseSelectElementProps &\n SelectProps & {\n complex?: false\n }\n\nexport type ComplexSelectElementProps = BaseSelectElementProps &\n SelectProps & {\n complex: true\n }\n\nexport type SelectElementProps =\n \| NativeSelectElementProps\n \| ComplexSelectElementProps\n\nfunction normalizeSelectValue(\n value:\n \| NativeSelectElementProps[\"defaultValue\"]\n \| NativeSelectElementProps[\"value\"]\n \| ComplexSelectElementProps[\"defaultValue\"]\n \| ComplexSelectElementProps[\"value\"]\n) {\n if (value === undefined \|\| value === null) return undefined\n if (Array.isArray(value)) return value[0]\n return String(value)\n}\n\n// ---------------------------------------------------------------------------\n// Select (public)\n// ---------------------------------------------------------------------------\n\n/\n A select component for choosing a single value from a list of options.\n * By default renders a native `<select>`; set `complex` to render a popover\n * listbox that supports rich option content (icons, descriptions). Supports\n * option groups, dividers, invalid state, and `lg`/`md` sizing.\n \n @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-select--docs \| Storybook Documentation}\n */\nexport const Select = forwardRef<HTMLSelectElement, SelectElementProps>(\n function Select(props: SelectElementProps, ref) {\n const {\n \"aria-label\": userAriaLabel,\n \"aria-labelledby\": userAriaLabelledBy,\n className,\n complex,\n defaultValue,\n description,\n hideLabel,\n id,\n invalid,\n label,\n onChange,\n options,\n placeholder,\n required,\n size,\n value,\n ...restProps\n } = props\n\n const triggerRef = useRef<HTMLButtonElement>(null)\n const stableId = useId()\n const controlId = id \|\| `tds-select-${stableId}`\n const labelId = `${controlId}-label`\n const resolvedDescription =\n description \|\| (invalid ? \"Please select an option\" : undefined)\n const descriptionId = resolvedDescription\n ? `${controlId}-description`\n : undefined\n const computedClassName = classNames(\n \"tds-select\",\n {\n \"tds-select--invalid\": invalid,\n \"tds-select--lg\": size === \"lg\",\n \"tds-select--required\": required,\n },\n className\n )\n\n const normalizedDefaultValue = normalizeSelectValue(defaultValue)\n const normalizedValue = normalizeSelectValue(value)\n\n const computedDefaultValue =\n normalizedDefaultValue === undefined && normalizedValue === undefined\n ? \"\"\n : normalizedDefaultValue\n const effectivePlaceholder =\n normalizedDefaultValue !== undefined && normalizedDefaultValue !== \"\"\n ? null\n : placeholder \|\| \"Select an option\"\n const showLabel = !!label && !hideLabel\n const computedAriaLabel = userAriaLabel ?? (hideLabel ? label : undefined)\n const computedAriaLabelledBy =\n userAriaLabelledBy ??\n (computedAriaLabel \|\| !showLabel ? undefined : labelId)\n\n const sharedControlProps = {\n ...restProps,\n \"aria-describedby\": descriptionId,\n \"aria-label\": computedAriaLabel,\n \"aria-labelledby\": computedAriaLabelledBy,\n defaultValue: computedDefaultValue,\n invalid,\n options,\n placeholder: effectivePlaceholder,\n required,\n value: normalizedValue,\n }\n\n const handleComplexLabelClick = () => triggerRef.current?.focus()\n\n const SelectComponent = complex ? SelectPopover : SelectNative\n\n return (\n <div className={computedClassName}>\n {showLabel &&\n (complex ? (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- mirrors native label click-to-focus; keyboard users interact with the combobox directly\n <div\n className=\"tds-select-label\"\n id={labelId}\n onClick={handleComplexLabelClick}\n >\n {label}\n </div>\n ) : (\n <label htmlFor={controlId} id={labelId}>\n {label}\n </label>\n ))}\n <SelectComponent\n {...sharedControlProps}\n ref={ref}\n id={controlId}\n onChange={onChange}\n {...(complex && { triggerRef })}\n />\n {resolvedDescription && descriptionId && (\n <p className=\"tds-select-description\" id={descriptionId}>\n <Icon\n aria-hidden\n className=\"tds-select-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n />\n {resolvedDescription}\n </p>\n )}\n </div>\n )\n }\n)\n\nSelect.displayName = \"Select\"\n"],"names":["React"],"mappings":"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"}

package/dist/components/select/SelectNative.d.ts CHANGED Viewed

@@ -16,5 +16,15 @@ export interface SelectNativeProps {
     placeholder: string | null;
 }
 export type SelectNativeElementProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, keyof SelectNativeProps | "multiple"> & SelectNativeProps;
+/**
+ * Internal component. Not intended for direct use — consume `Select` instead.
+ *
+ * The native `<select>` implementation used by `Select` when `complex` is
+ * not set. Renders a real `<select>` element so the browser handles
+ * keyboard, type-ahead, and mobile UI natively. When the browser supports
+ * `appearance: base-select`, it upgrades to a customizable trigger.
+ *
+ * @internal
+ */
 export declare const SelectNative: React.ForwardRefExoticComponent<Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "multiple" | keyof SelectNativeProps> & SelectNativeProps & React.RefAttributes<HTMLSelectElement>>;
 //# sourceMappingURL=SelectNative.d.ts.map

package/dist/components/select/SelectNative.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectNative.d.ts","sourceRoot":"","sources":["../../../src/components/select/SelectNative.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,KAAK,oBAAoB,EAG1B,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAuB1C,OAAO,CAAC,MAAM,CAAC;IAEb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,eAAe,EAAE,KAAK,CAAC,iBAAiB,CACtC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACjC,WAAW,CACZ,CAAA;SACF;KACF;CACF;AAMD,MAAM,WAAW,iBAAiB;IAChC,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2CAA2C;IAC3C,OAAO,EAAE,UAAU,EAAE,CAAA;IACrB,2FAA2F;IAC3F,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;CAC3B;AAED,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,iBAAiB,GAAG,UAAU,CACrC,GACC,iBAAiB,CAAA;AAEnB,eAAO,MAAM,YAAY,yLAmCvB,CAAA"}
1	+ {"version":3,"file":"SelectNative.d.ts","sourceRoot":"","sources":["../../../src/components/select/SelectNative.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,KAAK,oBAAoB,EAG1B,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAuB1C,OAAO,CAAC,MAAM,CAAC;IAEb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,eAAe,EAAE,KAAK,CAAC,iBAAiB,CACtC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACjC,WAAW,CACZ,CAAA;SACF;KACF;CACF;AAMD,MAAM,WAAW,iBAAiB;IAChC,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2CAA2C;IAC3C,OAAO,EAAE,UAAU,EAAE,CAAA;IACrB,2FAA2F;IAC3F,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;CAC3B;AAED,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,iBAAiB,GAAG,UAAU,CACrC,GACC,iBAAiB,CAAA;AAEnB;;;;;;;;;GASG;AACH,eAAO,MAAM,YAAY,yLAmCvB,CAAA"}

package/dist/components/select/SelectNative.js CHANGED Viewed

@@ -14,6 +14,16 @@ function supportsBaseSelect() {
     }
     return _supportsBaseSelect;
 }
+/**
+ * Internal component. Not intended for direct use — consume `Select` instead.
+ *
+ * The native `<select>` implementation used by `Select` when `complex` is
+ * not set. Renders a real `<select>` element so the browser handles
+ * keyboard, type-ahead, and mobile UI natively. When the browser supports
+ * `appearance: base-select`, it upgrades to a customizable trigger.
+ *
+ * @internal
+ */
 const SelectNative = forwardRef(function SelectNative({ invalid, options, placeholder, ...restProps }, ref) {
     // Keep first render deterministic for SSR/hydration, then detect support on mount.
     const [isCustom, setIsCustom] = useState(false);

package/dist/components/select/SelectNative.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectNative.js","sources":["../../../src/components/select/SelectNative.tsx"],"sourcesContent":["import React, {\n forwardRef,\n type SelectHTMLAttributes,\n useEffect,\n useState,\n} from \"react\"\n\nimport type { SelectItem } from \"./Select\"\nimport { SelectOptions } from \"./SelectOptions\"\n\n// ---------------------------------------------------------------------------\n// base-select feature detection (cached)\n// ---------------------------------------------------------------------------\n\nlet _supportsBaseSelect: boolean \| null = null\n\nfunction supportsBaseSelect(): boolean {\n if (_supportsBaseSelect === null) {\n _supportsBaseSelect =\n typeof CSS !== \"undefined\" &&\n typeof CSS.supports === \"function\" &&\n CSS.supports(\"appearance\", \"base-select\")\n }\n return _supportsBaseSelect\n}\n\n// ---------------------------------------------------------------------------\n// JSX augmentation for <selectedcontent>\n// ---------------------------------------------------------------------------\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n selectedcontent: React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLElement>,\n HTMLElement\n >\n }\n }\n}\n\n// ---------------------------------------------------------------------------\n// SelectNative\n// ---------------------------------------------------------------------------\n\nexport interface SelectNativeProps {\n /** Triggers invalid state (maps to aria-invalid). /\n invalid?: boolean\n /* Options to render inside the select. /\n options: SelectItem[]\n /* Placeholder text rendered as a disabled hidden option. `null` suppresses the option. */\n placeholder: string \| null\n}\n\nexport type SelectNativeElementProps = Omit<\n SelectHTMLAttributes<HTMLSelectElement>,\n keyof SelectNativeProps \| \"multiple\"\n> &\n SelectNativeProps\n\nexport const SelectNative = forwardRef<\n HTMLSelectElement,\n SelectNativeElementProps\n>(function SelectNative(\n { invalid, options, placeholder, ...restProps }: SelectNativeElementProps,\n ref\n) {\n // Keep first render deterministic for SSR/hydration, then detect support on mount.\n const [isCustom, setIsCustom] = useState(false)\n\n useEffect(() => {\n if (supportsBaseSelect()) {\n setIsCustom(true)\n }\n }, [])\n\n return (\n <select\n {...restProps}\n aria-invalid={invalid ? \"true\" : undefined}\n ref={ref}\n >\n {isCustom && (\n <button>\n <selectedcontent />\n </button>\n )}\n {placeholder && (\n <option disabled hidden value=\"\">\n {placeholder}\n </option>\n )}\n <SelectOptions items={options} supportsBaseSelect={isCustom} />\n </select>\n )\n})\n\nSelectNative.displayName = \"SelectNative\"\n"],"names":["React"],"mappings":";;;AAUA;AACA;AACA;AAEA,IAAI,mBAAmB,GAAmB,IAAI;AAE9C,SAAS,kBAAkB,GAAA;AACzB,IAAA,IAAI,mBAAmB,KAAK,IAAI,EAAE;QAChC,mBAAmB;YACjB,OAAO,GAAG,KAAK,WAAW;AAC1B,gBAAA,OAAO,GAAG,CAAC,QAAQ,KAAK,UAAU;AAClC,gBAAA,GAAG,CAAC,QAAQ,CAAC,YAAY,EAAE,aAAa,CAAC;IAC7C;AACA,IAAA,OAAO,mBAAmB;AAC5B;~~MAqCa~~,YAAY,GAAG,UAAU,CAGpC,SAAS,YAAY,CACrB,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,SAAS,EAA4B,EACzE,GAAG,EAAA;;IAGH,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAE/C,SAAS,CAAC,MAAK;QACb,IAAI,kBAAkB,EAAE,EAAE;YACxB,WAAW,CAAC,IAAI,CAAC;QACnB;IACF,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GACM,SAAS,EAAA,cAAA,EACC,OAAO,GAAG,MAAM,GAAG,SAAS,EAC1C,GAAG,EAAE,GAAG,EAAA;AAEP,QAAA,QAAQ,KACPA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA;AACE,YAAAA,cAAA,CAAA,aAAA,CAAA,iBAAA,EAAA,IAAA,CAAmB,CACZ,CACV;AACA,QAAA,WAAW,KACVA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,QAAQ,EAAA,IAAA,EAAC,MAAM,EAAA,IAAA,EAAC,KAAK,EAAC,EAAE,EAAA,EAC7B,WAAW,CACL,CACV;AACD,QAAAA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EAAC,KAAK,EAAE,OAAO,EAAE,kBAAkB,EAAE,QAAQ,EAAA,CAAI,CACxD;AAEb,CAAC;AAED,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}
1	+ {"version":3,"file":"SelectNative.js","sources":["../../../src/components/select/SelectNative.tsx"],"sourcesContent":["import React, {\n forwardRef,\n type SelectHTMLAttributes,\n useEffect,\n useState,\n} from \"react\"\n\nimport type { SelectItem } from \"./Select\"\nimport { SelectOptions } from \"./SelectOptions\"\n\n// ---------------------------------------------------------------------------\n// base-select feature detection (cached)\n// ---------------------------------------------------------------------------\n\nlet _supportsBaseSelect: boolean \| null = null\n\nfunction supportsBaseSelect(): boolean {\n if (_supportsBaseSelect === null) {\n _supportsBaseSelect =\n typeof CSS !== \"undefined\" &&\n typeof CSS.supports === \"function\" &&\n CSS.supports(\"appearance\", \"base-select\")\n }\n return _supportsBaseSelect\n}\n\n// ---------------------------------------------------------------------------\n// JSX augmentation for <selectedcontent>\n// ---------------------------------------------------------------------------\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n selectedcontent: React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLElement>,\n HTMLElement\n >\n }\n }\n}\n\n// ---------------------------------------------------------------------------\n// SelectNative\n// ---------------------------------------------------------------------------\n\nexport interface SelectNativeProps {\n /** Triggers invalid state (maps to aria-invalid). /\n invalid?: boolean\n /* Options to render inside the select. /\n options: SelectItem[]\n /* Placeholder text rendered as a disabled hidden option. `null` suppresses the option. /\n placeholder: string \| null\n}\n\nexport type SelectNativeElementProps = Omit<\n SelectHTMLAttributes<HTMLSelectElement>,\n keyof SelectNativeProps \| \"multiple\"\n> &\n SelectNativeProps\n\n/\n Internal component. Not intended for direct use — consume `Select` instead.\n \n The native `<select>` implementation used by `Select` when `complex` is\n * not set. Renders a real `<select>` element so the browser handles\n * keyboard, type-ahead, and mobile UI natively. When the browser supports\n * `appearance: base-select`, it upgrades to a customizable trigger.\n \n @internal\n */\nexport const SelectNative = forwardRef<\n HTMLSelectElement,\n SelectNativeElementProps\n>(function SelectNative(\n { invalid, options, placeholder, ...restProps }: SelectNativeElementProps,\n ref\n) {\n // Keep first render deterministic for SSR/hydration, then detect support on mount.\n const [isCustom, setIsCustom] = useState(false)\n\n useEffect(() => {\n if (supportsBaseSelect()) {\n setIsCustom(true)\n }\n }, [])\n\n return (\n <select\n {...restProps}\n aria-invalid={invalid ? \"true\" : undefined}\n ref={ref}\n >\n {isCustom && (\n <button>\n <selectedcontent />\n </button>\n )}\n {placeholder && (\n <option disabled hidden value=\"\">\n {placeholder}\n </option>\n )}\n <SelectOptions items={options} supportsBaseSelect={isCustom} />\n </select>\n )\n})\n\nSelectNative.displayName = \"SelectNative\"\n"],"names":["React"],"mappings":";;;AAUA;AACA;AACA;AAEA,IAAI,mBAAmB,GAAmB,IAAI;AAE9C,SAAS,kBAAkB,GAAA;AACzB,IAAA,IAAI,mBAAmB,KAAK,IAAI,EAAE;QAChC,mBAAmB;YACjB,OAAO,GAAG,KAAK,WAAW;AAC1B,gBAAA,OAAO,GAAG,CAAC,QAAQ,KAAK,UAAU;AAClC,gBAAA,GAAG,CAAC,QAAQ,CAAC,YAAY,EAAE,aAAa,CAAC;IAC7C;AACA,IAAA,OAAO,mBAAmB;AAC5B;AAqCA;;;;;;;;;AASG;MACU,YAAY,GAAG,UAAU,CAGpC,SAAS,YAAY,CACrB,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,SAAS,EAA4B,EACzE,GAAG,EAAA;;IAGH,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAE/C,SAAS,CAAC,MAAK;QACb,IAAI,kBAAkB,EAAE,EAAE;YACxB,WAAW,CAAC,IAAI,CAAC;QACnB;IACF,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GACM,SAAS,EAAA,cAAA,EACC,OAAO,GAAG,MAAM,GAAG,SAAS,EAC1C,GAAG,EAAE,GAAG,EAAA;AAEP,QAAA,QAAQ,KACPA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA;AACE,YAAAA,cAAA,CAAA,aAAA,CAAA,iBAAA,EAAA,IAAA,CAAmB,CACZ,CACV;AACA,QAAA,WAAW,KACVA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,QAAQ,EAAA,IAAA,EAAC,MAAM,EAAA,IAAA,EAAC,KAAK,EAAC,EAAE,EAAA,EAC7B,WAAW,CACL,CACV;AACD,QAAAA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EAAC,KAAK,EAAE,OAAO,EAAE,kBAAkB,EAAE,QAAQ,EAAA,CAAI,CACxD;AAEb,CAAC;AAED,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}

package/dist/components/select/SelectPopover.d.ts CHANGED Viewed

@@ -17,5 +17,15 @@ export interface SelectPopoverProps {
     value?: string;
 }
 export type SelectPopoverElementProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, keyof SelectPopoverProps | "multiple"> & SelectPopoverProps;
+/**
+ * Internal component. Not intended for direct use — consume `Select` instead.
+ *
+ * The popover listbox implementation used by `Select` when `complex` is
+ * true. Renders a button trigger and a custom listbox that supports rich
+ * option content (icons, descriptions) along with keyboard navigation,
+ * type-ahead, and option groups.
+ *
+ * @internal
+ */
 export declare const SelectPopover: React.ForwardRefExoticComponent<Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "multiple" | keyof SelectPopoverProps> & SelectPopoverProps & React.RefAttributes<HTMLSelectElement>>;
 //# sourceMappingURL=SelectPopover.d.ts.map

package/dist/components/select/SelectPopover.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectPopover.d.ts","sourceRoot":"","sources":["../../../src/components/select/SelectPopover.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,EAEZ,KAAK,oBAAoB,EAM1B,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,UAAU,EAAgB,MAAM,UAAU,CAAA;AAQxD,MAAM,WAAW,kBAAkB;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,0DAA0D;IAC1D,OAAO,EAAE,UAAU,EAAE,CAAA;IACrB,kHAAkH;IAClH,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAA;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,kBAAkB,GAAG,UAAU,CACtC,GACC,kBAAkB,CAAA;AAqDpB,eAAO,MAAM,aAAa,2LA2ZzB,CAAA"}
1	+ {"version":3,"file":"SelectPopover.d.ts","sourceRoot":"","sources":["../../../src/components/select/SelectPopover.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,EAEZ,KAAK,oBAAoB,EAM1B,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,UAAU,EAAgB,MAAM,UAAU,CAAA;AAQxD,MAAM,WAAW,kBAAkB;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,0DAA0D;IAC1D,OAAO,EAAE,UAAU,EAAE,CAAA;IACrB,kHAAkH;IAClH,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAA;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,kBAAkB,GAAG,UAAU,CACtC,GACC,kBAAkB,CAAA;AAqDpB;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,2LA2ZzB,CAAA"}

package/dist/components/select/SelectPopover.js CHANGED Viewed

@@ -19,6 +19,16 @@ function renderListSegments(segments, baseId, renderItem) {
         return (React__default.createElement("ul", { key: `options-${segmentIndex}`, role: "presentation" }, segment.options.map((opt, i) => renderItem(opt, startIndex + i))));
     });
 }
+/**
+ * Internal component. Not intended for direct use — consume `Select` instead.
+ *
+ * The popover listbox implementation used by `Select` when `complex` is
+ * true. Renders a button trigger and a custom listbox that supports rich
+ * option content (icons, descriptions) along with keyboard navigation,
+ * type-ahead, and option groups.
+ *
+ * @internal
+ */
 const SelectPopover = forwardRef(({ "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, defaultValue, disabled, id, invalid, onBlur, onChange, onClick, onFocus, options, placeholder, required, triggerRef, value, ...props }, ref) => {
     const stableId = useId();
     const baseId = id || `tds-select-popover-${stableId}`;

package/dist/components/select/SelectPopover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectPopover.js","sources":["../../../src/components/select/SelectPopover.tsx"],"sourcesContent":["import {\n ComboboxAction,\n getComboboxActionFromKey,\n getUpdatedIndex,\n} from \"@utilities/keyboardUtils\"\nimport {\n getDataAttributes,\n getIndexByLetter,\n getSelectableOptionsFromSegments,\n normalizeOptions,\n type Segment,\n} from \"@utilities/selectUtils\"\nimport { useId } from \"@utilities/useId\"\nimport React, {\n forwardRef,\n type SelectHTMLAttributes,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\"\n\nimport type { SelectItem, SelectOption } from \"./Select\"\nimport { SelectOptions } from \"./SelectOptions\"\n\ninterface ToggleEvent extends Event {\n newState: \"closed\" \| \"open\"\n oldState: \"closed\" \| \"open\"\n}\n\nexport interface SelectPopoverProps {\n \"aria-describedby\"?: string\n \"aria-label\"?: string\n \"aria-labelledby\"?: string\n defaultValue?: string\n disabled?: boolean\n id?: string\n invalid?: boolean\n /** A flat or mixed array of options and option groups. /\n options: SelectItem[]\n /* Placeholder text shown in the trigger button when no option is selected. `null` suppresses the placeholder. */\n placeholder: string \| null\n required?: boolean\n triggerRef?: React.RefObject<HTMLButtonElement>\n value?: string\n}\n\nexport type SelectPopoverElementProps = Omit<\n SelectHTMLAttributes<HTMLSelectElement>,\n keyof SelectPopoverProps \| \"multiple\"\n> &\n SelectPopoverProps\n\nconst Group = ({\n children,\n disabled,\n id,\n label,\n}: {\n children: React.ReactNode\n disabled?: boolean\n id: string\n label: string\n}) => (\n <ul aria-disabled={disabled \|\| undefined} aria-labelledby={id} role=\"group\">\n <li id={id} role=\"presentation\">\n <span>{label}</span>\n </li>\n {children}\n </ul>\n)\n\nfunction renderListSegments(\n segments: Segment[],\n baseId: string,\n renderItem: (option: SelectOption, index: number) => React.ReactNode\n) {\n let flatIndex = 0\n\n return segments.map((segment, segmentIndex) => {\n const startIndex = flatIndex\n flatIndex += segment.options.length\n\n if (segment.type === \"group\") {\n return (\n <Group\n key={`${segment.label}-${segmentIndex}`}\n disabled={segment.disabled}\n id={`${baseId}-group-${segmentIndex}`}\n label={segment.label}\n >\n {segment.options.map((opt, i) => renderItem(opt, startIndex + i))}\n </Group>\n )\n }\n\n return (\n <ul key={`options-${segmentIndex}`} role=\"presentation\">\n {segment.options.map((opt, i) => renderItem(opt, startIndex + i))}\n </ul>\n )\n })\n}\n\nexport const SelectPopover = forwardRef<\n HTMLSelectElement,\n SelectPopoverElementProps\n>(\n (\n {\n \"aria-describedby\": ariaDescribedBy,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n defaultValue,\n disabled,\n id,\n invalid,\n onBlur,\n onChange,\n onClick,\n onFocus,\n options,\n placeholder,\n required,\n triggerRef,\n value,\n ...props\n }: SelectPopoverElementProps,\n ref\n ) => {\n const stableId = useId()\n const baseId = id \|\| `tds-select-popover-${stableId}`\n\n const [isOpen, setIsOpen] = useState(false)\n const [uncontrolledValue, setUncontrolledValue] = useState<string \| null>(\n defaultValue ?? null\n )\n const [activeIndex, setActiveIndex] = useState(-1)\n\n const isControlled = value !== undefined\n const selectedValue = isControlled ? (value ?? null) : uncontrolledValue\n\n const { allOptions, segments } = useMemo(() => {\n const segments = normalizeOptions(options)\n const allOptions = getSelectableOptionsFromSegments(segments)\n return { allOptions, segments }\n }, [options])\n\n const selectedOption = allOptions.find((opt) => opt.value === selectedValue)\n\n const activeOption = activeIndex >= 0 ? allOptions[activeIndex] : undefined\n const activeOptionId = activeOption\n ? `${baseId}-option-${activeOption.value}`\n : undefined\n\n const popoverRef = useRef<HTMLDivElement>(null)\n const internalTriggerRef = useRef<HTMLButtonElement \| null>(null)\n const resolvedTriggerRef = triggerRef ?? internalTriggerRef\n const hiddenSelectRef = useRef<HTMLSelectElement \| null>(null)\n const pendingChangeValueRef = useRef<string \| null>(null)\n const searchStringRef = useRef(\"\")\n const searchTimeoutRef = useRef<ReturnType<typeof setTimeout>>()\n\n const setHiddenSelectRef = useCallback(\n (element: HTMLSelectElement \| null) => {\n hiddenSelectRef.current = element\n if (typeof ref === \"function\") {\n ref(element)\n } else if (ref) {\n ref.current = element\n }\n },\n [ref]\n )\n\n useEffect(() => {\n const popoverEl = popoverRef.current\n if (!popoverEl) return\n\n const handleToggle = (e: Event) => {\n const newIsOpen = (e as ToggleEvent).newState === \"open\"\n setIsOpen(newIsOpen)\n\n if (newIsOpen) {\n const index = allOptions.findIndex(\n (opt) => opt.value === selectedValue && !opt.disabled\n )\n if (index >= 0) {\n setActiveIndex(index)\n } else {\n // Find first non-disabled option\n const firstEnabledIndexOrFirstIndex = Math.max(\n allOptions.findIndex((opt) => !opt.disabled),\n 0\n )\n setActiveIndex(firstEnabledIndexOrFirstIndex)\n }\n } else {\n setActiveIndex(-1)\n }\n }\n\n popoverEl.addEventListener(\"toggle\", handleToggle)\n return () => popoverEl.removeEventListener(\"toggle\", handleToggle)\n }, [allOptions, selectedValue])\n\n useEffect(() => {\n if (activeOptionId) {\n document\n .getElementById(activeOptionId)\n ?.scrollIntoView({ block: \"nearest\" })\n }\n }, [activeOptionId])\n\n useEffect(\n () => () => {\n clearTimeout(searchTimeoutRef.current)\n },\n []\n )\n\n const openPopover = () =>\n popoverRef.current?.showPopover({ source: resolvedTriggerRef.current! })\n\n const closePopover = () => popoverRef.current?.hidePopover()\n\n const commitSelection = useCallback(\n (nextValue: string) => {\n if (nextValue === selectedValue) {\n closePopover()\n return\n }\n\n if (!isControlled) {\n setUncontrolledValue(nextValue)\n }\n\n const hiddenEl = hiddenSelectRef.current\n if (hiddenEl) {\n pendingChangeValueRef.current = nextValue\n hiddenEl.value = nextValue\n hiddenEl.dispatchEvent(new Event(\"change\", { bubbles: true }))\n if (isControlled) {\n hiddenEl.value = value ?? \"\"\n }\n }\n\n closePopover()\n },\n [isControlled, selectedValue, value]\n )\n\n const selectActiveOption = useCallback(() => {\n if (activeOption && !activeOption.disabled) {\n commitSelection(activeOption.value!)\n return true\n }\n return false\n }, [activeOption, commitSelection])\n\n const commitActiveOptionOrClose = useCallback(() => {\n if (!selectActiveOption()) {\n closePopover()\n }\n }, [selectActiveOption])\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n if (disabled) return\n\n // Tab must not be prevented — allow native focus movement\n if (e.key === \"Tab\" && isOpen) {\n commitActiveOptionOrClose()\n return\n }\n\n const action = getComboboxActionFromKey(e, isOpen)\n if (!action) return\n\n e.preventDefault()\n\n switch (action) {\n case ComboboxAction.OpenPopup:\n openPopover()\n break\n case ComboboxAction.CommitAndClose:\n commitActiveOptionOrClose()\n break\n case ComboboxAction.MoveFirst:\n case ComboboxAction.MoveLast:\n if (!isOpen) openPopover()\n setActiveIndex(getUpdatedIndex(activeIndex, action, allOptions))\n break\n case ComboboxAction.MoveNext:\n case ComboboxAction.MovePrevious:\n setActiveIndex(getUpdatedIndex(activeIndex, action, allOptions))\n break\n case ComboboxAction.TypeCharacter: {\n if (!isOpen) openPopover()\n\n clearTimeout(searchTimeoutRef.current)\n searchStringRef.current += e.key\n searchTimeoutRef.current = setTimeout(() => {\n searchStringRef.current = \"\"\n }, 500)\n\n const searchIndex = getIndexByLetter(\n allOptions,\n searchStringRef.current,\n activeIndex\n )\n if (searchIndex >= 0) {\n setActiveIndex(searchIndex)\n }\n break\n }\n case ComboboxAction.ClosePopup:\n closePopover()\n break\n }\n }\n\n const createStableEventTarget = (\n target: HTMLSelectElement,\n valueSnapshot: string\n ) => {\n const proxy = Object.create(target)\n Object.defineProperties(proxy, {\n disabled: {\n configurable: true,\n enumerable: true,\n value: target.disabled,\n },\n form: { configurable: true, enumerable: true, value: target.form },\n name: { configurable: true, enumerable: true, value: target.name },\n type: { configurable: true, enumerable: true, value: target.type },\n value: { configurable: true, enumerable: true, value: valueSnapshot },\n })\n return proxy as HTMLSelectElement\n }\n\n const withSelectTarget = useCallback(\n <\n SourceEvent extends React.SyntheticEvent,\n TargetEvent extends React.SyntheticEvent<HTMLSelectElement>,\n >(\n event: SourceEvent,\n target: HTMLSelectElement,\n currentTarget: HTMLSelectElement = target\n ) => {\n return Object.defineProperties(Object.create(event), {\n currentTarget: { value: currentTarget },\n target: { value: target },\n }) as TargetEvent\n },\n []\n )\n\n const handleHiddenSelectChange = useCallback(\n (event: React.ChangeEvent<HTMLSelectElement>) => {\n if (!onChange) return\n\n const valueSnapshot =\n pendingChangeValueRef.current ?? event.currentTarget.value\n pendingChangeValueRef.current = null\n\n const stableEvent = withSelectTarget<\n React.ChangeEvent<HTMLSelectElement>,\n React.ChangeEvent<HTMLSelectElement>\n >(\n event,\n createStableEventTarget(\n event.target as HTMLSelectElement,\n valueSnapshot\n ),\n createStableEventTarget(event.currentTarget, valueSnapshot)\n )\n\n onChange(stableEvent)\n },\n [onChange, withSelectTarget]\n )\n\n const forwardEventToSelect = useCallback(\n <\n ButtonEvent extends React.SyntheticEvent<HTMLButtonElement>,\n SelectEvent extends React.SyntheticEvent<HTMLSelectElement>,\n >(\n event: ButtonEvent,\n handler?: (event: SelectEvent) => void\n ) => {\n if (!handler) return\n\n const hiddenEl = hiddenSelectRef.current\n if (!hiddenEl) return\n\n const stableEvent = withSelectTarget<ButtonEvent, SelectEvent>(\n event,\n hiddenEl\n )\n\n handler(stableEvent)\n },\n [withSelectTarget]\n )\n\n const handleButtonBlur = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n forwardEventToSelect<\n React.FocusEvent<HTMLButtonElement>,\n React.FocusEvent<HTMLSelectElement>\n >(event, onBlur)\n },\n [forwardEventToSelect, onBlur]\n )\n\n const handleButtonClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n forwardEventToSelect<\n React.MouseEvent<HTMLButtonElement>,\n React.MouseEvent<HTMLSelectElement>\n >(event, onClick)\n },\n [forwardEventToSelect, onClick]\n )\n\n const handleButtonFocus = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n forwardEventToSelect<\n React.FocusEvent<HTMLButtonElement>,\n React.FocusEvent<HTMLSelectElement>\n >(event, onFocus)\n },\n [forwardEventToSelect, onFocus]\n )\n\n const renderListOption = (option: SelectOption, index: number) => {\n const { disabled, divider, label, value } = option\n if (divider) return <li key={index} role=\"separator\" />\n return (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events -- keyboard events are handled on the combobox button\n <li\n key={value}\n {...getDataAttributes(option)}\n aria-disabled={disabled \|\| undefined}\n aria-selected={value === selectedValue}\n className={\n value === activeOption?.value\n ? \"tds-select-option--active\"\n : undefined\n }\n id={`${baseId}-option-${value}`}\n onClick={disabled ? undefined : () => commitSelection(value!)}\n role=\"option\"\n >\n {label}\n </li>\n )\n }\n\n return (\n <>\n <button\n ref={resolvedTriggerRef}\n popovertarget={baseId}\n aria-activedescendant={activeOptionId}\n aria-controls={baseId}\n aria-describedby={ariaDescribedBy}\n aria-disabled={disabled ? \"true\" : undefined}\n aria-expanded={isOpen}\n aria-haspopup=\"listbox\"\n aria-invalid={invalid ? \"true\" : undefined}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-required={required ? \"true\" : undefined}\n disabled={disabled}\n onBlur={handleButtonBlur}\n onClick={handleButtonClick}\n onFocus={handleButtonFocus}\n onKeyDown={handleKeyDown}\n role=\"combobox\"\n type=\"button\"\n >\n {selectedOption ? selectedOption.label : placeholder}\n </button>\n <div\n ref={popoverRef}\n popover=\"\"\n id={baseId}\n role=\"listbox\"\n aria-describedby={ariaDescribedBy}\n aria-invalid={invalid ? \"true\" : undefined}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-required={required ? \"true\" : undefined}\n >\n {renderListSegments(segments, baseId, renderListOption)}\n </div>\n <select\n {...props}\n ref={setHiddenSelectRef}\n aria-hidden\n className=\"tds-select-hidden-select\"\n disabled={disabled}\n id={`${baseId}-control`}\n onChange={handleHiddenSelectChange}\n required={required}\n tabIndex={-1}\n value={selectedValue ?? \"\"}\n >\n <option value=\"\" />\n <SelectOptions items={options} />\n </select>\n </>\n )\n }\n)\n\nSelectPopover.displayName = \"SelectPopover\"\n"],"names":["React"],"mappings":"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"}
1	+ {"version":3,"file":"SelectPopover.js","sources":["../../../src/components/select/SelectPopover.tsx"],"sourcesContent":["import {\n ComboboxAction,\n getComboboxActionFromKey,\n getUpdatedIndex,\n} from \"@utilities/keyboardUtils\"\nimport {\n getDataAttributes,\n getIndexByLetter,\n getSelectableOptionsFromSegments,\n normalizeOptions,\n type Segment,\n} from \"@utilities/selectUtils\"\nimport { useId } from \"@utilities/useId\"\nimport React, {\n forwardRef,\n type SelectHTMLAttributes,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\"\n\nimport type { SelectItem, SelectOption } from \"./Select\"\nimport { SelectOptions } from \"./SelectOptions\"\n\ninterface ToggleEvent extends Event {\n newState: \"closed\" \| \"open\"\n oldState: \"closed\" \| \"open\"\n}\n\nexport interface SelectPopoverProps {\n \"aria-describedby\"?: string\n \"aria-label\"?: string\n \"aria-labelledby\"?: string\n defaultValue?: string\n disabled?: boolean\n id?: string\n invalid?: boolean\n /** A flat or mixed array of options and option groups. /\n options: SelectItem[]\n /* Placeholder text shown in the trigger button when no option is selected. `null` suppresses the placeholder. /\n placeholder: string \| null\n required?: boolean\n triggerRef?: React.RefObject<HTMLButtonElement>\n value?: string\n}\n\nexport type SelectPopoverElementProps = Omit<\n SelectHTMLAttributes<HTMLSelectElement>,\n keyof SelectPopoverProps \| \"multiple\"\n> &\n SelectPopoverProps\n\nconst Group = ({\n children,\n disabled,\n id,\n label,\n}: {\n children: React.ReactNode\n disabled?: boolean\n id: string\n label: string\n}) => (\n <ul aria-disabled={disabled \|\| undefined} aria-labelledby={id} role=\"group\">\n <li id={id} role=\"presentation\">\n <span>{label}</span>\n </li>\n {children}\n </ul>\n)\n\nfunction renderListSegments(\n segments: Segment[],\n baseId: string,\n renderItem: (option: SelectOption, index: number) => React.ReactNode\n) {\n let flatIndex = 0\n\n return segments.map((segment, segmentIndex) => {\n const startIndex = flatIndex\n flatIndex += segment.options.length\n\n if (segment.type === \"group\") {\n return (\n <Group\n key={`${segment.label}-${segmentIndex}`}\n disabled={segment.disabled}\n id={`${baseId}-group-${segmentIndex}`}\n label={segment.label}\n >\n {segment.options.map((opt, i) => renderItem(opt, startIndex + i))}\n </Group>\n )\n }\n\n return (\n <ul key={`options-${segmentIndex}`} role=\"presentation\">\n {segment.options.map((opt, i) => renderItem(opt, startIndex + i))}\n </ul>\n )\n })\n}\n\n/\n Internal component. Not intended for direct use — consume `Select` instead.\n \n The popover listbox implementation used by `Select` when `complex` is\n * true. Renders a button trigger and a custom listbox that supports rich\n * option content (icons, descriptions) along with keyboard navigation,\n * type-ahead, and option groups.\n \n @internal\n */\nexport const SelectPopover = forwardRef<\n HTMLSelectElement,\n SelectPopoverElementProps\n>(\n (\n {\n \"aria-describedby\": ariaDescribedBy,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n defaultValue,\n disabled,\n id,\n invalid,\n onBlur,\n onChange,\n onClick,\n onFocus,\n options,\n placeholder,\n required,\n triggerRef,\n value,\n ...props\n }: SelectPopoverElementProps,\n ref\n ) => {\n const stableId = useId()\n const baseId = id \|\| `tds-select-popover-${stableId}`\n\n const [isOpen, setIsOpen] = useState(false)\n const [uncontrolledValue, setUncontrolledValue] = useState<string \| null>(\n defaultValue ?? null\n )\n const [activeIndex, setActiveIndex] = useState(-1)\n\n const isControlled = value !== undefined\n const selectedValue = isControlled ? (value ?? null) : uncontrolledValue\n\n const { allOptions, segments } = useMemo(() => {\n const segments = normalizeOptions(options)\n const allOptions = getSelectableOptionsFromSegments(segments)\n return { allOptions, segments }\n }, [options])\n\n const selectedOption = allOptions.find((opt) => opt.value === selectedValue)\n\n const activeOption = activeIndex >= 0 ? allOptions[activeIndex] : undefined\n const activeOptionId = activeOption\n ? `${baseId}-option-${activeOption.value}`\n : undefined\n\n const popoverRef = useRef<HTMLDivElement>(null)\n const internalTriggerRef = useRef<HTMLButtonElement \| null>(null)\n const resolvedTriggerRef = triggerRef ?? internalTriggerRef\n const hiddenSelectRef = useRef<HTMLSelectElement \| null>(null)\n const pendingChangeValueRef = useRef<string \| null>(null)\n const searchStringRef = useRef(\"\")\n const searchTimeoutRef = useRef<ReturnType<typeof setTimeout>>()\n\n const setHiddenSelectRef = useCallback(\n (element: HTMLSelectElement \| null) => {\n hiddenSelectRef.current = element\n if (typeof ref === \"function\") {\n ref(element)\n } else if (ref) {\n ref.current = element\n }\n },\n [ref]\n )\n\n useEffect(() => {\n const popoverEl = popoverRef.current\n if (!popoverEl) return\n\n const handleToggle = (e: Event) => {\n const newIsOpen = (e as ToggleEvent).newState === \"open\"\n setIsOpen(newIsOpen)\n\n if (newIsOpen) {\n const index = allOptions.findIndex(\n (opt) => opt.value === selectedValue && !opt.disabled\n )\n if (index >= 0) {\n setActiveIndex(index)\n } else {\n // Find first non-disabled option\n const firstEnabledIndexOrFirstIndex = Math.max(\n allOptions.findIndex((opt) => !opt.disabled),\n 0\n )\n setActiveIndex(firstEnabledIndexOrFirstIndex)\n }\n } else {\n setActiveIndex(-1)\n }\n }\n\n popoverEl.addEventListener(\"toggle\", handleToggle)\n return () => popoverEl.removeEventListener(\"toggle\", handleToggle)\n }, [allOptions, selectedValue])\n\n useEffect(() => {\n if (activeOptionId) {\n document\n .getElementById(activeOptionId)\n ?.scrollIntoView({ block: \"nearest\" })\n }\n }, [activeOptionId])\n\n useEffect(\n () => () => {\n clearTimeout(searchTimeoutRef.current)\n },\n []\n )\n\n const openPopover = () =>\n popoverRef.current?.showPopover({ source: resolvedTriggerRef.current! })\n\n const closePopover = () => popoverRef.current?.hidePopover()\n\n const commitSelection = useCallback(\n (nextValue: string) => {\n if (nextValue === selectedValue) {\n closePopover()\n return\n }\n\n if (!isControlled) {\n setUncontrolledValue(nextValue)\n }\n\n const hiddenEl = hiddenSelectRef.current\n if (hiddenEl) {\n pendingChangeValueRef.current = nextValue\n hiddenEl.value = nextValue\n hiddenEl.dispatchEvent(new Event(\"change\", { bubbles: true }))\n if (isControlled) {\n hiddenEl.value = value ?? \"\"\n }\n }\n\n closePopover()\n },\n [isControlled, selectedValue, value]\n )\n\n const selectActiveOption = useCallback(() => {\n if (activeOption && !activeOption.disabled) {\n commitSelection(activeOption.value!)\n return true\n }\n return false\n }, [activeOption, commitSelection])\n\n const commitActiveOptionOrClose = useCallback(() => {\n if (!selectActiveOption()) {\n closePopover()\n }\n }, [selectActiveOption])\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n if (disabled) return\n\n // Tab must not be prevented — allow native focus movement\n if (e.key === \"Tab\" && isOpen) {\n commitActiveOptionOrClose()\n return\n }\n\n const action = getComboboxActionFromKey(e, isOpen)\n if (!action) return\n\n e.preventDefault()\n\n switch (action) {\n case ComboboxAction.OpenPopup:\n openPopover()\n break\n case ComboboxAction.CommitAndClose:\n commitActiveOptionOrClose()\n break\n case ComboboxAction.MoveFirst:\n case ComboboxAction.MoveLast:\n if (!isOpen) openPopover()\n setActiveIndex(getUpdatedIndex(activeIndex, action, allOptions))\n break\n case ComboboxAction.MoveNext:\n case ComboboxAction.MovePrevious:\n setActiveIndex(getUpdatedIndex(activeIndex, action, allOptions))\n break\n case ComboboxAction.TypeCharacter: {\n if (!isOpen) openPopover()\n\n clearTimeout(searchTimeoutRef.current)\n searchStringRef.current += e.key\n searchTimeoutRef.current = setTimeout(() => {\n searchStringRef.current = \"\"\n }, 500)\n\n const searchIndex = getIndexByLetter(\n allOptions,\n searchStringRef.current,\n activeIndex\n )\n if (searchIndex >= 0) {\n setActiveIndex(searchIndex)\n }\n break\n }\n case ComboboxAction.ClosePopup:\n closePopover()\n break\n }\n }\n\n const createStableEventTarget = (\n target: HTMLSelectElement,\n valueSnapshot: string\n ) => {\n const proxy = Object.create(target)\n Object.defineProperties(proxy, {\n disabled: {\n configurable: true,\n enumerable: true,\n value: target.disabled,\n },\n form: { configurable: true, enumerable: true, value: target.form },\n name: { configurable: true, enumerable: true, value: target.name },\n type: { configurable: true, enumerable: true, value: target.type },\n value: { configurable: true, enumerable: true, value: valueSnapshot },\n })\n return proxy as HTMLSelectElement\n }\n\n const withSelectTarget = useCallback(\n <\n SourceEvent extends React.SyntheticEvent,\n TargetEvent extends React.SyntheticEvent<HTMLSelectElement>,\n >(\n event: SourceEvent,\n target: HTMLSelectElement,\n currentTarget: HTMLSelectElement = target\n ) => {\n return Object.defineProperties(Object.create(event), {\n currentTarget: { value: currentTarget },\n target: { value: target },\n }) as TargetEvent\n },\n []\n )\n\n const handleHiddenSelectChange = useCallback(\n (event: React.ChangeEvent<HTMLSelectElement>) => {\n if (!onChange) return\n\n const valueSnapshot =\n pendingChangeValueRef.current ?? event.currentTarget.value\n pendingChangeValueRef.current = null\n\n const stableEvent = withSelectTarget<\n React.ChangeEvent<HTMLSelectElement>,\n React.ChangeEvent<HTMLSelectElement>\n >(\n event,\n createStableEventTarget(\n event.target as HTMLSelectElement,\n valueSnapshot\n ),\n createStableEventTarget(event.currentTarget, valueSnapshot)\n )\n\n onChange(stableEvent)\n },\n [onChange, withSelectTarget]\n )\n\n const forwardEventToSelect = useCallback(\n <\n ButtonEvent extends React.SyntheticEvent<HTMLButtonElement>,\n SelectEvent extends React.SyntheticEvent<HTMLSelectElement>,\n >(\n event: ButtonEvent,\n handler?: (event: SelectEvent) => void\n ) => {\n if (!handler) return\n\n const hiddenEl = hiddenSelectRef.current\n if (!hiddenEl) return\n\n const stableEvent = withSelectTarget<ButtonEvent, SelectEvent>(\n event,\n hiddenEl\n )\n\n handler(stableEvent)\n },\n [withSelectTarget]\n )\n\n const handleButtonBlur = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n forwardEventToSelect<\n React.FocusEvent<HTMLButtonElement>,\n React.FocusEvent<HTMLSelectElement>\n >(event, onBlur)\n },\n [forwardEventToSelect, onBlur]\n )\n\n const handleButtonClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n forwardEventToSelect<\n React.MouseEvent<HTMLButtonElement>,\n React.MouseEvent<HTMLSelectElement>\n >(event, onClick)\n },\n [forwardEventToSelect, onClick]\n )\n\n const handleButtonFocus = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n forwardEventToSelect<\n React.FocusEvent<HTMLButtonElement>,\n React.FocusEvent<HTMLSelectElement>\n >(event, onFocus)\n },\n [forwardEventToSelect, onFocus]\n )\n\n const renderListOption = (option: SelectOption, index: number) => {\n const { disabled, divider, label, value } = option\n if (divider) return <li key={index} role=\"separator\" />\n return (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events -- keyboard events are handled on the combobox button\n <li\n key={value}\n {...getDataAttributes(option)}\n aria-disabled={disabled \|\| undefined}\n aria-selected={value === selectedValue}\n className={\n value === activeOption?.value\n ? \"tds-select-option--active\"\n : undefined\n }\n id={`${baseId}-option-${value}`}\n onClick={disabled ? undefined : () => commitSelection(value!)}\n role=\"option\"\n >\n {label}\n </li>\n )\n }\n\n return (\n <>\n <button\n ref={resolvedTriggerRef}\n popovertarget={baseId}\n aria-activedescendant={activeOptionId}\n aria-controls={baseId}\n aria-describedby={ariaDescribedBy}\n aria-disabled={disabled ? \"true\" : undefined}\n aria-expanded={isOpen}\n aria-haspopup=\"listbox\"\n aria-invalid={invalid ? \"true\" : undefined}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-required={required ? \"true\" : undefined}\n disabled={disabled}\n onBlur={handleButtonBlur}\n onClick={handleButtonClick}\n onFocus={handleButtonFocus}\n onKeyDown={handleKeyDown}\n role=\"combobox\"\n type=\"button\"\n >\n {selectedOption ? selectedOption.label : placeholder}\n </button>\n <div\n ref={popoverRef}\n popover=\"\"\n id={baseId}\n role=\"listbox\"\n aria-describedby={ariaDescribedBy}\n aria-invalid={invalid ? \"true\" : undefined}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-required={required ? \"true\" : undefined}\n >\n {renderListSegments(segments, baseId, renderListOption)}\n </div>\n <select\n {...props}\n ref={setHiddenSelectRef}\n aria-hidden\n className=\"tds-select-hidden-select\"\n disabled={disabled}\n id={`${baseId}-control`}\n onChange={handleHiddenSelectChange}\n required={required}\n tabIndex={-1}\n value={selectedValue ?? \"\"}\n >\n <option value=\"\" />\n <SelectOptions items={options} />\n </select>\n </>\n )\n }\n)\n\nSelectPopover.displayName = \"SelectPopover\"\n"],"names":["React"],"mappings":"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"}

package/dist/components/sidenav/Sidenav.d.ts CHANGED Viewed

@@ -7,6 +7,9 @@ import React from "react";
  * `<Sidenav> <SidenavSection> <SidenavItem /> </SidenavSection> </Sidenav>`
  *
  * Please refer to each component's documentation for more information on how to use them.
+ *
+ * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-sidenav--docs | Storybook Documentation}
  */
 export declare function Sidenav({ children, label, selectedItemLabel, className, popoverId, }: {
     /**

package/dist/components/sidenav/Sidenav.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Sidenav.d.ts","sourceRoot":"","sources":["../../../src/components/sidenav/Sidenav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB~~;;;;;;;;GAQG~~;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,iBAAiB,EACjB,SAAS,EACT,SAAS,GACV,EAAE;IACD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,qBAcA"}
1	+ {"version":3,"file":"Sidenav.d.ts","sourceRoot":"","sources":["../../../src/components/sidenav/Sidenav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;;;;;;;;;GAWG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,iBAAiB,EACjB,SAAS,EACT,SAAS,GACV,EAAE;IACD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,qBAcA"}

package/dist/components/sidenav/Sidenav.js CHANGED Viewed

@@ -8,6 +8,9 @@ import React from 'react';
  * `<Sidenav> <SidenavSection> <SidenavItem /> </SidenavSection> </Sidenav>`
  *
  * Please refer to each component's documentation for more information on how to use them.
+ *
+ * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-sidenav--docs | Storybook Documentation}
  */
 function Sidenav({ children, label, selectedItemLabel, className, popoverId, }) {
     const popoverIdProp = popoverId && popoverId.trim() ? { "popover-id": popoverId } : {};