@planningcenter/tapestry 3.2.1-rc.2 → 3.2.1-rc.3

package/dist/components/combo-box/ComboBox.d.ts

@@ -0,0 +1,65 @@
+import "./index.css";
+import React, { type AriaAttributes, type ReactNode } from "react";
+import type { Key, ListBoxItemProps, ListBoxSectionProps } from "react-aria-components";
+export type ComboBoxSize = "md" | "lg";
+export interface ComboBoxProps<T extends object = object> {
+    /** Whether the combo box allows the menu to be open when the collection is empty. */
+    allowsEmptyCollection?: boolean;
+    /** The children of the combo box (ComboBoxItem elements or a render function). */
+    children: ReactNode | ((item: T) => ReactNode);
+    /** The default uncontrolled value of the text input. */
+    defaultInputValue?: string;
+    /** The default list of items (uncontrolled dynamic collection). */
+    defaultItems?: Iterable<T>;
+    /** The default uncontrolled selected value. */
+    defaultValue?: Key | null;
+    /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */
+    description?: string;
+    /** Disables the field and trigger button. */
+    disabled?: boolean;
+    /** Item keys that are disabled and cannot be selected or focused. */
+    disabledKeys?: Iterable<Key>;
+    /** Custom filter function for determining if an item should appear in the list. */
+    filter?: (textValue: string, inputValue: string) => boolean;
+    /** If `true`, the `label` text is rendered as an `aria-label` instead of a visible label element. */
+    hideLabel?: boolean;
+    /** The controlled value of the text input. */
+    inputValue?: string;
+    /** Whether the input is in an invalid state. */
+    invalid?: boolean;
+    /** The list of items (controlled dynamic collection). */
+    items?: Iterable<T>;
+    /** Accessible label for the field. */
+    label: string;
+    /** Controls when the listbox opens. */
+    menuTrigger?: "focus" | "input" | "manual";
+    /** Field name for form submission. */
+    name?: string;
+    /** Called when the selected value changes. */
+    onChange?: (value: Key | null) => void;
+    /** Called when the input text changes. */
+    onInputChange?: (value: string) => void;
+    /** Placeholder text for the input. */
+    placeholder?: string;
+    /** If `true`, allows the value to be read but not changed. */
+    readOnly?: boolean;
+    /** If `true`, appends an asterisk at the end of the label text. */
+    required?: boolean;
+    /** The size of the combo box. */
+    size?: ComboBoxSize;
+    /** The controlled selected value. */
+    value?: Key | null;
+}
+export type ComboBoxElementProps<T extends object = object> = ComboBoxProps<T> & Omit<AriaAttributes, keyof ComboBoxProps<T>> & {
+    className?: string;
+    id?: string;
+};
+export declare function ComboBox<T extends object>({ allowsEmptyCollection, children, className, defaultInputValue, defaultItems, defaultValue, description, disabled, disabledKeys, filter, hideLabel, inputValue, invalid, items, label, menuTrigger, name, onChange, onInputChange, placeholder, readOnly, required, size, value, ...restProps }: ComboBoxElementProps<T>): React.JSX.Element;
+export declare function ComboBoxItem<T extends object>(props: ListBoxItemProps<T>): React.JSX.Element;
+interface ComboBoxSectionProps<T extends object> extends Omit<ListBoxSectionProps<T>, "children"> {
+    children: ReactNode;
+    title?: string;
+}
+export declare function ComboBoxSection<T extends object>({ children, title, ...props }: ComboBoxSectionProps<T>): React.JSX.Element;
+export {};
+//# sourceMappingURL=ComboBox.d.ts.map

package/dist/components/combo-box/ComboBox.d.ts.map

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

package/dist/components/combo-box/ComboBox.js

@@ -0,0 +1,30 @@
+import Icon from '../../utilities/Icon.js';
+import classNames from 'classnames';
+import React__default from 'react';
+import { ComboBox as ComboBox$1, Label, Group, Input, Button, Popover, ListBox, Text, ListBoxItem, ListBoxSection, Header } from 'react-aria-components';
+
+function ComboBox({ allowsEmptyCollection, children, className, defaultInputValue, defaultItems, defaultValue, description, disabled, disabledKeys, filter, hideLabel, inputValue, invalid, items, label, menuTrigger, name, onChange, onInputChange, placeholder, readOnly, required, size = "md", value, ...restProps }) {
+    const combinedClassName = classNames("tds-combo-box", { "tds-combo-box--lg": size === "lg" }, className);
+    return (React__default.createElement(ComboBox$1, { ...restProps, allowsEmptyCollection: allowsEmptyCollection, "aria-label": hideLabel ? label : undefined, className: combinedClassName, defaultFilter: filter, defaultInputValue: defaultInputValue, defaultItems: defaultItems, defaultValue: defaultValue, disabledKeys: disabledKeys, inputValue: inputValue, isDisabled: disabled, isInvalid: invalid, isReadOnly: readOnly, isRequired: required, items: items, menuTrigger: menuTrigger, name: name, onChange: onChange ?? undefined, onInputChange: onInputChange, value: value },
+        !hideLabel && React__default.createElement(Label, { className: "tds-combo-box-label" }, label),
+        React__default.createElement(Group, { className: "tds-combo-box-field" },
+            React__default.createElement(Input, { className: "tds-combo-box-input", placeholder: placeholder }),
+            React__default.createElement(Button, { className: "tds-combo-box-button" },
+                React__default.createElement(Icon, { "aria-hidden": true, symbol: "general#down-caret" }))),
+        React__default.createElement(Popover, { className: "tds-combo-box-popover" },
+            React__default.createElement(ListBox, { className: "tds-combo-box-list" }, children)),
+        description && (React__default.createElement(Text, { className: "tds-combo-box-description", slot: "description" },
+            React__default.createElement(Icon, { "aria-hidden": true, className: "tds-combo-box-description-invalid-icon", symbol: "general#exclamation-triangle" }),
+            description))));
+}
+function ComboBoxItem(props) {
+    return (React__default.createElement(ListBoxItem, { ...props, className: classNames("tds-combo-box-list-item", props.className) }));
+}
+function ComboBoxSection({ children, title, ...props }) {
+    return (React__default.createElement(ListBoxSection, { ...props, className: classNames("tds-combo-box-list-section", props.className) },
+        title && (React__default.createElement(Header, { className: "tds-combo-box-section-header" }, title)),
+        children));
+}
+
+export { ComboBox, ComboBoxItem, ComboBoxSection };
+//# sourceMappingURL=ComboBox.js.map

package/dist/components/combo-box/ComboBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.js","sources":["../../../src/components/combo-box/ComboBox.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport classNames from \"classnames\"\nimport React, { type AriaAttributes, type ReactNode } from \"react\"\nimport type {\n  Key,\n  ListBoxItemProps,\n  ListBoxSectionProps,\n} from \"react-aria-components\"\nimport {\n  Button,\n  ComboBox as AriaComboBox,\n  Group,\n  Header,\n  Input,\n  Label,\n  ListBox,\n  ListBoxItem,\n  ListBoxSection,\n  Popover,\n  Text,\n} from \"react-aria-components\"\n\nexport type ComboBoxSize = \"md\" | \"lg\"\n\nexport interface ComboBoxProps<T extends object = object> {\n  /** Whether the combo box allows the menu to be open when the collection is empty. */\n  allowsEmptyCollection?: boolean\n  /** The children of the combo box (ComboBoxItem elements or a render function). */\n  children: ReactNode | ((item: T) => ReactNode)\n  /** The default uncontrolled value of the text input. */\n  defaultInputValue?: string\n  /** The default list of items (uncontrolled dynamic collection). */\n  defaultItems?: Iterable<T>\n  /** The default uncontrolled selected value. */\n  defaultValue?: Key | null\n  /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n  description?: string\n  /** Disables the field and trigger button. */\n  disabled?: boolean\n  /** Item keys that are disabled and cannot be selected or focused. */\n  disabledKeys?: Iterable<Key>\n  /** Custom filter function for determining if an item should appear in the list. */\n  filter?: (textValue: string, inputValue: string) => boolean\n  /** If `true`, the `label` text is rendered as an `aria-label` instead of a visible label element. */\n  hideLabel?: boolean\n  /** The controlled value of the text input. */\n  inputValue?: string\n  /** Whether the input is in an invalid state. */\n  invalid?: boolean\n  /** The list of items (controlled dynamic collection). */\n  items?: Iterable<T>\n  /** Accessible label for the field. */\n  label: string\n  /** Controls when the listbox opens. */\n  menuTrigger?: \"focus\" | \"input\" | \"manual\"\n  /** Field name for form submission. */\n  name?: string\n  /** Called when the selected value changes. */\n  onChange?: (value: Key | null) => void\n  /** Called when the input text changes. */\n  onInputChange?: (value: string) => void\n  /** Placeholder text for the input. */\n  placeholder?: string\n  /** If `true`, allows the value to be read but not changed. */\n  readOnly?: boolean\n  /** If `true`, appends an asterisk at the end of the label text. */\n  required?: boolean\n  /** The size of the combo box. */\n  size?: ComboBoxSize\n  /** The controlled selected value. */\n  value?: Key | null\n}\n\nexport type ComboBoxElementProps<T extends object = object> = ComboBoxProps<T> &\n  Omit<AriaAttributes, keyof ComboBoxProps<T>> & {\n    className?: string\n    id?: string\n  }\n\nexport function ComboBox<T extends object>({\n  allowsEmptyCollection,\n  children,\n  className,\n  defaultInputValue,\n  defaultItems,\n  defaultValue,\n  description,\n  disabled,\n  disabledKeys,\n  filter,\n  hideLabel,\n  inputValue,\n  invalid,\n  items,\n  label,\n  menuTrigger,\n  name,\n  onChange,\n  onInputChange,\n  placeholder,\n  readOnly,\n  required,\n  size = \"md\",\n  value,\n  ...restProps\n}: ComboBoxElementProps<T>) {\n  const combinedClassName = classNames(\n    \"tds-combo-box\",\n    { \"tds-combo-box--lg\": size === \"lg\" },\n    className\n  )\n\n  return (\n    <AriaComboBox\n      {...restProps}\n      allowsEmptyCollection={allowsEmptyCollection}\n      aria-label={hideLabel ? label : undefined}\n      className={combinedClassName}\n      defaultFilter={filter}\n      defaultInputValue={defaultInputValue}\n      defaultItems={defaultItems}\n      defaultValue={defaultValue}\n      disabledKeys={disabledKeys}\n      inputValue={inputValue}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isReadOnly={readOnly}\n      isRequired={required}\n      items={items}\n      menuTrigger={menuTrigger}\n      name={name}\n      onChange={onChange ?? undefined}\n      onInputChange={onInputChange}\n      value={value}\n    >\n      {!hideLabel && <Label className=\"tds-combo-box-label\">{label}</Label>}\n      <Group className=\"tds-combo-box-field\">\n        <Input className=\"tds-combo-box-input\" placeholder={placeholder} />\n        <Button className=\"tds-combo-box-button\">\n          <Icon aria-hidden symbol=\"general#down-caret\" />\n        </Button>\n      </Group>\n      <Popover className=\"tds-combo-box-popover\">\n        <ListBox className=\"tds-combo-box-list\">{children}</ListBox>\n      </Popover>\n      {description && (\n        <Text className=\"tds-combo-box-description\" slot=\"description\">\n          <Icon\n            aria-hidden\n            className=\"tds-combo-box-description-invalid-icon\"\n            symbol=\"general#exclamation-triangle\"\n          />\n          {description}\n        </Text>\n      )}\n    </AriaComboBox>\n  )\n}\n\nexport function ComboBoxItem<T extends object>(props: ListBoxItemProps<T>) {\n  return (\n    <ListBoxItem\n      {...props}\n      className={classNames(\"tds-combo-box-list-item\", props.className)}\n    />\n  )\n}\n\ninterface ComboBoxSectionProps<T extends object>\n  extends Omit<ListBoxSectionProps<T>, \"children\"> {\n  children: ReactNode\n  title?: string\n}\n\nexport function ComboBoxSection<T extends object>({\n  children,\n  title,\n  ...props\n}: ComboBoxSectionProps<T>) {\n  return (\n    <ListBoxSection\n      {...props}\n      className={classNames(\"tds-combo-box-list-section\", props.className)}\n    >\n      {title && (\n        <Header className=\"tds-combo-box-section-header\">{title}</Header>\n      )}\n      {children}\n    </ListBoxSection>\n  )\n}\n"],"names":["React","AriaComboBox"],"mappings":"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"}

package/dist/components/combo-box/index.d.ts

@@ -0,0 +1,4 @@
+import "./index.css";
+export type { ComboBoxElementProps, ComboBoxProps, ComboBoxSize, } from "./ComboBox";
+export { ComboBox, ComboBoxItem, ComboBoxSection } from "./ComboBox";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/combo-box/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,YAAY,EACV,oBAAoB,EACpB,aAAa,EACb,YAAY,GACb,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA"}

package/dist/index.css

@@ -1619,9 +1619,8 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
 
 .tds-btn svg:not(.symbol){
     display:block;
-    inline-size:auto;
-    block-size:auto;
-    max-block-size:.66666667lh;
+    width:.66666667lh;
+    height:.66666667lh;
     color:var(--tds-btn-icon-color, currentColor);
   }