@planningcenter/tapestry 4.6.0 → 4.6.1-rc.0

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

@@ -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;;;;;;;;;GASG;AACH,eAAO,MAAM,YAAY,yLAmCvB,CAAA"}
+{"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;AAoC1C,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

@@ -3,16 +3,26 @@ import { SelectOptions } from './SelectOptions.js';
 
 // ---------------------------------------------------------------------------
 // base-select feature detection (cached)
+//
+// index.css only applies `appearance: base-select` inside
+// `@media (hover) and (pointer: fine)` (intentionally duplicated there as a
+// CSS-side safety net — see the comment on that rule). This check must match
+// it, otherwise touch devices that support the feature (e.g. iOS 27+) get the
+// <button>/<selectedcontent> markup with no matching CSS to activate it,
+// leaving the trigger blank.
 // ---------------------------------------------------------------------------
-let _supportsBaseSelect = null;
+let _supportsBaseSelectFeature = null;
 function supportsBaseSelect() {
-    if (_supportsBaseSelect === null) {
-        _supportsBaseSelect =
+    if (_supportsBaseSelectFeature === null) {
+        _supportsBaseSelectFeature =
             typeof CSS !== "undefined" &&
                 typeof CSS.supports === "function" &&
                 CSS.supports("appearance", "base-select");
     }
-    return _supportsBaseSelect;
+    return (_supportsBaseSelectFeature &&
+        typeof window !== "undefined" &&
+        typeof window.matchMedia === "function" &&
+        window.matchMedia("(hover) and (pointer: fine)").matches);
 }
 /**
  * Internal component. Not intended for direct use — consume `Select` instead.

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

@@ -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\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 key={`__placeholder__${placeholder}`} disabled hidden value=\"\">\n          {placeholder}\n        </option>\n      )}\n      <SelectOptions items={options} supportsBaseSelect={isCustom} />\n    </select>\n  )\n})\n\nSelectNative.displayName = \"SelectNative\"\n"],"names":[],"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,QACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GACM,SAAS,EAAA,cAAA,EACC,OAAO,GAAG,MAAM,GAAG,SAAS,EAC1C,GAAG,EAAE,GAAG,EAAA;AAEP,QAAA,QAAQ,KACP,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA;AACE,YAAA,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA,IAAA,CAAmB,CACZ,CACV;AACA,QAAA,WAAW,KACV,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,GAAG,EAAE,CAAA,eAAA,EAAkB,WAAW,CAAA,CAAE,EAAE,QAAQ,EAAA,IAAA,EAAC,MAAM,QAAC,KAAK,EAAC,EAAE,EAAA,EACnE,WAAW,CACL,CACV;AACD,QAAA,KAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EAAC,KAAK,EAAE,OAAO,EAAE,kBAAkB,EAAE,QAAQ,EAAA,CAAI,CACxD;AAEb,CAAC;AAED,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}
+{"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// index.css only applies `appearance: base-select` inside\n// `@media (hover) and (pointer: fine)` (intentionally duplicated there as a\n// CSS-side safety net — see the comment on that rule). This check must match\n// it, otherwise touch devices that support the feature (e.g. iOS 27+) get the\n// <button>/<selectedcontent> markup with no matching CSS to activate it,\n// leaving the trigger blank.\n// ---------------------------------------------------------------------------\n\nlet _supportsBaseSelectFeature: boolean | null = null\n\nfunction supportsBaseSelect(): boolean {\n  if (_supportsBaseSelectFeature === null) {\n    _supportsBaseSelectFeature =\n      typeof CSS !== \"undefined\" &&\n      typeof CSS.supports === \"function\" &&\n      CSS.supports(\"appearance\", \"base-select\")\n  }\n\n  return (\n    _supportsBaseSelectFeature &&\n    typeof window !== \"undefined\" &&\n    typeof window.matchMedia === \"function\" &&\n    window.matchMedia(\"(hover) and (pointer: fine)\").matches\n  )\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 key={`__placeholder__${placeholder}`} disabled hidden value=\"\">\n          {placeholder}\n        </option>\n      )}\n      <SelectOptions items={options} supportsBaseSelect={isCustom} />\n    </select>\n  )\n})\n\nSelectNative.displayName = \"SelectNative\"\n"],"names":[],"mappings":";;;AAUA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,IAAI,0BAA0B,GAAmB,IAAI;AAErD,SAAS,kBAAkB,GAAA;AACzB,IAAA,IAAI,0BAA0B,KAAK,IAAI,EAAE;QACvC,0BAA0B;YACxB,OAAO,GAAG,KAAK,WAAW;AAC1B,gBAAA,OAAO,GAAG,CAAC,QAAQ,KAAK,UAAU;AAClC,gBAAA,GAAG,CAAC,QAAQ,CAAC,YAAY,EAAE,aAAa,CAAC;IAC7C;AAEA,IAAA,QACE,0BAA0B;QAC1B,OAAO,MAAM,KAAK,WAAW;AAC7B,QAAA,OAAO,MAAM,CAAC,UAAU,KAAK,UAAU;QACvC,MAAM,CAAC,UAAU,CAAC,6BAA6B,CAAC,CAAC,OAAO;AAE5D;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,QACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GACM,SAAS,EAAA,cAAA,EACC,OAAO,GAAG,MAAM,GAAG,SAAS,EAC1C,GAAG,EAAE,GAAG,EAAA;AAEP,QAAA,QAAQ,KACP,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA;AACE,YAAA,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA,IAAA,CAAmB,CACZ,CACV;AACA,QAAA,WAAW,KACV,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,GAAG,EAAE,CAAA,eAAA,EAAkB,WAAW,CAAA,CAAE,EAAE,QAAQ,EAAA,IAAA,EAAC,MAAM,QAAC,KAAK,EAAC,EAAE,EAAA,EACnE,WAAW,CACL,CACV;AACD,QAAA,KAAA,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/index.css

@@ -5802,11 +5802,12 @@ a.tds-dropdown-item:is(:hover, :active){
     }
 
 @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
+    @media (hover) and (pointer: fine){
   .tds-select select:has(> button){
-    padding-inline-end:0;
-    background-image:none;
+      padding-inline-end:0;
+      background-image:none;
   }
-    @media (hover) and (pointer: fine){
+
       :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
         padding-block:0;
         -webkit-appearance:base-select;