@planningcenter/tapestry 3.8.0 → 3.8.1-rc.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/componentRegistration.js +2 -0
- package/dist/componentRegistration.js.map +1 -1
- package/dist/components/time-field/TimeField.js +6 -6
- package/dist/components/time-field/TimeField.js.map +1 -1
- package/dist/reactRender.css +491 -491
- package/dist/reactRender.css.map +1 -1
- package/dist/reactRenderLegacy.css +491 -491
- package/dist/reactRenderLegacy.css.map +1 -1
- package/package.json +2 -2
|
@@ -6,6 +6,7 @@ import { Select } from './components/select/Select.js';
|
|
|
6
6
|
import { Sidenav } from './components/sidenav/Sidenav.js';
|
|
7
7
|
import { SidenavItem } from './components/sidenav/SidenavItem.js';
|
|
8
8
|
import { SidenavSection } from './components/sidenav/SidenavSection.js';
|
|
9
|
+
import { TimeField } from './components/time-field/TimeField.js';
|
|
9
10
|
|
|
10
11
|
r("DatePicker", DatePicker);
|
|
11
12
|
r("NumberStepper", NumberStepper);
|
|
@@ -14,4 +15,5 @@ r("Select", Select);
|
|
|
14
15
|
r("Sidenav", Sidenav);
|
|
15
16
|
r("SidenavItem", SidenavItem);
|
|
16
17
|
r("SidenavSection", SidenavSection);
|
|
18
|
+
r("TimeField", TimeField);
|
|
17
19
|
//# sourceMappingURL=componentRegistration.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"componentRegistration.js","sources":["../src/componentRegistration.ts"],"sourcesContent":["import { register } from \"@planningcenter/tapestry-render/registry\"\n\nimport { DatePicker } from \"./components/date-picker/DatePicker\"\nimport { NumberStepper } from \"./components/number-stepper/NumberStepper\"\nimport { PageHeader } from \"./components/page-header/PageHeader\"\nimport { Select } from \"./components/select/Select\"\nimport { Sidenav } from \"./components/sidenav/Sidenav\"\nimport { SidenavItem } from \"./components/sidenav/SidenavItem\"\nimport { SidenavSection } from \"./components/sidenav/SidenavSection\"\n\nregister(\"DatePicker\", DatePicker)\nregister(\"NumberStepper\", NumberStepper)\nregister(\"PageHeader\", PageHeader)\nregister(\"Select\", Select)\nregister(\"Sidenav\", Sidenav)\nregister(\"SidenavItem\", SidenavItem)\nregister(\"SidenavSection\", SidenavSection)\n"],"names":["register"],"mappings":"
|
|
1
|
+
{"version":3,"file":"componentRegistration.js","sources":["../src/componentRegistration.ts"],"sourcesContent":["import { register } from \"@planningcenter/tapestry-render/registry\"\n\nimport { DatePicker } from \"./components/date-picker/DatePicker\"\nimport { NumberStepper } from \"./components/number-stepper/NumberStepper\"\nimport { PageHeader } from \"./components/page-header/PageHeader\"\nimport { Select } from \"./components/select/Select\"\nimport { Sidenav } from \"./components/sidenav/Sidenav\"\nimport { SidenavItem } from \"./components/sidenav/SidenavItem\"\nimport { SidenavSection } from \"./components/sidenav/SidenavSection\"\nimport { TimeField } from \"./components/time-field/TimeField\"\n\nregister(\"DatePicker\", DatePicker)\nregister(\"NumberStepper\", NumberStepper)\nregister(\"PageHeader\", PageHeader)\nregister(\"Select\", Select)\nregister(\"Sidenav\", Sidenav)\nregister(\"SidenavItem\", SidenavItem)\nregister(\"SidenavSection\", SidenavSection)\nregister(\"TimeField\", TimeField)\n"],"names":["register"],"mappings":";;;;;;;;;;AAWAA,CAAQ,CAAC,YAAY,EAAE,UAAU,CAAC;AAClCA,CAAQ,CAAC,eAAe,EAAE,aAAa,CAAC;AACxCA,CAAQ,CAAC,YAAY,EAAE,UAAU,CAAC;AAClCA,CAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;AAC1BA,CAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;AAC5BA,CAAQ,CAAC,aAAa,EAAE,WAAW,CAAC;AACpCA,CAAQ,CAAC,gBAAgB,EAAE,cAAc,CAAC;AAC1CA,CAAQ,CAAC,WAAW,EAAE,SAAS,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import Icon from '../../utilities/Icon.js';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
|
-
import
|
|
3
|
+
import React from 'react';
|
|
4
4
|
import { TimeField as TimeField$1, Label, DateInput, DateSegment, Text } from 'react-aria-components/TimeField';
|
|
5
5
|
|
|
6
6
|
/**
|
|
@@ -21,13 +21,13 @@ function TimeField({ className, description, disabled, forceLeadingZeros, hideLa
|
|
|
21
21
|
"tds-field--lg": size === "lg",
|
|
22
22
|
"tds-time-field--lg": size === "lg",
|
|
23
23
|
}, className);
|
|
24
|
-
return (
|
|
25
|
-
!hideLabel &&
|
|
26
|
-
|
|
24
|
+
return (React.createElement(TimeField$1, { ...restProps, "aria-label": hideLabel ? label : undefined, className: combinedClassName, granularity: "minute", isDisabled: disabled, isInvalid: invalid, isReadOnly: readOnly, isRequired: required, maxValue: max ?? undefined, minValue: min ?? undefined, shouldForceLeadingZeros: forceLeadingZeros },
|
|
25
|
+
!hideLabel && React.createElement(Label, { className: "tds-field-label" }, label),
|
|
26
|
+
React.createElement(DateInput, { className: "tds-field-control tds-time-field-input" }, (segment) => (React.createElement(DateSegment, { className: segment.type === "literal"
|
|
27
27
|
? "tds-field-date-segment-separator"
|
|
28
28
|
: "tds-field-date-segment", segment: segment }))),
|
|
29
|
-
description && (
|
|
30
|
-
|
|
29
|
+
description && (React.createElement(Text, { elementType: "p", className: "tds-field-description", slot: "description" },
|
|
30
|
+
React.createElement(Icon, { "aria-hidden": true, className: "tds-field-description-invalid-icon", symbol: "general#exclamation-triangle" }),
|
|
31
31
|
description))));
|
|
32
32
|
}
|
|
33
33
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeField.js","sources":["../../../src/components/time-field/TimeField.tsx"],"sourcesContent":["import \"../field/index.css\"\nimport \"./index.css\"\n\nimport type {\n CalendarDateTime,\n Time,\n ZonedDateTime,\n} from \"@internationalized/date\"\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React from \"react\"\nimport {\n DateInput,\n DateSegment,\n Label,\n Text,\n TimeField as AriaTimeField,\n type TimeFieldProps as AriaTimeFieldProps,\n} from \"react-aria-components/TimeField\"\n\nexport type TimeFieldSize = \"md\" | \"lg\"\n\nexport type TimeFieldValue = CalendarDateTime | Time | ZonedDateTime\n\nexport interface TimeFieldProps {\n /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n description?: React.ReactNode\n /** Disables the field. */\n disabled?: boolean\n /** If `true`, always shows leading zeros in the hour field. */\n forceLeadingZeros?: boolean\n /** If `true`, renders the label visually hidden. */\n hideLabel?: boolean\n /** If `true`, applies error styling to the field and description. */\n invalid?: boolean\n /** Accessible label for the field. */\n label: string\n /** The maximum allowed time (e.g. `new Time(17, 0)`). */\n max?: TimeFieldValue\n /** The minimum allowed time (e.g. `new Time(9, 0)`). */\n min?: TimeFieldValue\n /** Allows the value to be read but not changed. */\n readOnly?: boolean\n /** If `true`, appends an asterisk after the label text. */\n required?: boolean\n /** The size of the time field. */\n size?: TimeFieldSize\n}\n\ntype AriaTimeFieldPropsToOmit =\n | \"children\"\n | \"granularity\"\n | \"placeholderValue\"\n | \"shouldForceLeadingZeros\"\n | \"slot\"\n\ntype AriaTimeFieldPropsToInclude =\n | \"defaultValue\"\n | \"hideTimeZone\"\n | \"hourCycle\"\n | \"name\"\n | \"onChange\"\n | \"value\"\n\nexport type TimeFieldElementProps = CombineAriaPropsWithCustomProps<\n AriaTimeFieldProps<TimeFieldValue>,\n TimeFieldProps,\n AriaTimeFieldPropsToOmit,\n AriaTimeFieldPropsToInclude\n>\n\n/**\n * A time field component allows users to enter and edit time values as individual\n * segments. Each segment supports keyboard entry, increment/decrement\n * with arrow keys, and respects the user's locale (12- vs 24-hour clock),\n * which can be overridden with `hourCycle`.\n *\n * Values are `Time`, `CalendarDateTime`, or `ZonedDateTime` from\n * `@internationalized/date`. Restrict the allowed range with `min`/`max`.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-timefield--docs | Storybook Documentation}\n * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}\n */\nexport function TimeField({\n className,\n description,\n disabled,\n forceLeadingZeros,\n hideLabel,\n invalid,\n label,\n max,\n min,\n readOnly,\n required,\n size = \"md\",\n ...restProps\n}: TimeFieldElementProps) {\n const combinedClassName = classNames(\n \"tds-field tds-time-field\",\n {\n \"tds-field--lg\": size === \"lg\",\n \"tds-time-field--lg\": size === \"lg\",\n },\n className\n )\n\n return (\n <AriaTimeField\n {...restProps}\n aria-label={hideLabel ? label : undefined}\n className={combinedClassName}\n granularity=\"minute\"\n isDisabled={disabled}\n isInvalid={invalid}\n isReadOnly={readOnly}\n isRequired={required}\n maxValue={max ?? undefined}\n minValue={min ?? undefined}\n shouldForceLeadingZeros={forceLeadingZeros}\n >\n {!hideLabel && <Label className=\"tds-field-label\">{label}</Label>}\n <DateInput className=\"tds-field-control tds-time-field-input\">\n {(segment) => (\n <DateSegment\n className={\n segment.type === \"literal\"\n ? \"tds-field-date-segment-separator\"\n : \"tds-field-date-segment\"\n }\n segment={segment}\n />\n )}\n </DateInput>\n {description && (\n <Text\n elementType=\"p\"\n className=\"tds-field-description\"\n slot=\"description\"\n >\n <Icon\n aria-hidden\n className=\"tds-field-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n />\n {description}\n </Text>\n )}\n </AriaTimeField>\n )\n}\n"],"names":["
|
|
1
|
+
{"version":3,"file":"TimeField.js","sources":["../../../src/components/time-field/TimeField.tsx"],"sourcesContent":["import \"../field/index.css\"\nimport \"./index.css\"\n\nimport type {\n CalendarDateTime,\n Time,\n ZonedDateTime,\n} from \"@internationalized/date\"\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React from \"react\"\nimport {\n DateInput,\n DateSegment,\n Label,\n Text,\n TimeField as AriaTimeField,\n type TimeFieldProps as AriaTimeFieldProps,\n} from \"react-aria-components/TimeField\"\n\nexport type TimeFieldSize = \"md\" | \"lg\"\n\nexport type TimeFieldValue = CalendarDateTime | Time | ZonedDateTime\n\nexport interface TimeFieldProps {\n /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n description?: React.ReactNode\n /** Disables the field. */\n disabled?: boolean\n /** If `true`, always shows leading zeros in the hour field. */\n forceLeadingZeros?: boolean\n /** If `true`, renders the label visually hidden. */\n hideLabel?: boolean\n /** If `true`, applies error styling to the field and description. */\n invalid?: boolean\n /** Accessible label for the field. */\n label: string\n /** The maximum allowed time (e.g. `new Time(17, 0)`). */\n max?: TimeFieldValue\n /** The minimum allowed time (e.g. `new Time(9, 0)`). */\n min?: TimeFieldValue\n /** Allows the value to be read but not changed. */\n readOnly?: boolean\n /** If `true`, appends an asterisk after the label text. */\n required?: boolean\n /** The size of the time field. */\n size?: TimeFieldSize\n}\n\ntype AriaTimeFieldPropsToOmit =\n | \"children\"\n | \"granularity\"\n | \"placeholderValue\"\n | \"shouldForceLeadingZeros\"\n | \"slot\"\n\ntype AriaTimeFieldPropsToInclude =\n | \"defaultValue\"\n | \"hideTimeZone\"\n | \"hourCycle\"\n | \"name\"\n | \"onChange\"\n | \"value\"\n\nexport type TimeFieldElementProps = CombineAriaPropsWithCustomProps<\n AriaTimeFieldProps<TimeFieldValue>,\n TimeFieldProps,\n AriaTimeFieldPropsToOmit,\n AriaTimeFieldPropsToInclude\n>\n\n/**\n * A time field component allows users to enter and edit time values as individual\n * segments. Each segment supports keyboard entry, increment/decrement\n * with arrow keys, and respects the user's locale (12- vs 24-hour clock),\n * which can be overridden with `hourCycle`.\n *\n * Values are `Time`, `CalendarDateTime`, or `ZonedDateTime` from\n * `@internationalized/date`. Restrict the allowed range with `min`/`max`.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-timefield--docs | Storybook Documentation}\n * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}\n */\nexport function TimeField({\n className,\n description,\n disabled,\n forceLeadingZeros,\n hideLabel,\n invalid,\n label,\n max,\n min,\n readOnly,\n required,\n size = \"md\",\n ...restProps\n}: TimeFieldElementProps) {\n const combinedClassName = classNames(\n \"tds-field tds-time-field\",\n {\n \"tds-field--lg\": size === \"lg\",\n \"tds-time-field--lg\": size === \"lg\",\n },\n className\n )\n\n return (\n <AriaTimeField\n {...restProps}\n aria-label={hideLabel ? label : undefined}\n className={combinedClassName}\n granularity=\"minute\"\n isDisabled={disabled}\n isInvalid={invalid}\n isReadOnly={readOnly}\n isRequired={required}\n maxValue={max ?? undefined}\n minValue={min ?? undefined}\n shouldForceLeadingZeros={forceLeadingZeros}\n >\n {!hideLabel && <Label className=\"tds-field-label\">{label}</Label>}\n <DateInput className=\"tds-field-control tds-time-field-input\">\n {(segment) => (\n <DateSegment\n className={\n segment.type === \"literal\"\n ? \"tds-field-date-segment-separator\"\n : \"tds-field-date-segment\"\n }\n segment={segment}\n />\n )}\n </DateInput>\n {description && (\n <Text\n elementType=\"p\"\n className=\"tds-field-description\"\n slot=\"description\"\n >\n <Icon\n aria-hidden\n className=\"tds-field-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n />\n {description}\n </Text>\n )}\n </AriaTimeField>\n )\n}\n"],"names":["AriaTimeField"],"mappings":";;;;;AAwEA;;;;;;;;;;;;AAYG;AACG,SAAU,SAAS,CAAC,EACxB,SAAS,EACT,WAAW,EACX,QAAQ,EACR,iBAAiB,EACjB,SAAS,EACT,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACU,EAAA;AACtB,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,0BAA0B,EAC1B;QACE,eAAe,EAAE,IAAI,KAAK,IAAI;QAC9B,oBAAoB,EAAE,IAAI,KAAK,IAAI;KACpC,EACD,SAAS,CACV;IAED,QACE,KAAA,CAAA,aAAA,CAACA,WAAa,EAAA,EAAA,GACR,SAAS,gBACD,SAAS,GAAG,KAAK,GAAG,SAAS,EACzC,SAAS,EAAE,iBAAiB,EAC5B,WAAW,EAAC,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,SAAS,EAAE,OAAO,EAClB,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,QAAQ,EAAE,GAAG,IAAI,SAAS,EAC1B,QAAQ,EAAE,GAAG,IAAI,SAAS,EAC1B,uBAAuB,EAAE,iBAAiB,EAAA;QAEzC,CAAC,SAAS,IAAI,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,iBAAiB,EAAA,EAAE,KAAK,CAAS;QACjE,KAAA,CAAA,aAAA,CAAC,SAAS,IAAC,SAAS,EAAC,wCAAwC,EAAA,EAC1D,CAAC,OAAO,MACP,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,SAAS,EACP,OAAO,CAAC,IAAI,KAAK;AACf,kBAAE;kBACA,wBAAwB,EAE9B,OAAO,EAAE,OAAO,EAAA,CAChB,CACH,CACS;AACX,QAAA,WAAW,KACV,KAAA,CAAA,aAAA,CAAC,IAAI,IACH,WAAW,EAAC,GAAG,EACf,SAAS,EAAC,uBAAuB,EACjC,IAAI,EAAC,aAAa,EAAA;YAElB,KAAA,CAAA,aAAA,CAAC,IAAI,yBAEH,SAAS,EAAC,oCAAoC,EAC9C,MAAM,EAAC,8BAA8B,EAAA,CACrC;AACD,YAAA,WAAW,CACP,CACR,CACa;AAEpB;;;;"}
|