@jirawatpyk/aura-react 4.17.0 → 4.18.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.
Files changed (6) hide show
  1. package/dist/aura.bundle.js +11 -9
  2. package/dist/cjs/index.cjs +11 -9
  3. package/dist/esm/Command.js +11 -9
  4. package/dist/styles.css +5 -2
  5. package/dist/styles.layer.css +5 -2
  6. package/package.json +1 -1
package/dist/aura.bundle.js CHANGED
@@ -2901,8 +2901,8 @@ window.Aura = (() => {
2901
2901
  "data-autofocus": "",
2902
2902
  type: "text",
2903
2903
  role: "combobox",
2904
- "aria-expanded": true,
2905
- "aria-controls": listId,
2904
+ "aria-expanded": flat.length > 0,
2905
+ "aria-controls": flat.length ? listId : void 0,
2906
2906
  "aria-autocomplete": "list",
2907
2907
  "aria-activedescendant": active >= 0 ? optId(active) : void 0,
2908
2908
  "aria-label": props.label || t.commandMenu,
@@ -2918,17 +2918,15 @@ window.Aura = (() => {
2918
2918
  onKeyDown: onKey
2919
2919
  }
2920
2920
  ), /* @__PURE__ */ React25.createElement("kbd", { className: "aura-command__kbd" }, "Esc")),
2921
- /* @__PURE__ */ React25.createElement(
2921
+ /* @__PURE__ */ React25.createElement("div", { className: "aura-command__list", "aria-busy": props.loading || void 0 }, props.loading ? /* @__PURE__ */ React25.createElement("div", { className: "aura-command__loading" }, /* @__PURE__ */ React25.createElement(Icon, { name: "loader-circle", className: "aura-spin" }), t.searching) : null, !flat.length ? props.loading ? null : /* @__PURE__ */ React25.createElement("div", { className: "aura-command__empty" }, props.empty != null ? props.empty : props.emptyText || t.noMatches) : /* @__PURE__ */ React25.createElement(
2922
2922
  "div",
2923
2923
  {
2924
- className: "aura-command__list",
2925
2924
  id: listId,
2926
2925
  role: "listbox",
2927
2926
  "aria-label": props.label || t.commandMenu,
2928
2927
  "aria-busy": props.loading || void 0
2929
2928
  },
2930
- props.loading ? /* @__PURE__ */ React25.createElement("div", { className: "aura-command__loading", role: "presentation" }, /* @__PURE__ */ React25.createElement(Icon, { name: "loader-circle", className: "aura-spin" }), t.searching) : null,
2931
- !flat.length ? props.loading ? null : /* @__PURE__ */ React25.createElement("div", { className: "aura-command__empty", role: "presentation" }, props.empty != null ? props.empty : props.emptyText || t.noMatches) : groups.map(function(g, gi) {
2929
+ groups.map(function(g, gi) {
2932
2930
  const gid = id + "-g" + gi;
2933
2931
  return /* @__PURE__ */ React25.createElement(
2934
2932
  "div",
@@ -2950,7 +2948,11 @@ window.Aura = (() => {
2950
2948
  role: "option",
2951
2949
  "aria-selected": n2 === active,
2952
2950
  "aria-disabled": it.disabled || void 0,
2953
- className: cx("aura-command__item", n2 === active && "is-active", it.disabled && "is-disabled"),
2951
+ className: cx(
2952
+ "aura-command__item",
2953
+ n2 === active && "is-active",
2954
+ it.disabled && "is-disabled"
2955
+ ),
2954
2956
  onPointerDown: function(e) {
2955
2957
  e.preventDefault();
2956
2958
  },
@@ -2968,8 +2970,8 @@ window.Aura = (() => {
2968
2970
  })
2969
2971
  );
2970
2972
  })
2971
- ),
2972
- /* @__PURE__ */ React25.createElement("span", { className: "aura-sr-only", role: "status" }, props.loading ? t.searching : props.loading === false && query ? t.results(flat.length) : ""),
2973
+ )),
2974
+ /* @__PURE__ */ React25.createElement("span", { className: "aura-sr-only", role: "status" }, props.loading ? t.searching : query && !flat.length ? t.noMatches : props.loading === false && query ? t.results(flat.length) : ""),
2973
2975
  /* @__PURE__ */ React25.createElement("div", { className: "aura-command__foot", "aria-hidden": true }, t.commandHint, /* @__PURE__ */ React25.createElement("span", { className: "aura-command__mod" }, isMac() ? "\u2318K" : "Ctrl K"))
2974
2976
  )
2975
2977
  ),
package/dist/cjs/index.cjs CHANGED
@@ -2883,8 +2883,8 @@ function Command(props) {
2883
2883
  "data-autofocus": "",
2884
2884
  type: "text",
2885
2885
  role: "combobox",
2886
- "aria-expanded": true,
2887
- "aria-controls": listId,
2886
+ "aria-expanded": flat.length > 0,
2887
+ "aria-controls": flat.length ? listId : void 0,
2888
2888
  "aria-autocomplete": "list",
2889
2889
  "aria-activedescendant": active >= 0 ? optId(active) : void 0,
2890
2890
  "aria-label": props.label || t.commandMenu,
@@ -2900,17 +2900,15 @@ function Command(props) {
2900
2900
  onKeyDown: onKey
2901
2901
  }
2902
2902
  ), /* @__PURE__ */ React25.createElement("kbd", { className: "aura-command__kbd" }, "Esc")),
2903
- /* @__PURE__ */ React25.createElement(
2903
+ /* @__PURE__ */ React25.createElement("div", { className: "aura-command__list", "aria-busy": props.loading || void 0 }, props.loading ? /* @__PURE__ */ React25.createElement("div", { className: "aura-command__loading" }, /* @__PURE__ */ React25.createElement(Icon, { name: "loader-circle", className: "aura-spin" }), t.searching) : null, !flat.length ? props.loading ? null : /* @__PURE__ */ React25.createElement("div", { className: "aura-command__empty" }, props.empty != null ? props.empty : props.emptyText || t.noMatches) : /* @__PURE__ */ React25.createElement(
2904
2904
  "div",
2905
2905
  {
2906
- className: "aura-command__list",
2907
2906
  id: listId,
2908
2907
  role: "listbox",
2909
2908
  "aria-label": props.label || t.commandMenu,
2910
2909
  "aria-busy": props.loading || void 0
2911
2910
  },
2912
- props.loading ? /* @__PURE__ */ React25.createElement("div", { className: "aura-command__loading", role: "presentation" }, /* @__PURE__ */ React25.createElement(Icon, { name: "loader-circle", className: "aura-spin" }), t.searching) : null,
2913
- !flat.length ? props.loading ? null : /* @__PURE__ */ React25.createElement("div", { className: "aura-command__empty", role: "presentation" }, props.empty != null ? props.empty : props.emptyText || t.noMatches) : groups.map(function(g, gi) {
2911
+ groups.map(function(g, gi) {
2914
2912
  const gid = id + "-g" + gi;
2915
2913
  return /* @__PURE__ */ React25.createElement(
2916
2914
  "div",
@@ -2932,7 +2930,11 @@ function Command(props) {
2932
2930
  role: "option",
2933
2931
  "aria-selected": n2 === active,
2934
2932
  "aria-disabled": it.disabled || void 0,
2935
- className: cx("aura-command__item", n2 === active && "is-active", it.disabled && "is-disabled"),
2933
+ className: cx(
2934
+ "aura-command__item",
2935
+ n2 === active && "is-active",
2936
+ it.disabled && "is-disabled"
2937
+ ),
2936
2938
  onPointerDown: function(e) {
2937
2939
  e.preventDefault();
2938
2940
  },
@@ -2950,8 +2952,8 @@ function Command(props) {
2950
2952
  })
2951
2953
  );
2952
2954
  })
2953
- ),
2954
- /* @__PURE__ */ React25.createElement("span", { className: "aura-sr-only", role: "status" }, props.loading ? t.searching : props.loading === false && query ? t.results(flat.length) : ""),
2955
+ )),
2956
+ /* @__PURE__ */ React25.createElement("span", { className: "aura-sr-only", role: "status" }, props.loading ? t.searching : query && !flat.length ? t.noMatches : props.loading === false && query ? t.results(flat.length) : ""),
2955
2957
  /* @__PURE__ */ React25.createElement("div", { className: "aura-command__foot", "aria-hidden": true }, t.commandHint, /* @__PURE__ */ React25.createElement("span", { className: "aura-command__mod" }, isMac() ? "\u2318K" : "Ctrl K"))
2956
2958
  )
2957
2959
  ),
package/dist/esm/Command.js CHANGED
@@ -155,8 +155,8 @@ function Command(props) {
155
155
  "data-autofocus": "",
156
156
  type: "text",
157
157
  role: "combobox",
158
- "aria-expanded": true,
159
- "aria-controls": listId,
158
+ "aria-expanded": flat.length > 0,
159
+ "aria-controls": flat.length ? listId : void 0,
160
160
  "aria-autocomplete": "list",
161
161
  "aria-activedescendant": active >= 0 ? optId(active) : void 0,
162
162
  "aria-label": props.label || t.commandMenu,
@@ -172,17 +172,15 @@ function Command(props) {
172
172
  onKeyDown: onKey
173
173
  }
174
174
  ), /* @__PURE__ */ React.createElement("kbd", { className: "aura-command__kbd" }, "Esc")),
175
- /* @__PURE__ */ React.createElement(
175
+ /* @__PURE__ */ React.createElement("div", { className: "aura-command__list", "aria-busy": props.loading || void 0 }, props.loading ? /* @__PURE__ */ React.createElement("div", { className: "aura-command__loading" }, /* @__PURE__ */ React.createElement(Icon, { name: "loader-circle", className: "aura-spin" }), t.searching) : null, !flat.length ? props.loading ? null : /* @__PURE__ */ React.createElement("div", { className: "aura-command__empty" }, props.empty != null ? props.empty : props.emptyText || t.noMatches) : /* @__PURE__ */ React.createElement(
176
176
  "div",
177
177
  {
178
- className: "aura-command__list",
179
178
  id: listId,
180
179
  role: "listbox",
181
180
  "aria-label": props.label || t.commandMenu,
182
181
  "aria-busy": props.loading || void 0
183
182
  },
184
- props.loading ? /* @__PURE__ */ React.createElement("div", { className: "aura-command__loading", role: "presentation" }, /* @__PURE__ */ React.createElement(Icon, { name: "loader-circle", className: "aura-spin" }), t.searching) : null,
185
- !flat.length ? props.loading ? null : /* @__PURE__ */ React.createElement("div", { className: "aura-command__empty", role: "presentation" }, props.empty != null ? props.empty : props.emptyText || t.noMatches) : groups.map(function(g, gi) {
183
+ groups.map(function(g, gi) {
186
184
  const gid = id + "-g" + gi;
187
185
  return /* @__PURE__ */ React.createElement(
188
186
  "div",
@@ -204,7 +202,11 @@ function Command(props) {
204
202
  role: "option",
205
203
  "aria-selected": n === active,
206
204
  "aria-disabled": it.disabled || void 0,
207
- className: cx("aura-command__item", n === active && "is-active", it.disabled && "is-disabled"),
205
+ className: cx(
206
+ "aura-command__item",
207
+ n === active && "is-active",
208
+ it.disabled && "is-disabled"
209
+ ),
208
210
  onPointerDown: function(e) {
209
211
  e.preventDefault();
210
212
  },
@@ -222,8 +224,8 @@ function Command(props) {
222
224
  })
223
225
  );
224
226
  })
225
- ),
226
- /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only", role: "status" }, props.loading ? t.searching : props.loading === false && query ? t.results(flat.length) : ""),
227
+ )),
228
+ /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only", role: "status" }, props.loading ? t.searching : query && !flat.length ? t.noMatches : props.loading === false && query ? t.results(flat.length) : ""),
227
229
  /* @__PURE__ */ React.createElement("div", { className: "aura-command__foot", "aria-hidden": true }, t.commandHint, /* @__PURE__ */ React.createElement("span", { className: "aura-command__mod" }, isMac() ? "\u2318K" : "Ctrl K"))
228
230
  )
229
231
  ),
package/dist/styles.css CHANGED
@@ -693,7 +693,8 @@ a.aura-icon-btn { text-decoration: none; }
693
693
  .aura-combo__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
694
694
  .aura-combo__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
695
695
  .aura-combo__desc { font-size: 12px; line-height: 1.5; color: var(--aura-fg-secondary); }
696
- .aura-combo__check { color: var(--aura-fg-accent) !important; }
696
+ /* Same specificity as `.aura-combo__option > .aura-icon` above and later in the file, so it wins by order (4.18). */
697
+ .aura-combo__option > .aura-combo__check { color: var(--aura-fg-accent); }
697
698
  .aura-combo__note { display: flex; align-items: center; gap: var(--aura-space-2); padding: var(--aura-space-3) var(--aura-space-2); font-size: 13px; color: var(--aura-fg-secondary); }
698
699
 
699
700
  /* ---------- DatePicker / Calendar ---------- */
@@ -1174,7 +1175,9 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
1174
1175
  .aura-stepper--horizontal .aura-stepper__item:not(:last-child)::after { right: 8px; }
1175
1176
  .aura-stepper--horizontal .aura-stepper__compact { display: block; }
1176
1177
  .aura-dialog-layer:not(.aura-drawer-layer) { align-items: flex-end; padding: 0; }
1177
- .aura-dialog { max-width: none !important; max-height: 92vh; max-height: 92dvh; border-radius: var(--aura-radius-2xl) var(--aura-radius-2xl) 0 0; border-bottom: 0;
1178
+ /* The size classes set max-width; naming them here outranks them by specificity (4.18). */
1179
+ .aura-dialog.aura-dialog--sm, .aura-dialog.aura-dialog--md, .aura-dialog.aura-dialog--lg { max-width: none; }
1180
+ .aura-dialog { max-height: 92vh; max-height: 92dvh; border-radius: var(--aura-radius-2xl) var(--aura-radius-2xl) 0 0; border-bottom: 0;
1178
1181
  padding-bottom: calc(var(--aura-space-6) + env(safe-area-inset-bottom)); animation-name: aura-sheet-in; }
1179
1182
  .aura-dialog__foot { flex-direction: column-reverse; }
1180
1183
  .aura-dialog__foot > * { width: 100%; }
package/dist/styles.layer.css CHANGED
@@ -695,7 +695,8 @@ a.aura-icon-btn { text-decoration: none; }
695
695
  .aura-combo__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
696
696
  .aura-combo__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
697
697
  .aura-combo__desc { font-size: 12px; line-height: 1.5; color: var(--aura-fg-secondary); }
698
- .aura-combo__check { color: var(--aura-fg-accent) !important; }
698
+ /* Same specificity as `.aura-combo__option > .aura-icon` above and later in the file, so it wins by order (4.18). */
699
+ .aura-combo__option > .aura-combo__check { color: var(--aura-fg-accent); }
699
700
  .aura-combo__note { display: flex; align-items: center; gap: var(--aura-space-2); padding: var(--aura-space-3) var(--aura-space-2); font-size: 13px; color: var(--aura-fg-secondary); }
700
701
 
701
702
  /* ---------- DatePicker / Calendar ---------- */
@@ -1176,7 +1177,9 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
1176
1177
  .aura-stepper--horizontal .aura-stepper__item:not(:last-child)::after { right: 8px; }
1177
1178
  .aura-stepper--horizontal .aura-stepper__compact { display: block; }
1178
1179
  .aura-dialog-layer:not(.aura-drawer-layer) { align-items: flex-end; padding: 0; }
1179
- .aura-dialog { max-width: none !important; max-height: 92vh; max-height: 92dvh; border-radius: var(--aura-radius-2xl) var(--aura-radius-2xl) 0 0; border-bottom: 0;
1180
+ /* The size classes set max-width; naming them here outranks them by specificity (4.18). */
1181
+ .aura-dialog.aura-dialog--sm, .aura-dialog.aura-dialog--md, .aura-dialog.aura-dialog--lg { max-width: none; }
1182
+ .aura-dialog { max-height: 92vh; max-height: 92dvh; border-radius: var(--aura-radius-2xl) var(--aura-radius-2xl) 0 0; border-bottom: 0;
1180
1183
  padding-bottom: calc(var(--aura-space-6) + env(safe-area-inset-bottom)); animation-name: aura-sheet-in; }
1181
1184
  .aura-dialog__foot { flex-direction: column-reverse; }
1182
1185
  .aura-dialog__foot > * { width: 100%; }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jirawatpyk/aura-react",
3
- "version": "4.17.0",
3
+ "version": "4.18.0",
4
4
  "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
5
5
  "license": "MIT",
6
6
  "type": "module",