@mattermost/compass-ui 0.1.0-alpha.12 → 0.1.0-alpha.13

package/dist/components/date-range-picker/DateRangePicker.css

@@ -1 +1 @@
-._date-range-picker_18hzd_2{--date-range-picker-day-size: calc(var(--icon-size-32) + var(--spacing-xxxs));display:flex;flex-direction:column;position:relative;width:100%}._date-range-picker__trigger_18hzd_9{display:flex;align-items:center;gap:var(--spacing-s);padding:var(--spacing-s) var(--spacing-l);background-color:var(--center-channel-bg);border-radius:var(--radius-s);box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.16);cursor:pointer;-webkit-user-select:none;user-select:none;transition:box-shadow var(--duration-quick) var(--ease-transition)}._date-range-picker_18hzd_2:not(._date-range-picker--disabled_18hzd_21):not(._date-range-picker--open_18hzd_21):not(:focus-within) ._date-range-picker__trigger_18hzd_9:hover{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._date-range-picker_18hzd_2:focus-within ._date-range-picker__trigger_18hzd_9,._date-range-picker--open_18hzd_21 ._date-range-picker__trigger_18hzd_9{outline:none;box-shadow:inset 0 0 0 1px var(--focus-ring-color),0 0 0 1px var(--focus-ring-color)}._date-range-picker__trigger_18hzd_9:focus{outline:none}._date-range-picker__trigger_18hzd_9:focus-visible{outline:none}._date-range-picker--disabled_18hzd_21 ._date-range-picker__trigger_18hzd_9{opacity:.56;cursor:not-allowed}._date-range-picker__calendar-icon_18hzd_38{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._date-range-picker__calendar-icon_18hzd_38 svg{display:block;width:var(--icon-size-16);height:var(--icon-size-16)}._date-range-picker__value_18hzd_50{flex:1 1 0;min-width:0;align-self:stretch;display:flex;align-items:center;font-family:var(--font-family-body);font-size:var(--font-size-100);line-height:var(--line-height-100);font-weight:var(--font-weight-regular);color:var(--center-channel-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._date-range-picker__trigger_18hzd_9:not([data-has-value]) ._date-range-picker__value_18hzd_50{color:rgba(var(--center-channel-color-rgb),.64)}._date-range-picker__chevron_18hzd_68{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64);transition:transform var(--duration-quick) var(--ease-transition)}._date-range-picker__chevron_18hzd_68 svg{display:block;width:var(--icon-size-16);height:var(--icon-size-16)}._date-range-picker--open_18hzd_21 ._date-range-picker__chevron_18hzd_68{transform:rotate(180deg)}._date-range-picker__popover_18hzd_84{--date-range-picker-day-size: calc( var(--icon-size-32) + var(--spacing-xxxs) );width:340px;padding:var(--spacing-l);background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-s);box-shadow:var(--elevation-4);display:flex;flex-direction:column;gap:var(--spacing-xs);opacity:0;transform:scale(.9);transform-origin:top left;transition:opacity var(--duration-quick) var(--ease-exit),transform var(--duration-quick) var(--ease-exit);pointer-events:none}._date-range-picker__popover--above_18hzd_103{transform-origin:bottom left}._date-range-picker__popover--visible_18hzd_106{opacity:1;transform:scale(1);pointer-events:auto;transition:opacity var(--duration-quick) var(--ease-entrance),transform var(--duration-quick) var(--ease-entrance)}._date-range-picker__header_18hzd_112{display:flex;align-items:center;justify-content:space-between;padding-left:var(--spacing-xs)}._date-range-picker__month-label_18hzd_118{font-family:var(--font-family-heading);font-size:var(--font-size-200);line-height:var(--line-height-200);font-weight:var(--font-weight-semibold);color:var(--center-channel-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}._date-range-picker__header-actions_18hzd_129{display:flex;align-items:center;gap:var(--spacing-xxxs);flex-shrink:0}._date-range-picker__nav-buttons_18hzd_135{display:flex;align-items:center}._date-range-picker__weekdays_18hzd_139{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:center;padding:0}._date-range-picker__weekday_18hzd_139{display:flex;align-items:center;justify-content:center;width:100%;font-family:var(--font-family-body);font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-semibold);color:rgba(var(--center-channel-color-rgb),.72);text-transform:uppercase;letter-spacing:.24px;text-align:center}._date-range-picker__grid_18hzd_159{display:flex;flex-direction:column;gap:0}._date-range-picker__week_18hzd_139{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:stretch}._date-range-picker__day-empty_18hzd_169{display:block;height:var(--date-range-picker-day-size)}._date-range-picker__day-cell_18hzd_173{display:flex;align-items:center;justify-content:center;height:var(--date-range-picker-day-size);min-width:0;position:relative;z-index:0}._date-range-picker__day-cell--in-range_18hzd_182:before,._date-range-picker__day-cell--range-start_18hzd_182:before,._date-range-picker__day-cell--range-end_18hzd_182:before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;z-index:-1;pointer-events:none}._date-range-picker__day-cell--in-range_18hzd_182{background-color:rgba(var(--button-bg-rgb),.12)}._date-range-picker__day-cell--in-range_18hzd_182:before{background-color:rgba(var(--button-bg-rgb),.12)}._date-range-picker__day-cell--range-start_18hzd_182{background:linear-gradient(to right,transparent 50%,rgba(var(--button-bg-rgb),.12) 50%)}._date-range-picker__day-cell--range-start_18hzd_182:before{background:linear-gradient(to right,transparent 50%,rgba(var(--button-bg-rgb),.12) 50%)}._date-range-picker__day-cell--range-end_18hzd_182{background:linear-gradient(to left,transparent 50%,rgba(var(--button-bg-rgb),.12) 50%)}._date-range-picker__day-cell--range-end_18hzd_182:before{background:linear-gradient(to left,transparent 50%,rgba(var(--button-bg-rgb),.12) 50%)}._date-range-picker__day_18hzd_169{display:flex;align-items:center;justify-content:center;width:var(--date-range-picker-day-size);height:var(--date-range-picker-day-size);flex-shrink:0;background:transparent;border:0;border-radius:var(--radius-full);font-family:var(--font-family-body);font-size:var(--font-size-100);line-height:var(--line-height-100);font-weight:var(--font-weight-semibold);color:var(--center-channel-color);cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._date-range-picker__day_18hzd_169:hover:not(._date-range-picker__day--selected_18hzd_225){background-color:rgba(var(--center-channel-color-rgb),.08)}._date-range-picker__day_18hzd_169:focus{outline:none}._date-range-picker__day_18hzd_169:focus-visible:not(._date-range-picker__day--selected_18hzd_225){background-color:rgba(var(--center-channel-color-rgb),.08);box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._date-range-picker__day--selected_18hzd_225:focus-visible{box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._date-range-picker__day--today_18hzd_238{color:var(--link-color);font-weight:var(--font-weight-semibold)}._date-range-picker__day--selected_18hzd_225{background-color:var(--button-bg);color:var(--button-color)}._date-range-picker__day--selected_18hzd_225:hover{background-color:var(--button-bg);opacity:.92}._date-range-picker--disabled_18hzd_21{pointer-events:none}
+._date-range-picker_212m8_2{--date-range-picker-day-size: calc(var(--icon-size-32) + var(--spacing-xxxs));display:flex;flex-direction:column;position:relative;width:100%}._date-range-picker__trigger_212m8_9{display:flex;align-items:center;gap:var(--spacing-s);padding:var(--spacing-s) var(--spacing-l);background-color:var(--center-channel-bg);border-radius:var(--radius-s);box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.16);cursor:pointer;-webkit-user-select:none;user-select:none;transition:box-shadow var(--duration-quick) var(--ease-transition)}._date-range-picker_212m8_2:not(._date-range-picker--disabled_212m8_21):not(._date-range-picker--open_212m8_21):not(:focus-within) ._date-range-picker__trigger_212m8_9:hover{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._date-range-picker_212m8_2:focus-within ._date-range-picker__trigger_212m8_9,._date-range-picker--open_212m8_21 ._date-range-picker__trigger_212m8_9{outline:none;box-shadow:inset 0 0 0 1px var(--focus-ring-color),0 0 0 1px var(--focus-ring-color)}._date-range-picker__trigger_212m8_9:focus{outline:none}._date-range-picker__trigger_212m8_9:focus-visible{outline:none}._date-range-picker--disabled_212m8_21 ._date-range-picker__trigger_212m8_9{opacity:.56;cursor:not-allowed}._date-range-picker__calendar-icon_212m8_38{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._date-range-picker__calendar-icon_212m8_38 svg{display:block;width:var(--icon-size-16);height:var(--icon-size-16)}._date-range-picker__value_212m8_50{flex:1 1 0;min-width:0;align-self:stretch;display:flex;align-items:center;font-family:var(--font-family-body);font-size:var(--font-size-100);line-height:var(--line-height-100);font-weight:var(--font-weight-regular);color:var(--center-channel-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._date-range-picker__trigger_212m8_9:not([data-has-value]) ._date-range-picker__value_212m8_50{color:rgba(var(--center-channel-color-rgb),.64)}._date-range-picker__chevron_212m8_68{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64);transition:transform var(--duration-quick) var(--ease-transition)}._date-range-picker__chevron_212m8_68 svg{display:block;width:var(--icon-size-16);height:var(--icon-size-16)}._date-range-picker--open_212m8_21 ._date-range-picker__chevron_212m8_68{transform:rotate(180deg)}._date-range-picker__popover_212m8_84{--date-range-picker-day-size: calc( var(--icon-size-32) + var(--spacing-xxxs) );width:340px;padding:var(--spacing-l);background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-s);box-shadow:var(--elevation-4);display:flex;flex-direction:column;gap:var(--spacing-xs);opacity:0;transform:scale(.9);transform-origin:top left;transition:opacity var(--duration-quick) var(--ease-exit),transform var(--duration-quick) var(--ease-exit);pointer-events:none}._date-range-picker__popover--above_212m8_103{transform-origin:bottom left}._date-range-picker__popover--visible_212m8_106{opacity:1;transform:scale(1);pointer-events:auto;transition:opacity var(--duration-quick) var(--ease-entrance),transform var(--duration-quick) var(--ease-entrance)}._date-range-picker__header_212m8_112{display:flex;align-items:center;justify-content:space-between;padding-left:var(--spacing-xs)}._date-range-picker__month-label_212m8_118{font-family:var(--font-family-heading);font-size:var(--font-size-200);line-height:var(--line-height-200);font-weight:var(--font-weight-semibold);color:var(--center-channel-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}._date-range-picker__header-actions_212m8_129{display:flex;align-items:center;gap:var(--spacing-xxxs);flex-shrink:0}._date-range-picker__nav-buttons_212m8_135{display:flex;align-items:center}._date-range-picker__weekdays_212m8_139{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:center;padding:0}._date-range-picker__weekday_212m8_139{display:flex;align-items:center;justify-content:center;width:100%;font-family:var(--font-family-body);font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-semibold);color:rgba(var(--center-channel-color-rgb),.72);text-transform:uppercase;letter-spacing:.24px;text-align:center}._date-range-picker__grid_212m8_159{display:flex;flex-direction:column;gap:0}._date-range-picker__week_212m8_139{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:stretch}._date-range-picker__day-empty_212m8_169{display:block;height:var(--date-range-picker-day-size)}._date-range-picker__day-cell_212m8_173{display:flex;align-items:center;justify-content:center;height:var(--date-range-picker-day-size);min-width:0;position:relative;z-index:0}._date-range-picker__day-cell--in-range_212m8_182:before,._date-range-picker__day-cell--range-start_212m8_182:before,._date-range-picker__day-cell--range-end_212m8_182:before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;z-index:-1;pointer-events:none}._date-range-picker__day-cell--in-range_212m8_182{background-color:rgba(var(--button-bg-rgb),.12)}._date-range-picker__day-cell--in-range_212m8_182:before{background-color:rgba(var(--button-bg-rgb),.12)}._date-range-picker__day-cell--range-start_212m8_182{background:linear-gradient(to right,transparent 50%,rgba(var(--button-bg-rgb),.12) 50%)}._date-range-picker__day-cell--range-start_212m8_182:before{background:linear-gradient(to right,transparent 50%,rgba(var(--button-bg-rgb),.12) 50%)}._date-range-picker__day-cell--range-end_212m8_182{background:linear-gradient(to left,transparent 50%,rgba(var(--button-bg-rgb),.12) 50%)}._date-range-picker__day-cell--range-end_212m8_182:before{background:linear-gradient(to left,transparent 50%,rgba(var(--button-bg-rgb),.12) 50%)}._date-range-picker__day_212m8_169{display:flex;align-items:center;justify-content:center;width:var(--date-range-picker-day-size);height:var(--date-range-picker-day-size);flex-shrink:0;background:transparent;border:0;border-radius:var(--radius-pill);font-family:var(--font-family-body);font-size:var(--font-size-100);line-height:var(--line-height-100);font-weight:var(--font-weight-semibold);color:var(--center-channel-color);cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._date-range-picker__day_212m8_169:hover:not(._date-range-picker__day--selected_212m8_225){background-color:rgba(var(--center-channel-color-rgb),.08)}._date-range-picker__day_212m8_169:focus{outline:none}._date-range-picker__day_212m8_169:focus-visible:not(._date-range-picker__day--selected_212m8_225){background-color:rgba(var(--center-channel-color-rgb),.08);box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._date-range-picker__day--selected_212m8_225:focus-visible{box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._date-range-picker__day--today_212m8_238{color:var(--link-color);font-weight:var(--font-weight-semibold)}._date-range-picker__day--selected_212m8_225{background-color:var(--button-bg);color:var(--button-color)}._date-range-picker__day--selected_212m8_225:hover{background-color:var(--button-bg);opacity:.92}._date-range-picker--disabled_212m8_21{pointer-events:none}

package/dist/components/date-range-picker/DateRangePicker.d.ts

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes } from 'react';
+import { InputHTMLAttributes, ReactNode } from 'react';
 export type DateRangePickerMode = 'date' | 'range';
 export interface DateRangePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'type' | 'size'> {
     /** Optional CSS class name applied to the root element. */
@@ -19,10 +19,26 @@ export interface DateRangePickerProps extends Omit<InputHTMLAttributes<HTMLInput
     portalContainer?: HTMLElement | null;
     /** Stacking order for the portaled calendar. */
     zIndex?: number;
+    /** Trigger text when no date is selected. Default: "mm/dd/yyyy". */
+    placeholder?: string;
+    /** Formats an ISO `yyyy-mm-dd` date for the trigger. Default: `mm/dd/yyyy`. */
+    formatDate?: (iso: string) => string;
+    /** Twelve month names, January first. Default: English. */
+    monthNames?: string[];
+    /** Seven short weekday names, Sunday first. Default: "Su" … "Sa". */
+    weekdayNames?: string[];
+    /** Accessible name for the calendar dialog. Default: "Date picker". */
+    dialogLabel?: string;
+    /** Today button text. Default: "Today". */
+    todayLabel?: ReactNode;
+    /** Accessible name for the previous-month button. Default: "Previous month". */
+    previousMonthLabel?: string;
+    /** Accessible name for the next-month button. Default: "Next month". */
+    nextMonthLabel?: string;
 }
 /**
  * The Date and Range Picker lets people pick a single date or a start/end range from a
  * calendar. The trigger is a compact field; the calendar is a popover anchored 4px below it.
  */
-export default function DateRangePicker({ className, mode, value, startDate, endDate, onChange, onRangeChange, disabled, id: idProp, portalContainer, zIndex, }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;
+export default function DateRangePicker({ className, mode, value, startDate, endDate, onChange, onRangeChange, disabled, id: idProp, portalContainer, zIndex, placeholder, formatDate, monthNames, weekdayNames, dialogLabel, todayLabel, previousMonthLabel, nextMonthLabel, }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DateRangePicker.d.ts.map

package/dist/components/date-range-picker/DateRangePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/components/date-range-picker/DateRangePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAiB,MAAM,OAAO,CAAC;AAgBhE,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnD,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CACxD;IACC,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,8CAA8C;IAC9C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,uEAAuE;IACvE,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC,gDAAgD;IAChD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAyDD;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,SAAc,EACd,IAAa,EACb,KAAK,EACL,SAAS,EACT,OAAO,EACP,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,eAAsB,EACtB,MAAM,GACP,EAAE,oBAAoB,2CAmkBtB"}
+{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/components/date-range-picker/DateRangePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAgB3E,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnD,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CACxD;IACC,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,8CAA8C;IAC9C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,uEAAuE;IACvE,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC,gDAAgD;IAChD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+EAA+E;IAC/E,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,2DAA2D;IAC3D,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,qEAAqE;IACrE,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,uEAAuE;IACvE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,wEAAwE;IACxE,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAyDD;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,SAAc,EACd,IAAa,EACb,KAAK,EACL,SAAS,EACT,OAAO,EACP,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,eAAsB,EACtB,MAAM,EACN,WAA0B,EAC1B,UAA8B,EAC9B,UAAmB,EACnB,YAAuB,EACvB,WAA2B,EAC3B,UAAoB,EACpB,kBAAqC,EACrC,cAA6B,GAC9B,EAAE,oBAAoB,2CAqkBtB"}

package/dist/components/date-range-picker/DateRangePicker.js

@@ -1,17 +1,17 @@
 import { jsxs as _, jsx as s } from "react/jsx-runtime";
-import { useId as Pe, useRef as U, useState as b, useCallback as m, useEffect as $ } from "react";
-import ze from "../button/Button.js";
-import le, { ICON_BUTTON_ICON_SIZES as ue } from "../icon-button/IconButton.js";
+import { useId as qe, useRef as G, useState as b, useCallback as m, useEffect as $ } from "react";
+import He from "../button/Button.js";
+import ue, { ICON_BUTTON_ICON_SIZES as de } from "../icon-button/IconButton.js";
 import F from "../icon/Icon.js";
-import __de from "@mattermost/compass-icons/components/calendar-outline.js";const de=__de&&__de.default?__de.default:__de;
-import __je from "@mattermost/compass-icons/components/chevron-down.js";const je=__je&&__je.default?__je.default:__je;
-import __Le from "@mattermost/compass-icons/components/chevron-left.js";const Le=__Le&&__Le.default?__Le.default:__Le;
-import __Ye from "@mattermost/compass-icons/components/chevron-right.js";const Ye=__Ye&&__Ye.default?__Ye.default:__Ye;
-import { useAnchoredPopupPortal as Ke } from "../../hooks/use-anchored-popup-portal.js";
-import { useOutsideClose as qe } from "../../hooks/use-outside-close.js";
-import { usePopoverTransition as He } from "../../hooks/use-popover-transition.js";
+import __pe from "@mattermost/compass-icons/components/calendar-outline.js";const pe=__pe&&__pe.default?__pe.default:__pe;
+import __Ve from "@mattermost/compass-icons/components/chevron-down.js";const Ve=__Ve&&__Ve.default?__Ve.default:__Ve;
+import __We from "@mattermost/compass-icons/components/chevron-left.js";const We=__We&&__We.default?__We.default:__We;
+import __Je from "@mattermost/compass-icons/components/chevron-right.js";const Je=__Je&&__Je.default?__Je.default:__Je;
+import { useAnchoredPopupPortal as Ue } from "../../hooks/use-anchored-popup-portal.js";
+import { useOutsideClose as Ge } from "../../hooks/use-outside-close.js";
+import { usePopoverTransition as Ze } from "../../hooks/use-popover-transition.js";
 import a from "./DateRangePicker.module.scss.js";
-const Ve = 360, We = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], pe = [
+const Qe = 360, Xe = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], et = [
   "January",
   "February",
   "March",
@@ -25,7 +25,7 @@ const Ve = 360, We = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], pe = [
   "November",
   "December"
 ];
-function G(c) {
+function tt(c) {
   if (!c) return "";
   const [r, p, k] = c.split("-");
   return `${p}/${k}/${r}`;
@@ -36,54 +36,62 @@ function Z(c, r, p) {
 function Q(c, r) {
   return new Date(c, r + 1, 0).getDate();
 }
-function Je(c, r) {
+function rt(c, r) {
   return new Date(c, r, 1).getDay();
 }
 function X(c, r) {
   return c === r;
 }
-function Ue(c, r, p) {
+function nt(c, r, p) {
   if (!r || !p) return !1;
-  const [k, N] = r < p ? [r, p] : [p, r];
-  return c > k && c < N;
+  const [k, E] = r < p ? [r, p] : [p, r];
+  return c > k && c < E;
 }
 function x(c, r, p) {
   if (!c) return null;
-  const [k, N, E] = c.split("-").map(Number);
-  return k === r && N === p + 1 ? E : null;
+  const [k, E, S] = c.split("-").map(Number);
+  return k === r && E === p + 1 ? S : null;
 }
-function lt({
+function yt({
   className: c = "",
   mode: r = "date",
   value: p,
   startDate: k,
-  endDate: N,
-  onChange: E,
+  endDate: E,
+  onChange: S,
   onRangeChange: O,
   disabled: D,
   id: fe,
   portalContainer: me = null,
-  zIndex: ge
+  zIndex: ge,
+  placeholder: he = "mm/dd/yyyy",
+  formatDate: P = tt,
+  monthNames: ee = et,
+  weekdayNames: ye = Xe,
+  dialogLabel: ve = "Date picker",
+  todayLabel: ke = "Today",
+  previousMonthLabel: De = "Previous month",
+  nextMonthLabel: _e = "Next month"
 }) {
-  const he = Pe(), ee = fe ?? he, te = `${ee}-popover`, P = U(null), z = U(null), j = U(null), S = /* @__PURE__ */ new Date(), L = Z(
-    S.getFullYear(),
-    S.getMonth(),
-    S.getDate()
-  ), [i, B] = b(S.getFullYear()), [o, C] = b(S.getMonth()), [l, Y] = b(!1), [K, w] = b(1), [ye, ve] = b(""), [ke, re] = b(""), [De, ne] = b(""), M = p ?? ye, u = k ?? ke, g = N ?? De, _e = r === "date" ? !!M : !!u, { mounted: q, visible: H } = He(l), {
-    placement: be,
-    style: we,
+  const be = qe(), te = fe ?? be, re = `${te}-popover`, z = G(null), j = G(null), L = G(null), M = /* @__PURE__ */ new Date(), Y = Z(
+    M.getFullYear(),
+    M.getMonth(),
+    M.getDate()
+  ), [i, B] = b(M.getFullYear()), [o, C] = b(M.getMonth()), [l, K] = b(!1), [q, w] = b(1), [we, Ie] = b(""), [Ne, ne] = b(""), [Ee, ae] = b(""), I = p ?? we, u = k ?? Ne, g = E ?? Ee, Se = r === "date" ? !!I : !!u, { mounted: H, visible: V } = Ze(l), {
+    placement: Me,
+    style: Ae,
     portalRef: R,
-    renderPortal: Ie
-  } = Ke(z, q, {
-    preferredHeight: Ve,
+    renderPortal: Fe
+  } = Ue(j, H, {
+    preferredHeight: Qe,
     portalContainer: me,
     zIndex: ge,
     matchWidth: !1
   }), h = m((e = !0) => {
     var t;
-    Y(!1), e && ((t = z.current) == null || t.focus());
+    K(!1), e && ((t = j.current) == null || t.focus());
   }, []);
-  qe(P, l, () => h(!0), R), $(() => {
+  Ge(z, l, () => h(!0), R), $(() => {
     if (!l) return;
     function e(t) {
       t.key === "Escape" && (t.preventDefault(), h(!0));
@@ -94,13 +102,13 @@ function lt({
     function e(t) {
       var d, f;
       const n = t.target;
-      n && ((d = P.current) != null && d.contains(n) || (f = R.current) != null && f.contains(n) || h(!1));
+      n && ((d = z.current) != null && d.contains(n) || (f = R.current) != null && f.contains(n) || h(!1));
     }
     return document.addEventListener("focusin", e), () => document.removeEventListener("focusin", e);
   }, [l, h, R]);
-  const v = Q(i, o), Ne = m(() => {
+  const v = Q(i, o), Be = m(() => {
     if (r === "date") {
-      const t = x(M, i, o);
+      const t = x(I, i, o);
       if (t) return t;
     } else {
       const t = x(g, i, o);
@@ -108,83 +116,83 @@ function lt({
       const n = x(u, i, o);
       if (n) return n;
     }
-    const e = x(L, i, o);
+    const e = x(Y, i, o);
     return e || 1;
   }, [
     r,
-    M,
+    I,
     u,
     g,
     i,
     o,
-    L
+    Y
   ]);
   $(() => {
-    if (!l || !H) return;
-    const e = Ne();
+    if (!l || !V) return;
+    const e = Be();
     w(e);
     const t = requestAnimationFrame(() => {
       var n, d;
-      (d = (n = j.current) == null ? void 0 : n.querySelector(`[data-day="${e}"]`)) == null || d.focus();
+      (d = (n = L.current) == null ? void 0 : n.querySelector(`[data-day="${e}"]`)) == null || d.focus();
     });
     return () => cancelAnimationFrame(t);
-  }, [l, H]);
+  }, [l, V]);
   const y = m((e) => {
     w(e), requestAnimationFrame(() => {
       var t, n;
-      (n = (t = j.current) == null ? void 0 : t.querySelector(`[data-day="${e}"]`)) == null || n.focus();
+      (n = (t = L.current) == null ? void 0 : t.querySelector(`[data-day="${e}"]`)) == null || n.focus();
     });
-  }, []), V = m(() => {
-    D || Y((e) => !e);
-  }, [D]), Ee = m(() => {
+  }, []), W = m(() => {
+    D || K((e) => !e);
+  }, [D]), Ce = m(() => {
     C((e) => e === 0 ? (B((t) => t - 1), 11) : e - 1);
-  }, []), Se = m(() => {
+  }, []), Re = m(() => {
     C((e) => e === 11 ? (B((t) => t + 1), 0) : e + 1);
-  }, []), I = m(
+  }, []), N = m(
     (e, t) => {
       const n = e === -1 ? o === 0 ? 11 : o - 1 : o === 11 ? 0 : o + 1, d = e === -1 ? o === 0 ? i - 1 : i : o === 11 ? i + 1 : i, f = Q(d, n);
       B(d), C(n), y(Math.min(t, f));
     },
     [o, i, y]
-  ), Me = m(() => {
+  ), Te = m(() => {
     const e = /* @__PURE__ */ new Date();
     B(e.getFullYear()), C(e.getMonth()), y(e.getDate());
-  }, [y]), W = m(
+  }, [y]), J = m(
     (e, t) => {
       if (r === "date")
-        E ? E(e) : ve(e), h(!0);
+        S ? S(e) : Ie(e), h(!0);
       else if (!u || u && g)
-        re(e), ne(""), w(t);
+        ne(e), ae(""), w(t);
       else {
         const [n, d] = e >= u ? [u, e] : [e, u];
-        O ? O(n, d) : (re(n), ne(d)), h(!0);
+        O ? O(n, d) : (ne(n), ae(d)), h(!0);
       }
     },
-    [r, u, g, E, O, h]
+    [r, u, g, S, O, h]
   ), A = m(
     (e) => {
-      const t = K + e;
+      const t = q + e;
       if (t >= 1 && t <= v) {
         y(t);
         return;
       }
-      t < 1 ? I(
+      t < 1 ? N(
         -1,
         Q(
           o === 0 ? i - 1 : i,
           o === 0 ? 11 : o - 1
         ) + t
-      ) : I(1, t - v);
+      ) : N(1, t - v);
     },
     [
-      K,
+      q,
       v,
       o,
       i,
       y,
-      I
+      N
     ]
-  ), Ae = m(
+  ), $e = m(
     (e, t) => {
       switch (e.key) {
         case "ArrowLeft":
@@ -206,14 +214,14 @@ function lt({
           e.preventDefault(), y(v);
           break;
         case "PageUp":
-          e.preventDefault(), I(-1, t);
+          e.preventDefault(), N(-1, t);
           break;
         case "PageDown":
-          e.preventDefault(), I(1, t);
+          e.preventDefault(), N(1, t);
           break;
         case "Enter":
         case " ":
-          e.preventDefault(), w(t), W(Z(i, o, t), t);
+          e.preventDefault(), w(t), J(Z(i, o, t), t);
           break;
       }
     },
@@ -221,90 +229,90 @@ function lt({
       A,
       y,
       v,
-      I,
-      W,
+      N,
+      J,
       i,
       o
     ]
-  ), Fe = m(
+  ), xe = m(
     (e) => {
       if (!D)
         switch (e.key) {
           case "Enter":
           case " ":
-            e.preventDefault(), V();
+            e.preventDefault(), W();
             break;
           case "ArrowDown":
-            l || (e.preventDefault(), Y(!0));
+            l || (e.preventDefault(), K(!0));
             break;
           case "Escape":
             l && (e.preventDefault(), h(!0));
             break;
         }
     },
-    [D, V, l, h]
+    [D, W, l, h]
   );
   $(() => {
     l && w((e) => Math.min(Math.max(1, e), v));
   }, [l, v, o, i]);
-  const Be = Je(i, o), T = [
-    ...Array(Be).fill(null),
+  const Oe = rt(i, o), T = [
+    ...Array(Oe).fill(null),
     ...Array.from({ length: v }, (e, t) => t + 1)
   ];
   for (; T.length % 7 !== 0; ) T.push(null);
-  const ae = [];
-  for (let e = 0; e < T.length; e += 7) ae.push(T.slice(e, e + 7));
-  const Ce = r === "date" ? G(M) : u ? `${G(u)}${g ? ` – ${G(g)}` : ""}` : "", Re = [
+  const oe = [];
+  for (let e = 0; e < T.length; e += 7) oe.push(T.slice(e, e + 7));
+  const Pe = r === "date" ? I ? P(I) : "" : u ? `${P(u)}${g ? ` – ${P(g)}` : ""}` : "", ze = [
     a["date-range-picker"],
     l ? a["date-range-picker--open"] : "",
     D ? a["date-range-picker--disabled"] : "",
     c
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("div", { ref: P, className: Re, children: [
+  return /* @__PURE__ */ _("div", { ref: z, className: ze, children: [
     /* @__PURE__ */ _(
       "div",
       {
-        ref: z,
+        ref: j,
         className: a["date-range-picker__trigger"],
         role: "button",
         "aria-haspopup": "dialog",
         "aria-expanded": l,
-        "aria-controls": q ? te : void 0,
+        "aria-controls": H ? re : void 0,
         "aria-disabled": D || void 0,
         tabIndex: D ? -1 : 0,
-        id: ee,
-        "data-has-value": _e ? "" : void 0,
-        onClick: V,
-        onKeyDown: Fe,
+        id: te,
+        "data-has-value": Se ? "" : void 0,
+        onClick: W,
+        onKeyDown: xe,
         children: [
           /* @__PURE__ */ s(
             "span",
             {
               className: a["date-range-picker__calendar-icon"],
               "aria-hidden": !0,
-              children: /* @__PURE__ */ s(F, { size: "16", glyph: /* @__PURE__ */ s(de, {}) })
+              children: /* @__PURE__ */ s(F, { size: "16", glyph: /* @__PURE__ */ s(pe, {}) })
             }
           ),
-          /* @__PURE__ */ s("span", { className: a["date-range-picker__value"], children: Ce || "mm/dd/yyyy" }),
-          /* @__PURE__ */ s("span", { className: a["date-range-picker__chevron"], "aria-hidden": !0, children: /* @__PURE__ */ s(F, { size: "16", glyph: /* @__PURE__ */ s(je, {}) }) })
+          /* @__PURE__ */ s("span", { className: a["date-range-picker__value"], children: Pe || he }),
+          /* @__PURE__ */ s("span", { className: a["date-range-picker__chevron"], "aria-hidden": !0, children: /* @__PURE__ */ s(F, { size: "16", glyph: /* @__PURE__ */ s(Ve, {}) }) })
         ]
       }
     ),
-    q && Ie(
+    H && Fe(
       /* @__PURE__ */ _(
         "div",
         {
           ref: R,
-          id: te,
+          id: re,
           className: [
             a["date-range-picker__popover"],
-            be === "above" ? a["date-range-picker__popover--above"] : "",
-            H ? a["date-range-picker__popover--visible"] : ""
+            Me === "above" ? a["date-range-picker__popover--above"] : "",
+            V ? a["date-range-picker__popover--visible"] : ""
           ].filter(Boolean).join(" "),
-          style: we,
+          style: Ae,
           role: "dialog",
           "aria-modal": "false",
-          "aria-label": "Date picker",
+          "aria-label": ve,
           children: [
             /* @__PURE__ */ _("div", { className: a["date-range-picker__header"], children: [
               /* @__PURE__ */ _(
@@ -313,7 +321,7 @@ function lt({
                   className: a["date-range-picker__month-label"],
                   "aria-live": "polite",
                   children: [
-                    pe[o],
+                    ee[o],
                     " ",
                     i
                   ]
@@ -321,60 +329,60 @@ function lt({
               ),
               /* @__PURE__ */ _("div", { className: a["date-range-picker__header-actions"], children: [
                 /* @__PURE__ */ s(
-                  ze,
+                  He,
                   {
                     emphasis: "quaternary",
                     size: "small",
-                    leadingIcon: /* @__PURE__ */ s(F, { size: "16", glyph: /* @__PURE__ */ s(de, {}) }),
-                    onClick: Me,
-                    children: "Today"
+                    leadingIcon: /* @__PURE__ */ s(F, { size: "16", glyph: /* @__PURE__ */ s(pe, {}) }),
+                    onClick: Te,
+                    children: ke
                   }
                 ),
                 /* @__PURE__ */ _("div", { className: a["date-range-picker__nav-buttons"], children: [
                   /* @__PURE__ */ s(
-                    le,
+                    ue,
                     {
                       size: "medium",
                       padding: "compact",
                       icon: /* @__PURE__ */ s(
                         F,
                         {
-                          size: ue.medium,
-                          glyph: /* @__PURE__ */ s(Le, {})
+                          size: de.medium,
+                          glyph: /* @__PURE__ */ s(We, {})
                         }
                       ),
-                      onClick: Ee,
-                      "aria-label": "Previous month"
+                      onClick: Ce,
+                      "aria-label": De
                     }
                   ),
                   /* @__PURE__ */ s(
-                    le,
+                    ue,
                     {
                       size: "medium",
                       padding: "compact",
                       icon: /* @__PURE__ */ s(
                         F,
                         {
-                          size: ue.medium,
-                          glyph: /* @__PURE__ */ s(Ye, {})
+                          size: de.medium,
+                          glyph: /* @__PURE__ */ s(Je, {})
                         }
                       ),
-                      onClick: Se,
-                      "aria-label": "Next month"
+                      onClick: Re,
+                      "aria-label": _e
                     }
                   )
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ s("div", { className: a["date-range-picker__weekdays"], "aria-hidden": !0, children: We.map((e) => /* @__PURE__ */ s("span", { className: a["date-range-picker__weekday"], children: e }, e)) }),
+            /* @__PURE__ */ s("div", { className: a["date-range-picker__weekdays"], "aria-hidden": !0, children: ye.map((e, t) => /* @__PURE__ */ s("span", { className: a["date-range-picker__weekday"], children: e }, t)) }),
             /* @__PURE__ */ s(
               "div",
               {
-                ref: j,
+                ref: L,
                 className: a["date-range-picker__grid"],
                 role: "grid",
-                "aria-label": `${pe[o]} ${i}`,
-                children: ae.map((e, t) => /* @__PURE__ */ s(
+                "aria-label": `${ee[o]} ${i}`,
+                children: oe.map((e, t) => /* @__PURE__ */ s(
                   "div",
                   {
                     className: a["date-range-picker__week"],
@@ -389,29 +397,29 @@ function lt({
                           },
                           d
                         );
-                      const f = Z(i, o, n), oe = f === L, se = r === "range" && X(f, u), ie = r === "range" && !!g && X(f, g), J = r === "date" ? X(f, M) : se || ie, Te = r === "range" && Ue(f, u, g), ce = r === "range" && !!u && !!g && u !== g, $e = [
+                      const f = Z(i, o, n), se = f === Y, ie = r === "range" && X(f, u), ce = r === "range" && !!g && X(f, g), U = r === "date" ? X(f, I) : ie || ce, je = r === "range" && nt(f, u, g), le = r === "range" && !!u && !!g && u !== g, Le = [
                         a["date-range-picker__day-cell"],
-                        Te ? a["date-range-picker__day-cell--in-range"] : "",
-                        ce && se ? a["date-range-picker__day-cell--range-start"] : "",
-                        ce && ie ? a["date-range-picker__day-cell--range-end"] : ""
-                      ].filter(Boolean).join(" "), xe = [
+                        je ? a["date-range-picker__day-cell--in-range"] : "",
+                        le && ie ? a["date-range-picker__day-cell--range-start"] : "",
+                        le && ce ? a["date-range-picker__day-cell--range-end"] : ""
+                      ].filter(Boolean).join(" "), Ye = [
                         a["date-range-picker__day"],
-                        J ? a["date-range-picker__day--selected"] : "",
-                        oe && !J ? a["date-range-picker__day--today"] : ""
+                        U ? a["date-range-picker__day--selected"] : "",
+                        se && !U ? a["date-range-picker__day--today"] : ""
                       ].filter(Boolean).join(" ");
-                      return /* @__PURE__ */ s("div", { className: $e, role: "gridcell", children: /* @__PURE__ */ s(
+                      return /* @__PURE__ */ s("div", { className: Le, role: "gridcell", children: /* @__PURE__ */ s(
                         "button",
                         {
                           type: "button",
-                          className: xe,
+                          className: Ye,
                           "data-day": n,
-                          tabIndex: K === n ? 0 : -1,
-                          onClick: () => W(f, n),
+                          tabIndex: q === n ? 0 : -1,
+                          onClick: () => J(f, n),
                           onFocus: () => w(n),
-                          onKeyDown: (Oe) => Ae(Oe, n),
+                          onKeyDown: (Ke) => $e(Ke, n),
                           "aria-label": f,
-                          "aria-pressed": J,
-                          "aria-current": oe ? "date" : void 0,
+                          "aria-pressed": U,
+                          "aria-current": se ? "date" : void 0,
                           children: n
                         }
                       ) }, d);
@@ -428,6 +436,6 @@ function lt({
   ] });
 }
 export {
-  lt as default
+  yt as default
 };
 //# sourceMappingURL=DateRangePicker.js.map