@planningcenter/tapestry 3.1.0-rc.2 → 3.1.0-rc.20

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 (45) hide show
  1. package/dist/components/input-text-base/InputTextBase.d.ts.map +1 -1
  2. package/dist/components/input-text-base/InputTextBase.js +6 -3
  3. package/dist/components/input-text-base/InputTextBase.js.map +1 -1
  4. package/dist/components/select/Select.d.ts +89 -0
  5. package/dist/components/select/Select.d.ts.map +1 -0
  6. package/dist/components/select/Select.js +69 -0
  7. package/dist/components/select/Select.js.map +1 -0
  8. package/dist/components/select/SelectNative.d.ts +3 -1
  9. package/dist/components/select/SelectNative.d.ts.map +1 -1
  10. package/dist/components/select/SelectNative.js +34 -0
  11. package/dist/components/select/SelectNative.js.map +1 -0
  12. package/dist/components/select/SelectOptions.d.ts +1 -1
  13. package/dist/components/select/SelectOptions.d.ts.map +1 -1
  14. package/dist/components/select/SelectOptions.js +36 -0
  15. package/dist/components/select/SelectOptions.js.map +1 -0
  16. package/dist/components/select/SelectPopover.d.ts +10 -54
  17. package/dist/components/select/SelectPopover.d.ts.map +1 -1
  18. package/dist/components/select/SelectPopover.js +239 -0
  19. package/dist/components/select/SelectPopover.js.map +1 -0
  20. package/dist/components/select/index.d.ts +2 -1
  21. package/dist/components/select/index.d.ts.map +1 -1
  22. package/dist/index.css +57 -49
  23. package/dist/index.css.map +1 -1
  24. package/dist/reactRender.css +702 -170
  25. package/dist/reactRender.css.map +1 -1
  26. package/dist/reactRenderLegacy.css +702 -170
  27. package/dist/reactRenderLegacy.css.map +1 -1
  28. package/dist/tokens/tokens-deprecated.json +20 -0
  29. package/dist/tokens-dark.css +2 -6
  30. package/dist/tokens-dark.css.map +1 -1
  31. package/dist/tokens-deprecated.css +14 -0
  32. package/dist/tokens-deprecated.css.map +1 -1
  33. package/dist/tokens.css +9 -11
  34. package/dist/tokens.css.map +1 -1
  35. package/dist/unstable.css +604 -72
  36. package/dist/unstable.css.map +1 -1
  37. package/dist/unstable.js +1 -0
  38. package/dist/unstable.js.map +1 -1
  39. package/dist/utilities/keyboardUtils.js +101 -0
  40. package/dist/utilities/keyboardUtils.js.map +1 -0
  41. package/dist/utilities/selectUtils.d.ts +3 -1
  42. package/dist/utilities/selectUtils.d.ts.map +1 -1
  43. package/dist/utilities/selectUtils.js +112 -0
  44. package/dist/utilities/selectUtils.js.map +1 -0
  45. package/package.json +3 -3
@@ -1 +1 @@
1
- {"version":3,"file":"InputTextBase.d.ts","sourceRoot":"","sources":["../../../src/components/input-text-base/InputTextBase.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE;QAChB,aAAa,CAAC,EAAE,MAAM,CAAA;QACtB,OAAO,EAAE,MAAM,CAAA;KAChB,KAAK,KAAK,CAAC,SAAS,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;CACnB;AAED,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,MAAM,kBAAkB,CACzB,GACC,kBAAkB,CAAA;AAEpB,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,WAAW,EACX,SAAS,EACT,EAAE,EACF,KAAK,EACL,OAAO,EACP,IAAI,GACL,EAAE,yBAAyB,qBA6B3B"}
1
+ {"version":3,"file":"InputTextBase.d.ts","sourceRoot":"","sources":["../../../src/components/input-text-base/InputTextBase.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE;QAChB,aAAa,CAAC,EAAE,MAAM,CAAA;QACtB,OAAO,EAAE,MAAM,CAAA;KAChB,KAAK,KAAK,CAAC,SAAS,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;CACnB;AAED,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,MAAM,kBAAkB,CACzB,GACC,kBAAkB,CAAA;AAEpB,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,WAAW,EACX,SAAS,EACT,EAAE,EACF,KAAK,EACL,OAAO,EACP,IAAI,GACL,EAAE,yBAAyB,qBAiC3B"}
@@ -10,16 +10,19 @@ function InputTextBase({ children, className, description, hideLabel, id, label,
10
10
  });
11
11
  const stableId = useId();
12
12
  const inputId = id || `tds-input-${stableId}`;
13
- const descriptionId = description ? `${inputId}-description` : undefined;
13
+ const resolvedDescription = description || (invalid ? "This field is required" : undefined);
14
+ const descriptionId = resolvedDescription
15
+ ? `${inputId}-description`
16
+ : undefined;
14
17
  return (React.createElement("div", { className: combinedClassName },
15
18
  !hideLabel && label ? React.createElement("label", { htmlFor: inputId }, label) : null,
16
19
  children({
17
20
  descriptionId,
18
21
  inputId,
19
22
  }),
20
- description && (React.createElement("p", { id: descriptionId, className: "tds-input-description" },
23
+ resolvedDescription && (React.createElement("p", { id: descriptionId, className: "tds-input-description" },
21
24
  React.createElement(Icon, { className: "tds-input-description-invalid-icon", symbol: "general#exclamation-triangle", "aria-hidden": true }),
22
- description))));
25
+ resolvedDescription))));
23
26
  }
24
27
 
25
28
  export { InputTextBase };
@@ -1 +1 @@
1
- {"version":3,"file":"InputTextBase.js","sources":["../../../src/components/input-text-base/InputTextBase.tsx"],"sourcesContent":["import Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport * as React from \"react\"\n\ninterface InputTextBaseProps {\n children: (props: {\n descriptionId?: string\n inputId: string\n }) => React.ReactNode\n description?: string\n hideLabel?: boolean\n id?: string\n invalid?: boolean\n label?: React.ReactNode\n size?: \"md\" | \"lg\"\n}\n\nexport type InputTextBaseElementProps = Omit<\n React.HTMLAttributes<HTMLDivElement>,\n keyof InputTextBaseProps\n> &\n InputTextBaseProps\n\nexport function InputTextBase({\n children,\n className,\n description,\n hideLabel,\n id,\n label,\n invalid,\n size,\n}: InputTextBaseElementProps) {\n const combinedClassName = classNames(\"tds-input\", className, {\n \"tds-input--invalid\": invalid,\n \"tds-input--lg\": size === \"lg\",\n })\n\n const stableId = useId()\n const inputId = id || `tds-input-${stableId}`\n const descriptionId = description ? `${inputId}-description` : undefined\n\n return (\n <div className={combinedClassName}>\n {!hideLabel && label ? <label htmlFor={inputId}>{label}</label> : null}\n {children({\n descriptionId,\n inputId,\n })}\n {description && (\n <p id={descriptionId} className=\"tds-input-description\">\n <Icon\n className=\"tds-input-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n aria-hidden\n />\n {description}\n </p>\n )}\n </div>\n )\n}\n"],"names":[],"mappings":";;;;;SAwBgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,WAAW,EACX,SAAS,EACT,EAAE,EACF,KAAK,EACL,OAAO,EACP,IAAI,GACsB,EAAA;AAC1B,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAAC,WAAW,EAAE,SAAS,EAAE;AAC3D,QAAA,oBAAoB,EAAE,OAAO;QAC7B,eAAe,EAAE,IAAI,KAAK,IAAI;AAC/B,KAAA,CAAC;AAEF,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,OAAO,GAAG,EAAE,IAAI,CAAA,UAAA,EAAa,QAAQ,EAAE;AAC7C,IAAA,MAAM,aAAa,GAAG,WAAW,GAAG,CAAA,EAAG,OAAO,CAAA,YAAA,CAAc,GAAG,SAAS;AAExE,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;AAC9B,QAAA,CAAC,SAAS,IAAI,KAAK,GAAG,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,OAAO,IAAG,KAAK,CAAS,GAAG,IAAI;AACrE,QAAA,QAAQ,CAAC;YACR,aAAa;YACb,OAAO;SACR,CAAC;QACD,WAAW,KACV,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,EAAE,EAAE,aAAa,EAAE,SAAS,EAAC,uBAAuB,EAAA;YACrD,KAAA,CAAA,aAAA,CAAC,IAAI,IACH,SAAS,EAAC,oCAAoC,EAC9C,MAAM,EAAC,8BAA8B,EAAA,aAAA,EAAA,IAAA,EAAA,CAErC;AACD,YAAA,WAAW,CACV,CACL,CACG;AAEV;;;;"}
1
+ {"version":3,"file":"InputTextBase.js","sources":["../../../src/components/input-text-base/InputTextBase.tsx"],"sourcesContent":["import Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport * as React from \"react\"\n\ninterface InputTextBaseProps {\n children: (props: {\n descriptionId?: string\n inputId: string\n }) => React.ReactNode\n description?: string\n hideLabel?: boolean\n id?: string\n invalid?: boolean\n label?: React.ReactNode\n size?: \"md\" | \"lg\"\n}\n\nexport type InputTextBaseElementProps = Omit<\n React.HTMLAttributes<HTMLDivElement>,\n keyof InputTextBaseProps\n> &\n InputTextBaseProps\n\nexport function InputTextBase({\n children,\n className,\n description,\n hideLabel,\n id,\n label,\n invalid,\n size,\n}: InputTextBaseElementProps) {\n const combinedClassName = classNames(\"tds-input\", className, {\n \"tds-input--invalid\": invalid,\n \"tds-input--lg\": size === \"lg\",\n })\n\n const stableId = useId()\n const inputId = id || `tds-input-${stableId}`\n const resolvedDescription =\n description || (invalid ? \"This field is required\" : undefined)\n const descriptionId = resolvedDescription\n ? `${inputId}-description`\n : undefined\n\n return (\n <div className={combinedClassName}>\n {!hideLabel && label ? <label htmlFor={inputId}>{label}</label> : null}\n {children({\n descriptionId,\n inputId,\n })}\n {resolvedDescription && (\n <p id={descriptionId} className=\"tds-input-description\">\n <Icon\n className=\"tds-input-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n aria-hidden\n />\n {resolvedDescription}\n </p>\n )}\n </div>\n )\n}\n"],"names":[],"mappings":";;;;;SAwBgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,WAAW,EACX,SAAS,EACT,EAAE,EACF,KAAK,EACL,OAAO,EACP,IAAI,GACsB,EAAA;AAC1B,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAAC,WAAW,EAAE,SAAS,EAAE;AAC3D,QAAA,oBAAoB,EAAE,OAAO;QAC7B,eAAe,EAAE,IAAI,KAAK,IAAI;AAC/B,KAAA,CAAC;AAEF,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,OAAO,GAAG,EAAE,IAAI,CAAA,UAAA,EAAa,QAAQ,EAAE;AAC7C,IAAA,MAAM,mBAAmB,GACvB,WAAW,KAAK,OAAO,GAAG,wBAAwB,GAAG,SAAS,CAAC;IACjE,MAAM,aAAa,GAAG;UAClB,CAAA,EAAG,OAAO,CAAA,YAAA;UACV,SAAS;AAEb,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;AAC9B,QAAA,CAAC,SAAS,IAAI,KAAK,GAAG,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,OAAO,IAAG,KAAK,CAAS,GAAG,IAAI;AACrE,QAAA,QAAQ,CAAC;YACR,aAAa;YACb,OAAO;SACR,CAAC;QACD,mBAAmB,KAClB,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,EAAE,EAAE,aAAa,EAAE,SAAS,EAAC,uBAAuB,EAAA;YACrD,KAAA,CAAA,aAAA,CAAC,IAAI,IACH,SAAS,EAAC,oCAAoC,EAC9C,MAAM,EAAC,8BAA8B,EAAA,aAAA,EAAA,IAAA,EAAA,CAErC;AACD,YAAA,mBAAmB,CAClB,CACL,CACG;AAEV;;;;"}
@@ -0,0 +1,89 @@
1
+ import "./index.css";
2
+ import React, { type SelectHTMLAttributes } from "react";
3
+ export type SelectSize = "lg" | "md";
4
+ export interface SelectOptionWithTextLabel {
5
+ [key: `data-${string}`]: boolean | number | string | undefined;
6
+ /** Whether this option is non-interactive. */
7
+ disabled?: boolean;
8
+ divider?: never;
9
+ /** Displayed as the option content and used for type-ahead matching. */
10
+ label: string;
11
+ textValue?: never;
12
+ value: string;
13
+ }
14
+ export interface SelectOptionWithNodeLabel {
15
+ [key: `data-${string}`]: boolean | number | string | undefined;
16
+ /** Whether this option is non-interactive. */
17
+ disabled?: boolean;
18
+ divider?: never;
19
+ /** Displayed as the option content. */
20
+ label: React.ReactNode;
21
+ /** Plain-text representation required for type-ahead matching. */
22
+ textValue: string;
23
+ value: string;
24
+ }
25
+ export interface SelectOptionDivider {
26
+ disabled?: never;
27
+ divider: true;
28
+ label?: never;
29
+ textValue?: never;
30
+ value?: never;
31
+ }
32
+ export type SelectOption = SelectOptionDivider | SelectOptionWithNodeLabel | SelectOptionWithTextLabel;
33
+ export interface SelectOptionsGroup {
34
+ /** Whether all options in this group are non-interactive. */
35
+ disabled?: boolean;
36
+ /** Visible heading displayed above the group's options. */
37
+ label: string;
38
+ /** The selectable options within this group. */
39
+ options: SelectOption[];
40
+ }
41
+ export type SelectItem = SelectOption | SelectOptionsGroup;
42
+ interface SelectBaseProps {
43
+ /** Render as popover listbox (SelectPopover) instead of native <select>. */
44
+ complex?: boolean;
45
+ /** Helper text below the select. Red when invalid. */
46
+ description?: string;
47
+ /** Triggers invalid state (red border, red description). */
48
+ invalid?: boolean;
49
+ /** A flat or mixed array of options and option groups. */
50
+ options: SelectItem[];
51
+ /** Placeholder text for the empty state. */
52
+ placeholder: string;
53
+ /** Visual size of the select. */
54
+ size?: SelectSize;
55
+ }
56
+ interface SelectWithVisibleLabel extends SelectBaseProps {
57
+ /** If true, label is visually hidden and applied as aria-label instead. */
58
+ hideLabel?: false;
59
+ /** Label text displayed above the select. */
60
+ label: string;
61
+ }
62
+ interface SelectWithHiddenLabel extends SelectBaseProps {
63
+ /** If true, label is visually hidden and applied as aria-label instead. */
64
+ hideLabel: true;
65
+ /** Label text used as aria-label when visually hidden. */
66
+ label: string;
67
+ }
68
+ interface SelectWithAriaLabel extends SelectBaseProps {
69
+ "aria-label": string;
70
+ hideLabel?: never;
71
+ label?: never;
72
+ }
73
+ interface SelectWithAriaLabelledBy extends SelectBaseProps {
74
+ "aria-labelledby": string;
75
+ hideLabel?: never;
76
+ label?: never;
77
+ }
78
+ export type SelectProps = SelectWithAriaLabel | SelectWithAriaLabelledBy | SelectWithHiddenLabel | SelectWithVisibleLabel;
79
+ type BaseSelectElementProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, keyof SelectProps | "multiple" | "size">;
80
+ export type NativeSelectElementProps = BaseSelectElementProps & SelectProps & {
81
+ complex?: false;
82
+ };
83
+ export type ComplexSelectElementProps = BaseSelectElementProps & SelectProps & {
84
+ complex: true;
85
+ };
86
+ export type SelectElementProps = NativeSelectElementProps | ComplexSelectElementProps;
87
+ export declare const Select: React.ForwardRefExoticComponent<SelectElementProps & React.RefAttributes<HTMLSelectElement>>;
88
+ export {};
89
+ //# sourceMappingURL=Select.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAKpB,OAAO,KAAK,EAAE,EAAc,KAAK,oBAAoB,EAAU,MAAM,OAAO,CAAA;AAS5E,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,CAAA;AAEpC,MAAM,WAAW,yBAAyB;IACxC,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IAC9D,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,yBAAyB;IACxC,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IAC9D,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,uCAAuC;IACvC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,kEAAkE;IAClE,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,OAAO,EAAE,IAAI,CAAA;IACb,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,YAAY,GACpB,mBAAmB,GACnB,yBAAyB,GACzB,yBAAyB,CAAA;AAE7B,MAAM,WAAW,kBAAkB;IACjC,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAA;IACb,gDAAgD;IAChD,OAAO,EAAE,YAAY,EAAE,CAAA;CACxB;AAED,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,kBAAkB,CAAA;AAM1D,UAAU,eAAe;IACvB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,0DAA0D;IAC1D,OAAO,EAAE,UAAU,EAAE,CAAA;IACrB,4CAA4C;IAC5C,WAAW,EAAE,MAAM,CAAA;IACnB,iCAAiC;IACjC,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB;AAED,UAAU,sBAAuB,SAAQ,eAAe;IACtD,2EAA2E;IAC3E,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAA;CACd;AAED,UAAU,qBAAsB,SAAQ,eAAe;IACrD,2EAA2E;IAC3E,SAAS,EAAE,IAAI,CAAA;IACf,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAA;CACd;AAED,UAAU,mBAAoB,SAAQ,eAAe;IACnD,YAAY,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,UAAU,wBAAyB,SAAQ,eAAe;IACxD,iBAAiB,EAAE,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,WAAW,GACnB,mBAAmB,GACnB,wBAAwB,GACxB,qBAAqB,GACrB,sBAAsB,CAAA;AAE1B,KAAK,sBAAsB,GAAG,IAAI,CAChC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,WAAW,GAAG,UAAU,GAAG,MAAM,CACxC,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG,sBAAsB,GAC3D,WAAW,GAAG;IACZ,OAAO,CAAC,EAAE,KAAK,CAAA;CAChB,CAAA;AAEH,MAAM,MAAM,yBAAyB,GAAG,sBAAsB,GAC5D,WAAW,GAAG;IACZ,OAAO,EAAE,IAAI,CAAA;CACd,CAAA;AAEH,MAAM,MAAM,kBAAkB,GAC1B,wBAAwB,GACxB,yBAAyB,CAAA;AAkB7B,eAAO,MAAM,MAAM,8FA4GlB,CAAA"}
@@ -0,0 +1,69 @@
1
+ import Icon from '../../utilities/Icon.js';
2
+ import { useId } from '../../utilities/useId.js';
3
+ import classNames from 'classnames';
4
+ import React__default, { forwardRef, useRef } from 'react';
5
+ import { SelectNative } from './SelectNative.js';
6
+ import { SelectPopover } from './SelectPopover.js';
7
+
8
+ function normalizeSelectValue(value) {
9
+ if (value === undefined || value === null)
10
+ return undefined;
11
+ if (Array.isArray(value))
12
+ return value[0];
13
+ return String(value);
14
+ }
15
+ // ---------------------------------------------------------------------------
16
+ // Select (public)
17
+ // ---------------------------------------------------------------------------
18
+ const Select = forwardRef(function Select(props, ref) {
19
+ const { "aria-label": userAriaLabel, "aria-labelledby": userAriaLabelledBy, className, complex, defaultValue, description, hideLabel, id, invalid, label, onChange, options, placeholder, required, size, value, ...restProps } = props;
20
+ const triggerRef = useRef(null);
21
+ const stableId = useId();
22
+ const controlId = id || `tds-select-${stableId}`;
23
+ const labelId = `${controlId}-label`;
24
+ const resolvedDescription = description || (invalid ? "Please select an option" : undefined);
25
+ const descriptionId = resolvedDescription
26
+ ? `${controlId}-description`
27
+ : undefined;
28
+ const computedClassName = classNames("tds-select", {
29
+ "tds-select--invalid": invalid,
30
+ "tds-select--lg": size === "lg",
31
+ "tds-select--required": required,
32
+ }, className);
33
+ const normalizedDefaultValue = normalizeSelectValue(defaultValue);
34
+ const normalizedValue = normalizeSelectValue(value);
35
+ const computedDefaultValue = normalizedDefaultValue === undefined && normalizedValue === undefined
36
+ ? ""
37
+ : normalizedDefaultValue;
38
+ const showLabel = !!label && !hideLabel;
39
+ const computedAriaLabel = userAriaLabel ?? (hideLabel ? label : undefined);
40
+ const computedAriaLabelledBy = userAriaLabelledBy ??
41
+ (computedAriaLabel || !showLabel ? undefined : labelId);
42
+ const sharedControlProps = {
43
+ ...restProps,
44
+ "aria-describedby": descriptionId,
45
+ "aria-label": computedAriaLabel,
46
+ "aria-labelledby": computedAriaLabelledBy,
47
+ defaultValue: computedDefaultValue,
48
+ invalid,
49
+ options,
50
+ placeholder,
51
+ required,
52
+ value: normalizedValue,
53
+ };
54
+ const handleComplexLabelClick = () => triggerRef.current?.focus();
55
+ const SelectComponent = complex ? SelectPopover : SelectNative;
56
+ return (React__default.createElement("div", { className: computedClassName },
57
+ showLabel &&
58
+ (complex ? (
59
+ // 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
60
+ React__default.createElement("div", { className: "tds-select-label", id: labelId, onClick: handleComplexLabelClick }, label)) : (React__default.createElement("label", { htmlFor: controlId, id: labelId }, label))),
61
+ React__default.createElement(SelectComponent, { ...sharedControlProps, ref: ref, id: controlId, onChange: onChange, ...(complex && { triggerRef }) }),
62
+ resolvedDescription && descriptionId && (React__default.createElement("p", { className: "tds-select-description", id: descriptionId },
63
+ React__default.createElement(Icon, { "aria-hidden": true, className: "tds-select-description-invalid-icon", symbol: "general#exclamation-triangle" }),
64
+ resolvedDescription))));
65
+ });
66
+ Select.displayName = "Select";
67
+
68
+ export { Select };
69
+ //# sourceMappingURL=Select.js.map
@@ -0,0 +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\nexport interface SelectOptionWithTextLabel {\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 value: string\n}\n\nexport interface SelectOptionWithNodeLabel {\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. */\n label: React.ReactNode\n /** Plain-text representation required for type-ahead matching. */\n textValue: string\n value: string\n}\n\nexport interface SelectOptionDivider {\n disabled?: never\n divider: true\n label?: never\n textValue?: never\n value?: never\n}\n\nexport type SelectOption =\n | SelectOptionDivider\n | SelectOptionWithNodeLabel\n | SelectOptionWithTextLabel\n\nexport interface SelectOptionsGroup {\n /** Whether all options in this group are non-interactive. */\n disabled?: boolean\n /** Visible heading displayed above the group's options. */\n label: string\n /** The selectable options within this group. */\n options: SelectOption[]\n}\n\nexport type SelectItem = SelectOption | SelectOptionsGroup\n\n// ---------------------------------------------------------------------------\n// Select component props\n// ---------------------------------------------------------------------------\n\ninterface SelectBaseProps {\n /** Render as popover listbox (SelectPopover) instead of native <select>. */\n complex?: boolean\n /** Helper text below the select. Red when invalid. */\n description?: string\n /** Triggers invalid state (red border, red description). */\n invalid?: boolean\n /** A flat or mixed array of options and option groups. */\n options: SelectItem[]\n /** Placeholder text for the empty state. */\n placeholder: string\n /** Visual size of the select. */\n size?: SelectSize\n}\n\ninterface SelectWithVisibleLabel extends SelectBaseProps {\n /** If true, label is visually hidden and applied as aria-label instead. */\n hideLabel?: false\n /** Label text displayed above the select. */\n label: string\n}\n\ninterface SelectWithHiddenLabel extends SelectBaseProps {\n /** If true, label is visually hidden and applied as aria-label instead. */\n hideLabel: true\n /** Label text used as aria-label when visually hidden. */\n label: string\n}\n\ninterface SelectWithAriaLabel extends SelectBaseProps {\n \"aria-label\": string\n hideLabel?: never\n label?: never\n}\n\ninterface SelectWithAriaLabelledBy extends SelectBaseProps {\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 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,\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,5 +1,5 @@
1
1
  import React, { type SelectHTMLAttributes } from "react";
2
- import type { SelectItem } from "./SelectPopover";
2
+ import type { SelectItem } from "./Select";
3
3
  declare global {
4
4
  namespace JSX {
5
5
  interface IntrinsicElements {
@@ -8,6 +8,8 @@ declare global {
8
8
  }
9
9
  }
10
10
  export interface SelectNativeProps {
11
+ /** Triggers invalid state (maps to aria-invalid). */
12
+ invalid?: boolean;
11
13
  /** Options to render inside the select. */
12
14
  options: SelectItem[];
13
15
  /** Placeholder text rendered as a disabled hidden option. */
@@ -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;AAGd,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAsBjD,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,2CAA2C;IAC3C,OAAO,EAAE,UAAU,EAAE,CAAA;IACrB,6DAA6D;IAC7D,WAAW,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,iBAAiB,GAAG,UAAU,CACrC,GACC,iBAAiB,CAAA;AAEnB,eAAO,MAAM,YAAY,yLA+BvB,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,6DAA6D;IAC7D,WAAW,EAAE,MAAM,CAAA;CACpB;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"}
@@ -0,0 +1,34 @@
1
+ import React__default, { forwardRef, useState, useEffect } from 'react';
2
+ import { SelectOptions } from './SelectOptions.js';
3
+
4
+ // ---------------------------------------------------------------------------
5
+ // base-select feature detection (cached)
6
+ // ---------------------------------------------------------------------------
7
+ let _supportsBaseSelect = null;
8
+ function supportsBaseSelect() {
9
+ if (_supportsBaseSelect === null) {
10
+ _supportsBaseSelect =
11
+ typeof CSS !== "undefined" &&
12
+ typeof CSS.supports === "function" &&
13
+ CSS.supports("appearance", "base-select");
14
+ }
15
+ return _supportsBaseSelect;
16
+ }
17
+ const SelectNative = forwardRef(function SelectNative({ invalid, options, placeholder, ...restProps }, ref) {
18
+ // Keep first render deterministic for SSR/hydration, then detect support on mount.
19
+ const [isCustom, setIsCustom] = useState(false);
20
+ useEffect(() => {
21
+ if (supportsBaseSelect()) {
22
+ setIsCustom(true);
23
+ }
24
+ }, []);
25
+ return (React__default.createElement("select", { ...restProps, "aria-invalid": invalid ? "true" : undefined, ref: ref },
26
+ isCustom && (React__default.createElement("button", null,
27
+ React__default.createElement("selectedcontent", null))),
28
+ placeholder && (React__default.createElement("option", { disabled: true, hidden: true, value: "" }, placeholder)),
29
+ React__default.createElement(SelectOptions, { items: options, supportsBaseSelect: isCustom })));
30
+ });
31
+ SelectNative.displayName = "SelectNative";
32
+
33
+ export { SelectNative };
34
+ //# sourceMappingURL=SelectNative.js.map
@@ -0,0 +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. */\n placeholder: string\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,5 +1,5 @@
1
1
  import React from "react";
2
- import type { SelectItem } from "./SelectPopover";
2
+ import type { SelectItem } from "./Select";
3
3
  interface SelectOptionsProps {
4
4
  items: SelectItem[];
5
5
  supportsBaseSelect?: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"SelectOptions.d.ts","sourceRoot":"","sources":["../../../src/components/select/SelectOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EACV,UAAU,EAIX,MAAM,iBAAiB,CAAA;AAMxB,UAAU,kBAAkB;IAC1B,KAAK,EAAE,UAAU,EAAE,CAAA;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAuBD,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,kBAA0B,GAC3B,EAAE,kBAAkB,GAAG,KAAK,CAAC,SAAS,CA8BtC"}
1
+ {"version":3,"file":"SelectOptions.d.ts","sourceRoot":"","sources":["../../../src/components/select/SelectOptions.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EACV,UAAU,EAIX,MAAM,UAAU,CAAA;AAMjB,UAAU,kBAAkB;IAC1B,KAAK,EAAE,UAAU,EAAE,CAAA;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AA2BD,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,kBAA0B,GAC3B,EAAE,kBAAkB,GAAG,KAAK,CAAC,SAAS,CA8BtC"}
@@ -0,0 +1,36 @@
1
+ import { getDataAttributes } from '../../utilities/selectUtils.js';
2
+ import React__default from 'react';
3
+
4
+ function isGroup(item) {
5
+ return "options" in item;
6
+ }
7
+ function getOptionLabel(option) {
8
+ if (typeof option.label === "string")
9
+ return option.label;
10
+ return option.textValue ?? option.value ?? "";
11
+ }
12
+ function Option({ option }) {
13
+ return (React__default.createElement("option", { ...getDataAttributes(option), disabled: option.disabled, value: option.value }, getOptionLabel(option)));
14
+ }
15
+ function SelectOptions({ items, supportsBaseSelect = false, }) {
16
+ return items.map((item, index) => {
17
+ if (isGroup(item)) {
18
+ return (React__default.createElement("optgroup", { key: `${item.label}-${index}`, disabled: item.disabled, label: item.label },
19
+ supportsBaseSelect && (React__default.createElement("legend", null,
20
+ React__default.createElement("span", null, item.label))),
21
+ item.options.map((opt, optIndex) => {
22
+ if (opt.divider) {
23
+ return React__default.createElement("hr", { key: `divider-${optIndex}` });
24
+ }
25
+ return React__default.createElement(Option, { key: opt.value ?? `opt-${optIndex}`, option: opt });
26
+ })));
27
+ }
28
+ if (item.divider) {
29
+ return React__default.createElement("hr", { key: `divider-${index}` });
30
+ }
31
+ return React__default.createElement(Option, { key: item.value ?? `opt-${index}`, option: item });
32
+ });
33
+ }
34
+
35
+ export { SelectOptions };
36
+ //# sourceMappingURL=SelectOptions.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SelectOptions.js","sources":["../../../src/components/select/SelectOptions.tsx"],"sourcesContent":["import { getDataAttributes } from \"@utilities/selectUtils\"\nimport React from \"react\"\n\nimport type {\n SelectItem,\n SelectOptionsGroup,\n SelectOptionWithNodeLabel,\n SelectOptionWithTextLabel,\n} from \"./Select\"\n\ninterface OptionProps {\n option: SelectOptionWithNodeLabel | SelectOptionWithTextLabel\n}\n\ninterface SelectOptionsProps {\n items: SelectItem[]\n supportsBaseSelect?: boolean\n}\n\nfunction isGroup(item: SelectItem): item is SelectOptionsGroup {\n return \"options\" in item\n}\n\nfunction getOptionLabel(option: {\n label: React.ReactNode\n textValue?: string\n value?: string\n}): string {\n if (typeof option.label === \"string\") return option.label\n return option.textValue ?? option.value ?? \"\"\n}\n\nfunction Option({ option }: OptionProps) {\n return (\n <option\n {...getDataAttributes(option)}\n disabled={option.disabled}\n value={option.value}\n >\n {getOptionLabel(option)}\n </option>\n )\n}\n\nexport function SelectOptions({\n items,\n supportsBaseSelect = false,\n}: SelectOptionsProps): React.ReactNode {\n return items.map((item, index) => {\n if (isGroup(item)) {\n return (\n <optgroup\n key={`${item.label}-${index}`}\n disabled={item.disabled}\n label={item.label}\n >\n {supportsBaseSelect && (\n <legend>\n <span>{item.label}</span>\n </legend>\n )}\n {item.options.map((opt, optIndex) => {\n if (opt.divider) {\n return <hr key={`divider-${optIndex}`} />\n }\n return <Option key={opt.value ?? `opt-${optIndex}`} option={opt} />\n })}\n </optgroup>\n )\n }\n\n if (item.divider) {\n return <hr key={`divider-${index}`} />\n }\n\n return <Option key={item.value ?? `opt-${index}`} option={item} />\n })\n}\n"],"names":["React"],"mappings":";;;AAmBA,SAAS,OAAO,CAAC,IAAgB,EAAA;IAC/B,OAAO,SAAS,IAAI,IAAI;AAC1B;AAEA,SAAS,cAAc,CAAC,MAIvB,EAAA;AACC,IAAA,IAAI,OAAO,MAAM,CAAC,KAAK,KAAK,QAAQ;QAAE,OAAO,MAAM,CAAC,KAAK;IACzD,OAAO,MAAM,CAAC,SAAS,IAAI,MAAM,CAAC,KAAK,IAAI,EAAE;AAC/C;AAEA,SAAS,MAAM,CAAC,EAAE,MAAM,EAAe,EAAA;IACrC,QACEA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GACM,iBAAiB,CAAC,MAAM,CAAC,EAC7B,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,KAAK,EAAE,MAAM,CAAC,KAAK,EAAA,EAElB,cAAc,CAAC,MAAM,CAAC,CAChB;AAEb;AAEM,SAAU,aAAa,CAAC,EAC5B,KAAK,EACL,kBAAkB,GAAG,KAAK,GACP,EAAA;IACnB,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AAC/B,QAAA,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE;YACjB,QACEA,2CACE,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA,CAAA,EAAI,KAAK,CAAA,CAAE,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA;AAEhB,gBAAA,kBAAkB,KACjBA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA;AACE,oBAAAA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAC,KAAK,CAAQ,CAClB,CACV;gBACA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,KAAI;AAClC,oBAAA,IAAI,GAAG,CAAC,OAAO,EAAE;AACf,wBAAA,OAAOA,qCAAI,GAAG,EAAE,WAAW,QAAQ,CAAA,CAAE,GAAI;oBAC3C;AACA,oBAAA,OAAOA,6BAAC,MAAM,EAAA,EAAC,GAAG,EAAE,GAAG,CAAC,KAAK,IAAI,CAAA,IAAA,EAAO,QAAQ,CAAA,CAAE,EAAE,MAAM,EAAE,GAAG,GAAI;gBACrE,CAAC,CAAC,CACO;QAEf;AAEA,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,YAAA,OAAOA,qCAAI,GAAG,EAAE,WAAW,KAAK,CAAA,CAAE,GAAI;QACxC;AAEA,QAAA,OAAOA,6BAAC,MAAM,EAAA,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,IAAI,CAAA,IAAA,EAAO,KAAK,CAAA,CAAE,EAAE,MAAM,EAAE,IAAI,GAAI;AACpE,IAAA,CAAC,CAAC;AACJ;;;;"}
@@ -1,64 +1,20 @@
1
- import "./index.css";
2
- import { SelectHTMLAttributes } from "react";
3
- import * as React from "react";
4
- export type SelectPopoverSize = "lg" | "md";
5
- export interface SelectOptionWithTextLabel {
6
- /** Whether this option is non-interactive. */
7
- disabled?: boolean;
8
- divider?: never;
9
- /** Displayed as the option content and used for type-ahead matching. */
10
- label: string;
11
- textValue?: never;
12
- value: string;
13
- }
14
- export interface SelectOptionWithNodeLabel {
15
- /** Whether this option is non-interactive. */
16
- disabled?: boolean;
17
- divider?: never;
18
- /** Displayed as the option content. */
19
- label: React.ReactNode;
20
- /** Plain-text representation required for type-ahead matching. */
21
- textValue: string;
22
- value: string;
23
- }
24
- export interface SelectOptionDivider {
25
- disabled?: never;
26
- divider: true;
27
- label?: never;
28
- textValue?: never;
29
- value?: never;
30
- }
31
- export type SelectOption = SelectOptionDivider | SelectOptionWithNodeLabel | SelectOptionWithTextLabel;
32
- export interface SelectOptionsGroup {
33
- /** Whether all options in this group are non-interactive. */
34
- disabled?: boolean;
35
- /** Visible heading displayed above the group's options. */
36
- label: string;
37
- /** The selectable options within this group. */
38
- options: SelectOption[];
39
- }
40
- export type SelectItem = SelectOption | SelectOptionsGroup;
41
- interface SelectPopoverBaseProps {
1
+ import React, { type SelectHTMLAttributes } from "react";
2
+ import type { SelectItem } from "./Select";
3
+ export interface SelectPopoverProps {
4
+ "aria-describedby"?: string;
5
+ "aria-label"?: string;
6
+ "aria-labelledby"?: string;
42
7
  defaultValue?: string;
43
- description?: string;
8
+ disabled?: boolean;
9
+ id?: string;
44
10
  invalid?: boolean;
45
11
  /** A flat or mixed array of options and option groups. */
46
12
  options: SelectItem[];
47
13
  placeholder: string;
48
14
  required?: boolean;
49
- size?: SelectPopoverSize;
15
+ triggerRef?: React.RefObject<HTMLButtonElement>;
50
16
  value?: string;
51
17
  }
52
- interface SelectPopoverWithLabel extends SelectPopoverBaseProps {
53
- "aria-labelledby"?: never;
54
- label: React.ReactNode;
55
- }
56
- interface SelectPopoverWithAriaLabelledBy extends SelectPopoverBaseProps {
57
- "aria-labelledby": string;
58
- label?: never;
59
- }
60
- export type SelectPopoverProps = SelectPopoverWithAriaLabelledBy | SelectPopoverWithLabel;
61
18
  export type SelectPopoverElementProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, keyof SelectPopoverProps | "multiple"> & SelectPopoverProps;
62
- export declare const SelectPopover: React.ForwardRefExoticComponent<SelectPopoverElementProps & React.RefAttributes<HTMLButtonElement>>;
63
- export {};
19
+ export declare const SelectPopover: React.ForwardRefExoticComponent<Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "multiple" | keyof SelectPopoverProps> & SelectPopoverProps & React.RefAttributes<HTMLSelectElement>>;
64
20
  //# sourceMappingURL=SelectPopover.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"SelectPopover.d.ts","sourceRoot":"","sources":["../../../src/components/select/SelectPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAepB,OAAO,EAEL,oBAAoB,EAMrB,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAA;AAE3C,MAAM,WAAW,yBAAyB;IACxC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,yBAAyB;IACxC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,uCAAuC;IACvC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,kEAAkE;IAClE,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,OAAO,EAAE,IAAI,CAAA;IACb,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,YAAY,GACpB,mBAAmB,GACnB,yBAAyB,GACzB,yBAAyB,CAAA;AAE7B,MAAM,WAAW,kBAAkB;IACjC,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAA;IACb,gDAAgD;IAChD,OAAO,EAAE,YAAY,EAAE,CAAA;CACxB;AAED,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,kBAAkB,CAAA;AAE1D,UAAU,sBAAsB;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,0DAA0D;IAC1D,OAAO,EAAE,UAAU,EAAE,CAAA;IACrB,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,iBAAiB,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,UAAU,sBAAuB,SAAQ,sBAAsB;IAC7D,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,UAAU,+BAAgC,SAAQ,sBAAsB;IACtE,iBAAiB,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,kBAAkB,GAC1B,+BAA+B,GAC/B,sBAAsB,CAAA;AAE1B,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,kBAAkB,GAAG,UAAU,CACtC,GACC,kBAAkB,CAAA;AAqDpB,eAAO,MAAM,aAAa,qGAyYzB,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,WAAW,EAAE,MAAM,CAAA;IACnB,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"}