@alto-avios/alto-ui 4.3.0 → 4.4.1
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/assets/Accordion.css +1 -1
- package/dist/assets/FieldError.css +1 -1
- package/dist/assets/Icon.css +1 -1
- package/dist/assets/ListBoxItem.css +1 -1
- package/dist/assets/LoadingSpinner.css +1 -1
- package/dist/assets/Popover.css +1 -1
- package/dist/assets/SelectCard.css +1 -1
- package/dist/components/Accordion/Accordion.d.ts +2 -0
- package/dist/components/Accordion/Accordion.js +16 -16
- package/dist/components/AviosCurrencyBadge/AviosCurrencyBadge.d.ts +5 -1
- package/dist/components/AviosCurrencyBadge/AviosCurrencyBadge.js +20 -27
- package/dist/components/AviosCurrencyBadge/AviosCurrencyBadge.js.map +1 -1
- package/dist/components/Box/Box.js +2 -1
- package/dist/components/Box/Box.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.d.ts +21 -2
- package/dist/components/Checkbox/Checkbox.js +27 -3
- package/dist/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/components/ComboBox/ComboBox.js +1 -1
- package/dist/components/FieldError/FieldError.d.ts +23 -5
- package/dist/components/FieldError/FieldError.js +62 -14
- package/dist/components/FieldError/FieldError.js.map +1 -1
- package/dist/components/FieldHeader/FieldHeader.d.ts +3 -1
- package/dist/components/FieldHeader/FieldHeader.js +4 -2
- package/dist/components/FieldHeader/FieldHeader.js.map +1 -1
- package/dist/components/Icon/Icon.js +20 -20
- package/dist/components/Link/Link.d.ts +7 -1
- package/dist/components/Link/Link.js +14 -9
- package/dist/components/Link/Link.js.map +1 -1
- package/dist/components/ListBox/ListBox.d.ts +1 -1
- package/dist/components/ListBoxItem/ListBoxItem.d.ts +7 -2
- package/dist/components/ListBoxItem/ListBoxItem.js +18 -6
- package/dist/components/ListBoxItem/ListBoxItem.js.map +1 -1
- package/dist/components/LoadingSpinner/LoadingSpinner.d.ts +14 -2
- package/dist/components/LoadingSpinner/LoadingSpinner.js +73 -12
- package/dist/components/LoadingSpinner/LoadingSpinner.js.map +1 -1
- package/dist/components/Menu/Menu.d.ts +49 -2
- package/dist/components/Menu/Menu.js +54 -6
- package/dist/components/Menu/Menu.js.map +1 -1
- package/dist/components/MonthYearField/MonthYearField.d.ts +4 -0
- package/dist/components/MonthYearField/MonthYearField.js +7 -2
- package/dist/components/MonthYearField/MonthYearField.js.map +1 -1
- package/dist/components/PasswordField/PasswordField.js +4 -9
- package/dist/components/PasswordField/PasswordField.js.map +1 -1
- package/dist/components/Popover/Popover.js +4 -4
- package/dist/components/RadioGroup/RadioGroup.js +1 -1
- package/dist/components/SelectCard/SelectCard.js +22 -15
- package/dist/components/SelectCard/SelectCard.js.map +1 -1
- package/dist/components/SelectNative/SelectNative.d.ts +7 -2
- package/dist/components/SelectNative/SelectNative.js +4 -3
- package/dist/components/SelectNative/SelectNative.js.map +1 -1
- package/dist/components/_base/Field/Field.d.ts +11 -2
- package/dist/components/_base/Field/Field.js +15 -6
- package/dist/components/_base/Field/Field.js.map +1 -1
- package/dist/utils/backgroundColor/backgroundColor.js +5 -1
- package/dist/utils/backgroundColor/backgroundColor.js.map +1 -1
- package/dist/utils/border/border.d.ts +3 -0
- package/dist/utils/border/border.js +71 -19
- package/dist/utils/border/border.js.map +1 -1
- package/dist/utils/flex/flex.d.ts +145 -0
- package/dist/utils/flex/flex.js +245 -0
- package/dist/utils/flex/flex.js.map +1 -1
- package/dist/utils/foregroundColour/foregroundColor.js +5 -1
- package/dist/utils/foregroundColour/foregroundColor.js.map +1 -1
- package/dist/utils/padding/padding.js +80 -27
- package/dist/utils/padding/padding.js.map +1 -1
- package/dist/utils/position/position.js +5 -1
- package/dist/utils/position/position.js.map +1 -1
- package/package.json +4 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._accordion_1f1yj_1{--accordion-transition-duration:.2s;--accordion-transition-timing:cubic-bezier(.4,0,.2,1);align-items:center;align-self:stretch;background-color:var(--alto-sem-color-bg-white-vibrant-default);border:1px solid var(--alto-sem-color-border-secondary);border-radius:var(--alto-card-radius);display:flex;flex-direction:column;padding:0}._accordionGroup_1f1yj_14,._accordionStack_1f1yj_20{display:flex;flex-direction:column;gap:var(--alto-sem-space-2xs)}._accordionHeader_1f1yj_26{display:flex;flex-direction:column;gap:var(--alto-sem-space-4xs);padding-bottom:var(--alto-sem-space-2xs)}._trigger_1f1yj_33{background-color:var(--alto-sem-color-bg-white-vibrant-default);border:none;border-radius:var(--alto-card-radius);cursor:pointer;padding:var(--alto-sem-space-md) var(--alto-sem-space-sm);width:100%}._buttonContent_1f1yj_42{align-items:center;display:flex;gap:var(--alto-sem-space-sm);justify-content:space-between;width:100%}._titleContainer_1f1yj_50{align-items:center;display:flex;flex:1;gap:var(--alto-sem-space-2xs)}._titleWrapper_1f1yj_57{display:flex;flex-direction:column}._endContainer_1f1yj_62{gap:var(--alto-sem-space-sm)}._endContainer_1f1yj_62,._titleEnd_1f1yj_69,._titleStart_1f1yj_68{align-items:center;display:flex}._accordionTitle_1f1yj_74{color:var(--alto-sem-color-fg-accent-secondary);flex:1;font-size:var(--alto-sem-text-body-lg-font-size);font-style:normal;font-weight:var(--alto-sem-text-body-bold-font-weight);letter-spacing:var(--alto-sem-text-body-lg-letter-spacing);line-height:var(--alto-sem-text-body-lg-line-height);word-break:break-all}._accordionDescription_1f1yj_88,._accordionTitle_1f1yj_74{font-family:var(--alto-sem-text-body-font-family);margin:0;text-align:left}._accordionDescription_1f1yj_88{color:var(--alto-sem-color-fg-secondary);font-size:var(--alto-sem-text-body-md-font-size);letter-spacing:var(--alto-sem-text-body-md-letter-spacing);line-height:var(--alto-sem-text-body-md-line-height)}._iconWrapper_1f1yj_98{align-items:center;color:var(--alto-sem-color-foreground-secondary);display:flex;justify-content:center;transition:transform .25s cubic-bezier(.4,0,.2,1)}._accordion_1f1yj_1[data-expanded=true] ._iconWrapper_1f1yj_98{transform:rotate(180deg)}._accordion_1f1yj_1>[role=group]{height:0;overflow:hidden;visibility:hidden;width:100%}._accordion_1f1yj_1>[role=group],._accordion_1f1yj_1[data-expanded=true]>[role=group]{transition:height var(--accordion-transition-duration) var(--accordion-transition-timing),visibility 0s linear}._accordion_1f1yj_1[data-expanded=true]>[role=group]{height:var(--group-height);visibility:visible}._panelContent_1f1yj_130{padding:var(--alto-sem-space-xs) var(--alto-sem-space-sm) var(--alto-sem-space-2xl)}._accordion_1f1yj_1[data-expanded=true],._accordion_1f1yj_1[data-expanded=true] ._trigger_1f1yj_33{background-color:var(--alto-sem-color-bg-layer1-default)}._accordion_1f1yj_1 ._trigger_1f1yj_33[data-hovered]{background-color:var(--alto-sem-color-overlay-state-darken-invert-hover)}._accordion_1f1yj_1 ._trigger_1f1yj_33[data-focus-visible]{box-shadow:0 0 0 2px var(--alto-sem-color-border-accent);outline:none}._accordion_1f1yj_1 ._trigger_1f1yj_33[data-pressed]{background-color:var(--alto-sem-color-overlay-state-darken-invert-active);outline:none}._accordion_1f1yj_1[data-expanded=true] ._trigger_1f1yj_33[data-hovered]{background-color:var(--alto-sem-color-overlay-state-darken-invert-hover);border-radius:var(--alto-card-radius) var(--alto-card-radius) 0 0}._accordion_1f1yj_1 ._trigger_1f1yj_33[data-focused]{outline:none}._accordion_1f1yj_1 ._trigger_1f1yj_33[data-disabled]{background-color:var(--alto-sem-color-bg-disabled-subtle);color:var(--alto-sem-color-fg-disabled-on-subtle);cursor:not-allowed}._accordion_1f1yj_1 ._trigger_1f1yj_33[data-disabled] ._iconWrapper_1f1yj_98,._trigger_1f1yj_33[data-disabled] ._accordionDescription_1f1yj_88,._trigger_1f1yj_33[data-disabled] ._accordionTitle_1f1yj_74{color:var(--alto-sem-color-fg-disabled-on-subtle)}._accordion_1f1yj_1[data-disabled]{background-color:var(--alto-sem-color-bg-disabled-subtle);border-color:var(--alto-sem-color-border-disabled-subtle)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._fieldError_1bhog_1{align-items:center;align-self:stretch;color:var(--alto-sem-color-fg-critical-primary);display:flex;font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-sm-font-size);gap:var(--alto-sem-space-4xs);letter-spacing:var(--alto-sem-text-body-sm-letter-spacing);line-height:var(--alto-sem-text-body-sm-line-height)}._sr-only_1bhog_13{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}
|
package/dist/assets/Icon.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._icon-
|
|
1
|
+
._icon-wrapper_1wjol_1{align-items:center;display:inline-flex;justify-content:center}._iconSize0_5x_1wjol_8{font-size:.5rem}._iconSize0_75x_1wjol_12{font-size:.75rem}._iconSize1_25x_1wjol_16{font-size:1.25rem}._iconSize1_5x_1wjol_20{font-size:1.5rem}._iconSize2_5x_1wjol_24{font-size:2.5rem}._iconSize0_5x_1wjol_8,._iconSize0_5x_1wjol_8 svg{height:.5rem;width:.5rem!important}._iconSize0_75x_1wjol_12,._iconSize0_75x_1wjol_12 svg{height:.75rem;width:.75rem!important}._iconSize1x_1wjol_41,._iconSize1x_1wjol_41 svg{height:1rem;width:1rem!important}._iconSize1_25x_1wjol_16,._iconSize1_25x_1wjol_16 svg{height:1.25rem;width:1.25rem!important}._iconSize1_5x_1wjol_20,._iconSize1_5x_1wjol_20 svg{height:1.5rem;width:1.5rem!important}._iconSize2x_1wjol_59,._iconSize2x_1wjol_59 svg{height:2rem;width:2rem!important}._iconSize2_5x_1wjol_24,._iconSize2_5x_1wjol_24 svg{height:2.5rem;width:2.5rem!important}._iconSize3x_1wjol_71,._iconSize3x_1wjol_71 svg{height:3rem;width:3rem!important}._iconSize4x_1wjol_77,._iconSize4x_1wjol_77 svg{height:4rem;width:4rem!important}._iconSize5x_1wjol_83,._iconSize5x_1wjol_83 svg{height:5rem;width:5rem!important}._iconSize6x_1wjol_89,._iconSize6x_1wjol_89 svg{height:6rem;width:6rem!important}._iconSize7x_1wjol_95,._iconSize7x_1wjol_95 svg{height:7rem;width:7rem!important}._iconSize8x_1wjol_101,._iconSize8x_1wjol_101 svg{height:8rem;width:8rem!important}._iconSize9x_1wjol_107,._iconSize9x_1wjol_107 svg{height:9rem;width:9rem!important}._iconSize10x_1wjol_113,._iconSize10x_1wjol_113 svg{height:10rem;width:10rem!important}._icon_1wjol_1._fixedWidth_1wjol_120{padding:0 .125em}._icon_1wjol_1._square_1wjol_124{padding:.125em}._icon_1wjol_1._roomy_1wjol_128{padding:.25em}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._listBoxItem_nivvq_1{align-items:center;border-radius:var(--alto-sem-radius-3xs);color:var(--alto-sem-color-fg-primary);cursor:pointer;display:flex;font-size:var(--alto-sem-text-body-sm-font-size);gap:var(--alto-sem-space-xs);justify-content:space-between;letter-spacing:var(--alto-sem-text-body-sm-letter-spacing);line-height:var(--alto-sem-text-body-sm-line-height);margin:var(--alto-sem-space-4xs);padding:var(--alto-sem-space-2xs) var(--alto-sem-space-xs);text-align:left;width:100%;width:-webkit-fill-available}._listBoxItemLabel_nivvq_19{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._listBoxItem_nivvq_1[data-loading]{cursor:progress;outline-style:none}._listBoxItem_nivvq_1[data-hovered]:not([data-loading]){background-color:var(--alto-sem-color-overlay-state-darken-invert-hover)}._listBoxItem_nivvq_1[data-disabled]{background:var(--alto-sem-color-bg-disabled-subtle);color:var(--alto-sem-color-fg-disabled-on-subtle);cursor:not-allowed}._listBoxItem_nivvq_1[data-pressed]:not([data-loading]){background-color:var(--alto-sem-color-overlay-state-darken-invert-active)}._listBoxItem_nivvq_1[data-focused][data-focus-visible]{background-color:var(--alto-sem-color-overlay-state-darken-invert-hover);outline-color:var(--alto-sem-color-border-accent);outline-offset:0;outline-style:solid;outline-width:var(--alto-sem-border-width-md)}._listBoxItem_nivvq_1[data-focused]{outline:none}._listBoxItem_nivvq_1[data-selected]:not([data-loading]){background-color:var(--alto-sem-color-bg-accent-subtle-default)}._listBoxItem_nivvq_1[data-selected][data-hovered]:not([data-loading]){background-color:var(--alto-sem-color-bg-accent-subtle-hover)}._listBoxItem_nivvq_1[data-selected][data-pressed]:not([data-loading]){background-color:var(--alto-sem-color-bg-accent-subtle-active)}._listBoxItem_nivvq_1[data-selected][data-focused]:not([data-loading]){background:var(--alto-sem-color-bg-accent-subtle-hover)}._listBoxItemIcon_nivvq_71,._listBoxItemSelected_nivvq_77{align-items:center;display:inline-flex;justify-content:center}._listBoxItemSelected_nivvq_77{opacity:0}._listBoxItem_nivvq_1[data-selected] ._listBoxItemSelected_nivvq_77{opacity:1}._sr-only_nivvq_88{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._loadingSpinner_1pdea_1{align-items:center;display:inline-flex;justify-content:center;line-height:1}._fa-spinner-third_1pdea_8{height:1rem;width:1rem}._iconWrapper_1pdea_13{align-items:center;display:inline-flex;height:100%;justify-content:center;width:100%}._spinner_1pdea_21{animation:_spinner-rotate_1pdea_1 1s linear infinite;fill:currentColor;height:100%;transform-box:fill-box;transform-origin:50% 50%;width:100%}@keyframes _spinner-rotate_1pdea_1{to{transform:rotate(1turn)}}._iconSize0_5x_1pdea_37{height:.5rem;width:.5rem!important}._iconSize0_75x_1pdea_42{height:.75rem;width:.75rem!important}._iconSize1x_1pdea_47{height:1rem;width:1rem!important}._iconSize1_25x_1pdea_52{height:1.25rem;width:1.25rem!important}._iconSize1_5x_1pdea_57{height:1.5rem;width:1.5rem!important}._iconSize2x_1pdea_62{height:2rem;width:2rem!important}._iconSize2_5x_1pdea_67{height:2.5rem;width:2.5rem!important}._iconSize3x_1pdea_72{height:3rem;width:3rem!important}._iconSize4x_1pdea_77{height:4rem;width:4rem!important}._iconSize5x_1pdea_82{height:5rem;width:5rem!important}._iconSize6x_1pdea_87{height:6rem;width:6rem!important}._iconSize7x_1pdea_92{height:7rem;width:7rem!important}._iconSize8x_1pdea_97{height:8rem;width:8rem!important}._iconSize9x_1pdea_102{height:9rem;width:9rem!important}._iconSize10x_1pdea_107{height:10rem;width:10rem!important}
|
package/dist/assets/Popover.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._popoverWrapper_1yhlj_1{position:absolute}._popover_1yhlj_1{background:var(--alto-sem-color-bg-layer2-default);border:1px solid var(--alto-sem-color-border-tertiary);border-radius:var(--alto-card-radius,12px);box-shadow:0 4px 6px -1px var(--alto-sem-color-overlay-state-darken-active),0 2px 4px -2px var(--alto-sem-color-overlay-state-darken-active);position:relative}._arrow_1yhlj_15{background:url('data:image/svg+xml;utf8,<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="path-1-inside-1_15337_1997" fill="white"><path d="M17 9.29999L8.51472 17.7853L0.0294347 9.29999L8.51472 0.814707L17 9.29999Z"/></mask><path d="M17 9.29999L8.51472 17.7853L0.0294347 9.29999L8.51472 0.814707L17 9.29999Z" fill="%23FEFEFE"/><path d="M8.51472 0.814707L9.22182 0.107601L8.51472 -0.599506L7.80761 0.107601L8.51472 0.814707ZM0.736542 10.0071L9.22182 1.52181L7.80761 0.107601L-0.677672 8.59288L0.736542 10.0071ZM7.80761 1.52181L16.2929 10.0071L17.7071 8.59288L9.22182 0.107601L7.80761 1.52181Z" fill="%239593A0" fill-opacity="0.25" mask="url(%23path-1-inside-1_15337_1997)"/></svg>') 50% no-repeat;height:16px;position:absolute;width:16px}._arrow_1yhlj_15[data-placement=top]{bottom:-9px;left:50%;margin-left:-8.5px;transform:rotate(180deg)}._arrow_1yhlj_15[data-placement=bottom]{left:50%;margin-left:-8.5px;top:-9px}._arrow_1yhlj_15[data-placement=left]{margin-top:-9px;right:-9px;top:50%;transform:rotate(90deg)}._arrow_1yhlj_15[data-placement=right]{left:-9px;margin-top:-9px;top:50%;transform:rotate(-90deg)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._select-
|
|
1
|
+
._select-card_1j57x_1{align-items:flex-start;background:var(--alto-sem-color-bg-layer2-default);border:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-secondary);border-radius:var(--alto-card-radius,12px);cursor:pointer;display:flex;flex-direction:column;gap:var(--alto-sem-space-xs);justify-content:center;padding:var(--alto-sem-space-md) var(--alto-sem-space-sm);width:-webkit-fill-available}._select-card_1j57x_1[data-hovered]{background:var(--alto-sem-color-bg-layer2-hover)}._select-card_1j57x_1[data-pressed]{background:var(--alto-sem-color-bg-layer2-active)}._select-card_1j57x_1[data-disabled]{background:var(--alto-sem-color-bg-disabled-subtle);border-color:var(--alto-sem-color-border-disabled-subtle)}._select-card_1j57x_1[data-focus-visible],._select-card_1j57x_1[data-selected][data-select-control=false]{border-color:var(--alto-sem-color-border-accent)}._select-card_1j57x_1[data-focus-visible]{outline-color:var(--alto-sem-color-border-accent);outline-offset:0;outline-style:solid;outline-width:var(--alto-sem-border-width-sm)}._select-card_1j57x_1[data-focus-visible][data-selected]{outline-width:var(--alto-sem-border-width-lg)}._select-card__header_1j57x_46{align-items:center;display:flex;gap:var(--alto-sem-space-xs);width:100%}._select-card__header_1j57x_46[data-select-control=false]>._checkboxSvgWrapper_1j57x_53{display:none}._select-card_1j57x_1 ._select-card__header-content-wrapper_1j57x_58{display:flex;flex:0 1 auto;flex-direction:column;width:100%}._select-card_1j57x_1[data-disabled] ._select-card__header-content-wrapper_1j57x_58,._select-card_1j57x_1[data-disabled] ._select-card__start-slot_1j57x_70{opacity:.5}._select-card__label-title_1j57x_75{color:var(--alto-sem-color-fg-primary);font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-lg-font-size);font-style:normal;font-weight:var(--alto-sem-text-heading-lg-font-weight);letter-spacing:var(--alto-sem-text-body-lg-letter-spacing);line-height:var(--alto-sem-text-body-lg-line-height);margin:0;text-align:left}._select-card_1j57x_1[data-disabled] ._select-card__label-title_1j57x_75{color:var(--alto-sem-color-fg-disabled-on-subtle)}._select-card__label_1j57x_75{display:flex;flex:0 1 auto;flex-direction:column;width:100%}._select-card__end-slot_1j57x_99{align-items:center;display:flex;flex:0 0 auto;justify-content:center}._select-card_1j57x_1[data-disabled] ._select-card__end-slot_1j57x_99{opacity:.5}._select-card__body_1j57x_111{display:flex;width:-webkit-fill-available}._select-card_1j57x_1[data-disabled] ._select-card__body_1j57x_111{opacity:.5}._select-card_1j57x_1:not([data-selected]) ._select-card__details_1j57x_122{display:none}._select-card_1j57x_1[data-selected] ._select-card__details_1j57x_122{display:flex;width:-webkit-fill-available}._select-card_1j57x_1[data-disabled] ._select-card__details_1j57x_122{display:none}._select-card__checkbox_1j57x_136 ._checkboxSvgWrapper_1j57x_53{align-items:center;background:var(--alto-sem-color-bg-layer2-default);border:1px solid var(--alto-sem-color-border-primary-default);border-radius:var(--alto-checkbox-radius);box-sizing:border-box;display:flex;flex-direction:column;flex-shrink:0;height:1.5rem;justify-content:center;width:1.5rem}._select-card_1j57x_1 ._svg_1j57x_150{fill:none;height:1rem;stroke:var(--alto-sem-color-fg-accent-on-vibrant);stroke-dasharray:22px;stroke-dashoffset:66;stroke-width:3px;transition:all .2s;width:1rem}._select-card__checkbox_1j57x_136[data-selected] ._checkboxSvgWrapper_1j57x_53{background:var(--alto-sem-color-bg-accent-vibrant-default);border-color:var(--alto-sem-color-bg-accent-vibrant-default)}._select-card__checkbox_1j57x_136[data-selected][data-hovered] ._checkboxSvgWrapper_1j57x_53{background:var(--alto-sem-color-bg-accent-vibrant-hover);border-color:var(--alto-sem-color-bg-accent-vibrant-hover)}._select-card__checkbox_1j57x_136[data-selected][data-pressed] ._checkboxSvgWrapper_1j57x_53{background:var(--alto-sem-color-bg-accent-vibrant-active);border-color:var(--alto-sem-color-bg-accent-vibrant-active)}._select-card__checkbox_1j57x_136[data-selected] ._svg_1j57x_150{stroke-dashoffset:44}._select-card__checkbox_1j57x_136[data-hovered] ._checkboxSvgWrapper_1j57x_53{border-color:var(--alto-sem-color-border-primary-hover)}._select-card__checkbox_1j57x_136[data-pressed] ._checkboxSvgWrapper_1j57x_53{border-color:var(--alto-sem-color-border-primary-active)}._select-card__checkbox_1j57x_136[data-focus-visible][data-select-control=false] ._checkboxSvgWrapper_1j57x_53{outline-color:var(--alto-sem-color-border-accent);outline-offset:var(--alto-sem-border-width-md);outline-style:solid;outline-width:var(--alto-sem-border-width-md)}._select-card__checkbox_1j57x_136[data-selected=true][data-select-control=false]{border-color:var(--alto-sem-color-border-accent)}._select-card_1j57x_1[data-disabled] ._checkboxSvgWrapper_1j57x_53{background:var(--alto-sem-color-bg-disabled-subtle);border-color:var(--alto-sem-color-border-disabled-subtle)}._select-card_1j57x_1[data-disabled][data-selected] ._checkboxSvgWrapper_1j57x_53{border-color:transparent}._select-card_1j57x_1[data-disabled] ._svg_1j57x_150{stroke:var(--alto-sem-color-fg-disabled-on-subtle)}._select-card__radio_1j57x_220 ._select-card__header_1j57x_46:before{background-color:var(--alto-sem-color-bg-layer2-default);border:1px solid var(--alto-sem-color-border-primary-default);border-radius:var(--alto-sem-radius-circle);box-sizing:border-box;content:"";display:block;flex-shrink:0;height:1.5rem;transition:all .2s;width:1.5rem}._select-card__radio_1j57x_220[data-hovered] ._select-card__header_1j57x_46:before{border-color:var(--alto-sem-color-border-primary-hover)}._select-card__radio_1j57x_220[data-focus-visible][data-select-control=false] ._select-card__header_1j57x_46:before{outline-color:var(--alto-sem-color-border-accent);outline-offset:var(--alto-sem-border-width-md);outline-style:solid;outline-width:var(--alto-sem-border-width-md);transition:none}._select-card__radio_1j57x_220[data-pressed] ._select-card__header_1j57x_46:before{border-color:var(--alto-sem-color-border-primary-active)}._select-card__radio_1j57x_220[data-selected] ._select-card__header_1j57x_46:before{background-color:var(--alto-sem-color-fg-critical-on-vibrant);border-color:var(--alto-sem-color-bg-accent-vibrant-default);border-width:.5rem;box-shadow:0 0 0 1px var(--alto-sem-color-border-white)}._select-card__radio_1j57x_220[data-selected][data-hovered] ._select-card__header_1j57x_46:before{border-color:var(--alto-sem-color-bg-accent-vibrant-hover)}._select-card__radio_1j57x_220[data-selected][data-focused] ._select-card__header_1j57x_46:before{border-color:var(--alto-sem-color-bg-accent-vibrant-active)}._select-card__radio_1j57x_220[data-selected][data-focus-visible] ._select-card__header_1j57x_46:before{border-color:var(--alto-sem-color-bg-accent-vibrant-hover)}._select-card__radio_1j57x_220[data-selected][data-pressed] ._select-card__header_1j57x_46:before{border-color:var(--alto-sem-color-bg-accent-vibrant-active)}._select-card__radio_1j57x_220[data-invalid] ._select-card__header_1j57x_46:before{background:var(--alto-sem-color-bg-critical-subtle-default);border:var(--alto-sem-border-width-md) solid var(--alto-sem-color-border-critical);border-radius:var(--alto-sem-radius-circle)}._select-card__radio_1j57x_220[data-invalid][data-hovered] ._select-card__header_1j57x_46:before{background-color:var(--alto-sem-color-bg-tertiary-hover);border-color:var(--alto-sem-color-border-critical)}._select-card__radio_1j57x_220[data-invalid][data-focused] ._select-card__header_1j57x_46:before{border-color:var(--alto-sem-color-border-critical)}._select-card__radio_1j57x_220[data-invalid][data-focus-visible] ._select-card__header_1j57x_46:before,._select-card__radio_1j57x_220[data-invalid][data-pressed] ._select-card__header_1j57x_46:before{background-color:var(--alto-sem-color-bg-tertiary-active);border-color:var(--alto-sem-color-border-critical)}._select-card__radio_1j57x_220[data-invalid][data-selected] ._select-card__header_1j57x_46:before{background-color:var(--alto-sem-color-fg-critical-on-vibrant);border-color:var(--alto-sem-color-bg-critical-vibrant-default);border-width:.5rem}._select-card__radio_1j57x_220[data-disabled] ._select-card__header_1j57x_46:before{background:var(--alto-sem-color-bg-disabled-subtle);border:1px solid var(--alto-sem-color-border-disabled-subtle);border-radius:var(--alto-sem-radius-circle)}._select-card__radio_1j57x_220[data-disabled][data-selected] ._select-card__header_1j57x_46:before{background-color:var(--alto-sem-color-bg-disabled-subtle);border-color:var(--alto-sem-color-bg-disabled-subtle);border-width:.5rem}
|
|
@@ -20,6 +20,8 @@ export interface AccordionProps extends Omit<AriaDisclosureProps, 'children'> {
|
|
|
20
20
|
id?: string;
|
|
21
21
|
/** The semantic heading level for the accordion title */
|
|
22
22
|
headingLevel?: HeadingLevel;
|
|
23
|
+
/** Whether the accordion is disabled and cannot be interacted with */
|
|
24
|
+
isDisabled?: boolean;
|
|
23
25
|
}
|
|
24
26
|
export interface AccordionGroupProps {
|
|
25
27
|
/** Title for the accordion group - can be string or ReactNode */
|
|
@@ -2,21 +2,21 @@ import { jsxs, jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import React__default from "react";
|
|
3
3
|
import { Disclosure, DisclosureGroup, Button, DisclosurePanel } from "react-aria-components";
|
|
4
4
|
import { Icon } from "../Icon/Icon.js";
|
|
5
|
-
import '../../assets/Accordion.css';const accordion = "
|
|
6
|
-
const accordionGroup = "
|
|
7
|
-
const accordionStack = "
|
|
8
|
-
const accordionHeader = "
|
|
9
|
-
const trigger = "
|
|
10
|
-
const buttonContent = "
|
|
11
|
-
const titleContainer = "
|
|
12
|
-
const titleWrapper = "
|
|
13
|
-
const endContainer = "
|
|
14
|
-
const titleStart = "
|
|
15
|
-
const titleEnd = "
|
|
16
|
-
const accordionTitle = "
|
|
17
|
-
const accordionDescription = "
|
|
18
|
-
const iconWrapper = "
|
|
19
|
-
const panelContent = "
|
|
5
|
+
import '../../assets/Accordion.css';const accordion = "_accordion_1f1yj_1";
|
|
6
|
+
const accordionGroup = "_accordionGroup_1f1yj_14";
|
|
7
|
+
const accordionStack = "_accordionStack_1f1yj_20";
|
|
8
|
+
const accordionHeader = "_accordionHeader_1f1yj_26";
|
|
9
|
+
const trigger = "_trigger_1f1yj_33";
|
|
10
|
+
const buttonContent = "_buttonContent_1f1yj_42";
|
|
11
|
+
const titleContainer = "_titleContainer_1f1yj_50";
|
|
12
|
+
const titleWrapper = "_titleWrapper_1f1yj_57";
|
|
13
|
+
const endContainer = "_endContainer_1f1yj_62";
|
|
14
|
+
const titleStart = "_titleStart_1f1yj_68";
|
|
15
|
+
const titleEnd = "_titleEnd_1f1yj_69";
|
|
16
|
+
const accordionTitle = "_accordionTitle_1f1yj_74";
|
|
17
|
+
const accordionDescription = "_accordionDescription_1f1yj_88";
|
|
18
|
+
const iconWrapper = "_iconWrapper_1f1yj_98";
|
|
19
|
+
const panelContent = "_panelContent_1f1yj_130";
|
|
20
20
|
const styles = {
|
|
21
21
|
accordion,
|
|
22
22
|
accordionGroup,
|
|
@@ -55,7 +55,7 @@ const AccordionTrigger = ({
|
|
|
55
55
|
] }),
|
|
56
56
|
/* @__PURE__ */ jsxs("span", { className: styles.endContainer, children: [
|
|
57
57
|
titleEnd2 && /* @__PURE__ */ jsx("span", { className: styles.titleEnd, children: titleEnd2 }),
|
|
58
|
-
/* @__PURE__ */ jsx(Icon, { iconName: "chevron-down", iconPrefix: "fas", className: styles.iconWrapper })
|
|
58
|
+
/* @__PURE__ */ jsx(Icon, { iconName: "chevron-down", iconPrefix: "fas", className: styles.iconWrapper, color: "accentSecondary" })
|
|
59
59
|
] })
|
|
60
60
|
] }) });
|
|
61
61
|
};
|
|
@@ -39,10 +39,14 @@ export interface AviosCurrencyBadgeProps extends Omit<AviosCurrencyProps, 'isStr
|
|
|
39
39
|
* Example: "Collect 50,000 Avios points"
|
|
40
40
|
*/
|
|
41
41
|
ariaLabel?: string;
|
|
42
|
+
/**
|
|
43
|
+
* ARIA role for the badge container
|
|
44
|
+
*/
|
|
45
|
+
role?: string;
|
|
42
46
|
/**
|
|
43
47
|
* Number of Avios points
|
|
44
48
|
*/
|
|
45
49
|
children?: number;
|
|
46
50
|
}
|
|
47
|
-
export declare const AviosCurrencyBadge: ({ kind, size, textStart, textEnd, textStartBold, textEndBold, ariaLabel, children, ...props }: AviosCurrencyBadgeProps) => import("react/jsx-runtime").JSX.Element;
|
|
51
|
+
export declare const AviosCurrencyBadge: ({ kind, size, textStart, textEnd, textStartBold, textEndBold, ariaLabel, role, children, ...props }: AviosCurrencyBadgeProps) => import("react/jsx-runtime").JSX.Element;
|
|
48
52
|
export default AviosCurrencyBadge;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { AviosCurrency } from "../AviosCurrency/AviosCurrency.js";
|
|
3
3
|
import { c as cva } from "../../index-DdUYounA.js";
|
|
4
|
+
import { useMemo } from "react";
|
|
4
5
|
import '../../assets/AviosCurrencyBadge.css';const aviosCurrencyBadge$1 = "_aviosCurrencyBadge_cc82y_1";
|
|
5
6
|
const collect = "_collect_cc82y_17";
|
|
6
7
|
const spend = "_spend_cc82y_21";
|
|
@@ -60,7 +61,7 @@ const aviosCurrencyBadge = cva(styles.aviosCurrencyBadge, {
|
|
|
60
61
|
class: styles["xs-bold"]
|
|
61
62
|
}, {
|
|
62
63
|
kind: "spend",
|
|
63
|
-
|
|
64
|
+
class: styles.onSpend
|
|
64
65
|
}]
|
|
65
66
|
});
|
|
66
67
|
const textCva = cva(styles.textStart, {
|
|
@@ -105,6 +106,13 @@ const textCva = cva(styles.textStart, {
|
|
|
105
106
|
}]
|
|
106
107
|
});
|
|
107
108
|
const BADGE_SIZES = ["xs", "sm", "md", "lg", "xl"];
|
|
109
|
+
const sizeMap = {
|
|
110
|
+
xs: "5xs",
|
|
111
|
+
sm: "4xs",
|
|
112
|
+
md: "3xs",
|
|
113
|
+
lg: "2xs",
|
|
114
|
+
xl: "xs"
|
|
115
|
+
};
|
|
108
116
|
const AviosCurrencyBadge = ({
|
|
109
117
|
kind = "collect",
|
|
110
118
|
size = "md",
|
|
@@ -113,43 +121,28 @@ const AviosCurrencyBadge = ({
|
|
|
113
121
|
textStartBold = false,
|
|
114
122
|
textEndBold = false,
|
|
115
123
|
ariaLabel,
|
|
124
|
+
role,
|
|
116
125
|
children,
|
|
117
126
|
...props
|
|
118
127
|
}) => {
|
|
119
|
-
const formattedPoints =
|
|
120
|
-
const
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
aviosCurrencySize = "4xs";
|
|
128
|
-
break;
|
|
129
|
-
case "md":
|
|
130
|
-
aviosCurrencySize = "3xs";
|
|
131
|
-
break;
|
|
132
|
-
case "lg":
|
|
133
|
-
aviosCurrencySize = "2xs";
|
|
134
|
-
break;
|
|
135
|
-
case "xl":
|
|
136
|
-
aviosCurrencySize = "xs";
|
|
137
|
-
break;
|
|
138
|
-
default:
|
|
139
|
-
aviosCurrencySize = "3xs";
|
|
140
|
-
break;
|
|
141
|
-
}
|
|
142
|
-
return /* @__PURE__ */ jsxs("span", { role: "status", "aria-label": ariaLabel || defaultAriaLabel, className: `${aviosCurrencyBadge({
|
|
128
|
+
const formattedPoints = useMemo(() => children !== void 0 ? children.toLocaleString() : void 0, [children]);
|
|
129
|
+
const computedAriaLabel = useMemo(() => {
|
|
130
|
+
if (ariaLabel) return ariaLabel;
|
|
131
|
+
const formatted = formattedPoints ?? "";
|
|
132
|
+
return `${textStart || ""} ${formatted} Avios ${textEnd || ""}`.trim();
|
|
133
|
+
}, [ariaLabel, textStart, textEnd, formattedPoints]);
|
|
134
|
+
const aviosCurrencySize = sizeMap[size] ?? "3xs";
|
|
135
|
+
return /* @__PURE__ */ jsxs("span", { "aria-label": computedAriaLabel, role: role || void 0, className: aviosCurrencyBadge({
|
|
143
136
|
size,
|
|
144
137
|
kind,
|
|
145
138
|
textStartBold,
|
|
146
139
|
textEndBold
|
|
147
|
-
})
|
|
140
|
+
}), children: [
|
|
148
141
|
textStart && /* @__PURE__ */ jsx("span", { className: textCva({
|
|
149
142
|
size,
|
|
150
143
|
bold: textStartBold
|
|
151
144
|
}), children: textStart }),
|
|
152
|
-
children && /* @__PURE__ */ jsx(AviosCurrency, { styleVariant: kind === "collect" ? "onCollect" : "onSpend", size: aviosCurrencySize, kind, ...props, children }),
|
|
145
|
+
children && /* @__PURE__ */ jsx(AviosCurrency, { "aria-hidden": true, styleVariant: kind === "collect" ? "onCollect" : "onSpend", size: aviosCurrencySize, kind, ...props, children }),
|
|
153
146
|
textEnd && /* @__PURE__ */ jsx("span", { className: textCva({
|
|
154
147
|
size,
|
|
155
148
|
bold: textEndBold
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AviosCurrencyBadge.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AviosCurrencyBadge.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Box.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { ValidationError } from '@react-types/shared';
|
|
3
|
-
import { CheckboxProps as AriaCheckboxProps } from 'react-aria-components';
|
|
3
|
+
import { ValidationResult, CheckboxProps as AriaCheckboxProps } from 'react-aria-components';
|
|
4
4
|
export interface CheckboxProps extends AriaCheckboxProps {
|
|
5
5
|
/** The label of the checkbox, can be a string or a React node. */
|
|
6
6
|
label?: string | React.ReactNode;
|
|
@@ -33,9 +33,28 @@ export interface CheckboxProps extends AriaCheckboxProps {
|
|
|
33
33
|
* @default 'aria'
|
|
34
34
|
*/
|
|
35
35
|
validationBehavior?: 'native' | 'aria';
|
|
36
|
+
/** Description text for the checkbox */
|
|
36
37
|
description?: string;
|
|
38
|
+
/** Alternate way to provide label content */
|
|
37
39
|
children?: React.ReactNode;
|
|
40
|
+
/** Focus style variant */
|
|
38
41
|
focusStyle?: 'default' | 'white';
|
|
42
|
+
/**
|
|
43
|
+
* Error message to display when the checkbox is invalid
|
|
44
|
+
* Can be a static string or a function that returns an error message
|
|
45
|
+
* @default undefined
|
|
46
|
+
*/
|
|
47
|
+
errorMessage?: string | ((validation: ValidationResult) => string);
|
|
48
|
+
/**
|
|
49
|
+
* Prefix text for screen readers only in error messages
|
|
50
|
+
* @default 'Error:'
|
|
51
|
+
*/
|
|
52
|
+
errorPrefix?: string;
|
|
53
|
+
/**
|
|
54
|
+
* Custom test ID for testing purposes
|
|
55
|
+
* @default undefined
|
|
56
|
+
*/
|
|
57
|
+
testId?: string;
|
|
39
58
|
}
|
|
40
|
-
export declare const Checkbox: ({ label, isIndeterminate, defaultSelected, isSelected, value, isDisabled, isReadOnly, isRequired, isInvalid, validate, autoFocus, name, validationBehavior, description, children, focusStyle, ...props }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
|
|
59
|
+
export declare const Checkbox: ({ label, isIndeterminate, defaultSelected, isSelected, value, isDisabled, isReadOnly, isRequired, isInvalid, validate, autoFocus, name, validationBehavior, description, children, errorMessage, errorPrefix, testId, focusStyle, ...props }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
|
|
41
60
|
export default Checkbox;
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useId, useMemo } from "react";
|
|
2
3
|
import { Checkbox as Checkbox$1 } from "react-aria-components";
|
|
3
4
|
import { c as cva } from "../../index-DdUYounA.js";
|
|
4
5
|
import FieldDescription from "../FieldDescription/FieldDescription.js";
|
|
6
|
+
import { FieldError } from "../FieldError/FieldError.js";
|
|
5
7
|
import '../../assets/Checkbox.css';const checkbox$1 = "_checkbox_1twm2_2";
|
|
6
8
|
const checkboxContainer = "_checkboxContainer_1twm2_19";
|
|
7
9
|
const checkboxLabel = "_checkboxLabel_1twm2_24";
|
|
@@ -20,6 +22,13 @@ const styles = {
|
|
|
20
22
|
defaultFocus,
|
|
21
23
|
whiteFocus
|
|
22
24
|
};
|
|
25
|
+
const DEFAULT_VALIDATION_RESULT = {
|
|
26
|
+
isInvalid: true,
|
|
27
|
+
validationErrors: ["Invalid"],
|
|
28
|
+
validationDetails: {
|
|
29
|
+
valid: false
|
|
30
|
+
}
|
|
31
|
+
};
|
|
23
32
|
const checkbox = cva(styles.checkbox, {
|
|
24
33
|
variants: {
|
|
25
34
|
focusStyle: {
|
|
@@ -47,19 +56,34 @@ const Checkbox = ({
|
|
|
47
56
|
validationBehavior,
|
|
48
57
|
description,
|
|
49
58
|
children,
|
|
59
|
+
errorMessage,
|
|
60
|
+
errorPrefix = "Error:",
|
|
61
|
+
testId,
|
|
50
62
|
focusStyle = "default",
|
|
51
63
|
...props
|
|
52
64
|
}) => {
|
|
65
|
+
const errorId = useId();
|
|
66
|
+
const descriptionId = useId();
|
|
67
|
+
const resolvedErrorMessage = useMemo(() => {
|
|
68
|
+
if (!isInvalid) return null;
|
|
69
|
+
if (typeof errorMessage === "function") {
|
|
70
|
+
return errorMessage(DEFAULT_VALIDATION_RESULT);
|
|
71
|
+
}
|
|
72
|
+
return errorMessage;
|
|
73
|
+
}, [errorMessage, isInvalid]);
|
|
74
|
+
const describedById = [description ? descriptionId : null, isInvalid && resolvedErrorMessage ? errorId : null].filter(Boolean).join(" ");
|
|
75
|
+
const labelContent = label || children;
|
|
53
76
|
return /* @__PURE__ */ jsxs("div", { className: styles.checkboxContainer, children: [
|
|
77
|
+
isInvalid && resolvedErrorMessage && /* @__PURE__ */ jsx(FieldError, { id: errorId, errorPrefix, isInvalid, children: resolvedErrorMessage }),
|
|
54
78
|
/* @__PURE__ */ jsx(Checkbox$1, { className: checkbox({
|
|
55
79
|
focusStyle
|
|
56
|
-
}), isIndeterminate, defaultSelected, isSelected, value, isDisabled, isReadOnly, isRequired, isInvalid, validate, autoFocus, name, validationBehavior, ...props, children: ({
|
|
80
|
+
}), isIndeterminate, defaultSelected, isSelected, value, isDisabled, isReadOnly, isRequired, isInvalid, validate, autoFocus, name, validationBehavior, "aria-describedby": describedById || void 0, ...props, children: ({
|
|
57
81
|
isIndeterminate: isIndeterminate2
|
|
58
82
|
}) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
59
83
|
/* @__PURE__ */ jsx("div", { className: `${styles.checkboxSvgWrapper}`, "data-disabled": isDisabled, children: /* @__PURE__ */ jsx("svg", { className: styles.svg, viewBox: "0 0 18 18", "aria-hidden": "true", children: isIndeterminate2 ? /* @__PURE__ */ jsx("rect", { x: 1, y: 7.5, width: 15, height: 3 }) : /* @__PURE__ */ jsx("polyline", { points: "1 9 7 14 15 4" }) }) }),
|
|
60
|
-
|
|
84
|
+
labelContent ? /* @__PURE__ */ jsx("span", { className: styles.checkboxLabel, children: labelContent }) : null
|
|
61
85
|
] }) }),
|
|
62
|
-
description && /* @__PURE__ */ jsx(FieldDescription, { className: styles.checkboxDescription, children: description })
|
|
86
|
+
description && /* @__PURE__ */ jsx(FieldDescription, { id: descriptionId, className: styles.checkboxDescription, children: description })
|
|
63
87
|
] });
|
|
64
88
|
};
|
|
65
89
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -21,7 +21,7 @@ const ComboBox = ({
|
|
|
21
21
|
return /* @__PURE__ */ jsxs(Field, { as: ComboBox$1, className: styles["comboBox"], ...props, children: [
|
|
22
22
|
/* @__PURE__ */ jsxs(Group, { className: styles["comboBox-group"], children: [
|
|
23
23
|
/* @__PURE__ */ jsx(Input, { className: styles["comboBox-input"] }),
|
|
24
|
-
isLoading ? /* @__PURE__ */ jsx(LoadingSpinner, { size: "
|
|
24
|
+
isLoading ? /* @__PURE__ */ jsx(LoadingSpinner, { size: "1.25x", className: styles["comboBox-loading"] }) : /* @__PURE__ */ jsx(Button, { className: styles.comboBoxButton, isDisabled: props == null ? void 0 : props.isDisabled, children: /* @__PURE__ */ jsx(Icon, { iconName: "angles-up-down", iconPrefix: "fas", padding: "roomy", scale: "1x" }) })
|
|
25
25
|
] }),
|
|
26
26
|
/* @__PURE__ */ jsx(Popover, { className: styles["comboBox-popover"], children })
|
|
27
27
|
] });
|
|
@@ -1,10 +1,28 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { FieldErrorProps as AriaFieldErrorProps, ValidationResult } from 'react-aria-components';
|
|
3
|
+
export interface FieldErrorProps extends Omit<AriaFieldErrorProps, 'children' | 'className'> {
|
|
4
4
|
/**
|
|
5
|
-
*
|
|
5
|
+
* Error message content
|
|
6
|
+
* Can be a static string or a function that returns an error message
|
|
7
|
+
*/
|
|
8
|
+
children?: React.ReactNode | ((validation: ValidationResult) => string);
|
|
9
|
+
/**
|
|
10
|
+
* Prefix text for screen readers
|
|
11
|
+
* @default 'Error:'
|
|
12
|
+
*/
|
|
13
|
+
errorPrefix?: string;
|
|
14
|
+
/**
|
|
15
|
+
* Label of the field to include in the error prefix
|
|
16
|
+
*/
|
|
17
|
+
fieldLabel?: string;
|
|
18
|
+
/**
|
|
19
|
+
* Explicitly mark the field as invalid
|
|
6
20
|
*/
|
|
7
21
|
isInvalid?: boolean;
|
|
22
|
+
/**
|
|
23
|
+
* CSS class name for the error
|
|
24
|
+
*/
|
|
25
|
+
className?: string;
|
|
8
26
|
}
|
|
9
|
-
export declare const FieldError: ({ children, isInvalid
|
|
27
|
+
export declare const FieldError: ({ children, errorPrefix, fieldLabel, isInvalid, className, ...props }: FieldErrorProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
28
|
export default FieldError;
|
|
@@ -1,28 +1,76 @@
|
|
|
1
|
-
import { jsxs, jsx
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { FieldError as FieldError$1 } from "react-aria-components";
|
|
3
3
|
import { Icon } from "../Icon/Icon.js";
|
|
4
|
-
import '../../assets/FieldError.css';const fieldError = "
|
|
4
|
+
import '../../assets/FieldError.css';const fieldError = "_fieldError_1bhog_1";
|
|
5
5
|
const styles = {
|
|
6
|
-
fieldError
|
|
6
|
+
fieldError,
|
|
7
|
+
"sr-only": "_sr-only_1bhog_13"
|
|
7
8
|
};
|
|
8
9
|
const FieldError = ({
|
|
9
10
|
children,
|
|
10
|
-
|
|
11
|
+
errorPrefix = "Error:",
|
|
12
|
+
fieldLabel,
|
|
13
|
+
isInvalid,
|
|
14
|
+
className,
|
|
11
15
|
...props
|
|
12
16
|
}) => {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
+
const {
|
|
18
|
+
style,
|
|
19
|
+
...otherProps
|
|
20
|
+
} = props;
|
|
21
|
+
const spanProps = typeof style === "function" ? otherProps : {
|
|
22
|
+
...otherProps,
|
|
23
|
+
style
|
|
24
|
+
};
|
|
25
|
+
if (children && isInvalid) {
|
|
26
|
+
return /* @__PURE__ */ jsxs("span", { className: [styles.fieldError, className].filter(Boolean).join(" "), role: "alert", "aria-live": "polite", ...spanProps, children: [
|
|
27
|
+
/* @__PURE__ */ jsx("span", { className: styles["sr-only"], children: errorPrefix }),
|
|
28
|
+
/* @__PURE__ */ jsx(Icon, { iconName: "triangle-exclamation", iconPrefix: "fas", "aria-hidden": "true" }),
|
|
29
|
+
typeof children === "function" ? children({
|
|
30
|
+
isInvalid: true,
|
|
31
|
+
validationErrors: [errorPrefix ? `${errorPrefix} An error occurred.` : "An error occurred."],
|
|
32
|
+
validationDetails: {
|
|
33
|
+
valid: false,
|
|
34
|
+
badInput: false,
|
|
35
|
+
customError: false,
|
|
36
|
+
patternMismatch: false,
|
|
37
|
+
rangeOverflow: false,
|
|
38
|
+
rangeUnderflow: false,
|
|
39
|
+
stepMismatch: false,
|
|
40
|
+
tooLong: false,
|
|
41
|
+
tooShort: false,
|
|
42
|
+
typeMismatch: false,
|
|
43
|
+
valueMissing: false
|
|
44
|
+
}
|
|
45
|
+
}) : children
|
|
17
46
|
] });
|
|
18
47
|
}
|
|
19
|
-
return /* @__PURE__ */ jsx(FieldError$1, {
|
|
20
|
-
validationErrors
|
|
48
|
+
return /* @__PURE__ */ jsx(FieldError$1, { ...props, children: ({
|
|
49
|
+
validationErrors,
|
|
50
|
+
isInvalid: isInvalid2
|
|
21
51
|
}) => {
|
|
22
|
-
const errorMessage = children
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
52
|
+
const errorMessage = typeof children === "function" ? children({
|
|
53
|
+
isInvalid: isInvalid2,
|
|
54
|
+
validationErrors,
|
|
55
|
+
validationDetails: {
|
|
56
|
+
badInput: false,
|
|
57
|
+
customError: false,
|
|
58
|
+
patternMismatch: false,
|
|
59
|
+
rangeOverflow: false,
|
|
60
|
+
rangeUnderflow: false,
|
|
61
|
+
stepMismatch: false,
|
|
62
|
+
tooLong: false,
|
|
63
|
+
tooShort: false,
|
|
64
|
+
typeMismatch: false,
|
|
65
|
+
valid: !isInvalid2,
|
|
66
|
+
valueMissing: false
|
|
67
|
+
}
|
|
68
|
+
}) : children || (validationErrors == null ? void 0 : validationErrors[0]);
|
|
69
|
+
if (!errorMessage || !isInvalid2) return null;
|
|
70
|
+
const fullErrorPrefix = fieldLabel ? `${fieldLabel} ${errorPrefix}` : errorPrefix;
|
|
71
|
+
return /* @__PURE__ */ jsxs("span", { className: [styles.fieldError, className].filter(Boolean).join(" "), role: "alert", "aria-live": "polite", "aria-atomic": "true", children: [
|
|
72
|
+
/* @__PURE__ */ jsx("span", { className: styles["sr-only"], children: fullErrorPrefix }),
|
|
73
|
+
/* @__PURE__ */ jsx(Icon, { iconName: "triangle-exclamation", iconPrefix: "fas", "aria-hidden": "true" }),
|
|
26
74
|
errorMessage
|
|
27
75
|
] });
|
|
28
76
|
} });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldError.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FieldError.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -9,6 +9,8 @@ export interface FieldHeaderProps {
|
|
|
9
9
|
descriptionId?: string;
|
|
10
10
|
errorId?: string;
|
|
11
11
|
optionalTranslation?: string;
|
|
12
|
+
showError?: boolean;
|
|
13
|
+
errorPrefix?: string;
|
|
12
14
|
}
|
|
13
|
-
export declare const FieldHeader: ({ label, description, isInvalid, isRequired, errorMessage, labelFor, descriptionId, errorId, optionalTranslation, }: FieldHeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare const FieldHeader: ({ label, description, isInvalid, isRequired, errorMessage, labelFor, descriptionId, errorId, optionalTranslation, showError, errorPrefix, }: FieldHeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
16
|
export default FieldHeader;
|
|
@@ -16,7 +16,9 @@ const FieldHeader = ({
|
|
|
16
16
|
labelFor,
|
|
17
17
|
descriptionId,
|
|
18
18
|
errorId,
|
|
19
|
-
optionalTranslation = "Optional"
|
|
19
|
+
optionalTranslation = "Optional",
|
|
20
|
+
showError = true,
|
|
21
|
+
errorPrefix
|
|
20
22
|
}) => {
|
|
21
23
|
return /* @__PURE__ */ jsxs("div", { className: styles.fieldHeader, "data-invalid": isInvalid ? true : void 0, children: [
|
|
22
24
|
/* @__PURE__ */ jsx("div", { className: styles["label-container"], children: label && /* @__PURE__ */ jsxs(FieldLabel, { required: isRequired ? true : void 0, htmlFor: labelFor, children: [
|
|
@@ -24,7 +26,7 @@ const FieldHeader = ({
|
|
|
24
26
|
!isRequired && ` (${optionalTranslation})`
|
|
25
27
|
] }) }),
|
|
26
28
|
description && /* @__PURE__ */ jsx(FieldDescription, { id: descriptionId, children: description }),
|
|
27
|
-
/* @__PURE__ */ jsx(FieldError, {
|
|
29
|
+
showError && /* @__PURE__ */ jsx(FieldError, { id: errorId, errorPrefix, fieldLabel: label, children: errorMessage })
|
|
28
30
|
] });
|
|
29
31
|
};
|
|
30
32
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldHeader.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FieldHeader.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|