@planningcenter/tapestry 3.3.0 → 3.3.1-qa-885.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.
- package/dist/components/select/Select.d.ts.map +1 -1
- package/dist/components/select/Select.js +2 -1
- package/dist/components/select/Select.js.map +1 -1
- package/dist/reactRender.css +1540 -1540
- package/dist/reactRender.css.map +1 -1
- package/dist/reactRenderLegacy.css +1540 -1540
- package/dist/reactRenderLegacy.css.map +1 -1
- package/package.json +5 -5
|
@@ -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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"}
|
|
@@ -21,7 +21,8 @@ const Select = forwardRef(function Select(props, ref) {
|
|
|
21
21
|
const stableId = useId();
|
|
22
22
|
const controlId = id || `tds-select-${stableId}`;
|
|
23
23
|
const labelId = `${controlId}-label`;
|
|
24
|
-
const resolvedDescription = description ||
|
|
24
|
+
const resolvedDescription = description ||
|
|
25
|
+
(invalid ? "Please select an option for I am testing" : undefined);
|
|
25
26
|
const descriptionId = resolvedDescription
|
|
26
27
|
? `${controlId}-description`
|
|
27
28
|
: undefined;
|
|
@@ -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\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 ||\n (invalid ? \"Please select an option for I am testing\" : 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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"}
|