@jsenv/navi 0.27.21 → 0.27.23

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 (3) hide show
  1. package/dist/jsenv_navi.js +142 -146
  2. package/dist/jsenv_navi.js.map +6 -5
  3. package/package.json +1 -1
package/dist/jsenv_navi.js CHANGED
@@ -33465,7 +33465,8 @@ const PickerArray = props => {
33465
33465
  const PickerArrayUI = () => {
33466
33466
  const {
33467
33467
  value,
33468
- placeholder
33468
+ placeholder,
33469
+ maxRows
33469
33470
  } = useContext(PickerContext);
33470
33471
  if (!value || value.length === 0) {
33471
33472
  if (!placeholder) {
@@ -33476,6 +33477,8 @@ const PickerArrayUI = () => {
33476
33477
  return jsx(Text, {
33477
33478
  spacing: ", ",
33478
33479
  shrinkWrap: true,
33480
+ lineClamp: maxRows > 1 ? maxRows : undefined,
33481
+ overflowEllipsis: maxRows === 1 ? true : undefined,
33479
33482
  children: value.map(item => {
33480
33483
  return jsx("span", {
33481
33484
  children: item
@@ -36397,162 +36400,155 @@ installImportMetaCssBuild(import.meta);const css$k = /* css */`
36397
36400
  );
36398
36401
  --picker-icon-color-disabled: var(--picker-icon-color-readonly);
36399
36402
  }
36400
- }
36401
36403
 
36402
- .navi_picker {
36403
- --x-picker-outline-width: calc(
36404
- var(--picker-outline-width) + var(--picker-border-width)
36405
- );
36406
- --x-picker-outline-offset: calc(-1 * var(--picker-border-width));
36407
- --x-picker-background-color: var(--picker-background-color);
36408
- --x-picker-border-color: var(--picker-border-color);
36409
- --x-picker-padding-top: var(
36410
- --picker-padding-top,
36411
- var(
36412
- --picker-padding-y,
36413
- var(--picker-padding, var(--picker-padding-y-default))
36414
- )
36415
- );
36416
- --x-picker-padding-right: var(
36417
- --picker-padding-right,
36418
- var(
36419
- --picker-padding-x,
36420
- var(--picker-padding, var(--picker-padding-x-default))
36421
- )
36422
- );
36423
- --x-picker-padding-left: var(
36424
- --picker-padding-left,
36425
- var(
36426
- --picker-padding-x,
36427
- var(--picker-padding, var(--picker-padding-x-default))
36428
- )
36429
- );
36430
- --x-picker-padding-bottom: var(
36431
- --picker-padding-bottom,
36432
- var(
36433
- --picker-padding-y,
36434
- var(--picker-padding, var(--picker-padding-y-default))
36435
- )
36436
- );
36437
- --x-picker-color: var(--picker-color);
36438
- --x-picker-icon-color: var(--picker-icon-color);
36439
-
36440
- position: relative;
36441
- display: inline-flex;
36442
- box-sizing: border-box;
36443
- max-width: 100%;
36444
- min-height: calc(
36445
- 1lh + var(--x-picker-padding-top) + var(--x-picker-padding-bottom)
36446
- );
36447
- padding-top: var(--x-picker-padding-top);
36448
- padding-right: var(--x-picker-padding-right);
36449
- padding-bottom: var(--x-picker-padding-bottom);
36450
- padding-left: var(--x-picker-padding-left);
36451
- flex-direction: row;
36452
- align-items: center;
36453
- gap: var(--navi-xs);
36454
- color: var(--x-picker-color);
36455
- text-align: inherit;
36456
- text-overflow: ellipsis;
36457
- background-color: var(--x-picker-background-color);
36458
- border-width: var(--picker-border-width);
36459
- border-style: solid;
36460
- border-color: var(--x-picker-border-color);
36461
- border-radius: var(--picker-border-radius);
36462
- outline-width: var(--x-picker-outline-width);
36463
- outline-style: none;
36464
- outline-color: var(--picker-outline-color);
36465
- outline-offset: var(--x-picker-outline-offset);
36466
- cursor: var(--x-picker-cursor, pointer);
36467
- pointer-events: auto;
36468
- user-select: none;
36469
- overflow: hidden;
36404
+ .navi_picker {
36405
+ --x-picker-outline-width: calc(
36406
+ var(--picker-outline-width) + var(--picker-border-width)
36407
+ );
36408
+ --x-picker-outline-offset: calc(-1 * var(--picker-border-width));
36409
+ --x-picker-background-color: var(--picker-background-color);
36410
+ --x-picker-border-color: var(--picker-border-color);
36411
+ --x-picker-padding-top: var(
36412
+ --picker-padding-top,
36413
+ var(
36414
+ --picker-padding-y,
36415
+ var(--picker-padding, var(--picker-padding-y-default))
36416
+ )
36417
+ );
36418
+ --x-picker-padding-right: var(
36419
+ --picker-padding-right,
36420
+ var(
36421
+ --picker-padding-x,
36422
+ var(--picker-padding, var(--picker-padding-x-default))
36423
+ )
36424
+ );
36425
+ --x-picker-padding-left: var(
36426
+ --picker-padding-left,
36427
+ var(
36428
+ --picker-padding-x,
36429
+ var(--picker-padding, var(--picker-padding-x-default))
36430
+ )
36431
+ );
36432
+ --x-picker-padding-bottom: var(
36433
+ --picker-padding-bottom,
36434
+ var(
36435
+ --picker-padding-y,
36436
+ var(--picker-padding, var(--picker-padding-y-default))
36437
+ )
36438
+ );
36439
+ --x-picker-color: var(--picker-color);
36440
+ --x-picker-icon-color: var(--picker-icon-color);
36470
36441
 
36471
- .navi_picker_value {
36472
- display: inline-block;
36473
- min-width: 0;
36442
+ position: relative;
36443
+ display: inline-flex;
36444
+ box-sizing: border-box;
36474
36445
  max-width: 100%;
36475
- flex-grow: 1;
36446
+ min-height: calc(
36447
+ 1lh + var(--x-picker-padding-top) + var(--x-picker-padding-bottom)
36448
+ );
36449
+ padding-top: var(--x-picker-padding-top);
36450
+ padding-right: var(--x-picker-padding-right);
36451
+ padding-bottom: var(--x-picker-padding-bottom);
36452
+ padding-left: var(--x-picker-padding-left);
36453
+ flex-direction: row;
36454
+ align-items: center;
36455
+ gap: var(--navi-xs);
36456
+ color: var(--x-picker-color);
36457
+ text-align: inherit;
36476
36458
  text-overflow: ellipsis;
36477
- white-space: nowrap;
36459
+ background-color: var(--x-picker-background-color);
36460
+ border-width: var(--picker-border-width);
36461
+ border-style: solid;
36462
+ border-color: var(--x-picker-border-color);
36463
+ border-radius: var(--picker-border-radius);
36464
+ outline-width: var(--x-picker-outline-width);
36465
+ outline-style: none;
36466
+ outline-color: var(--picker-outline-color);
36467
+ outline-offset: var(--x-picker-outline-offset);
36468
+ cursor: var(--x-picker-cursor, pointer);
36469
+ pointer-events: auto;
36470
+ user-select: none;
36478
36471
  overflow: hidden;
36479
36472
 
36480
- &[navi-placeholder] {
36481
- color: var(--picker-placeholder-color);
36482
- }
36483
-
36484
- .navi_text:not(.navi_more_badge) {
36473
+ .navi_picker_value {
36474
+ display: inline-block;
36475
+ min-width: 0;
36485
36476
  max-width: 100%;
36486
- text-overflow: inherit;
36487
- vertical-align: middle; /* For some reason it's required to disminish inline-block height */
36488
- overflow: inherit;
36477
+ flex-grow: 1;
36478
+ text-overflow: ellipsis;
36479
+ white-space: nowrap;
36480
+ overflow: hidden;
36481
+
36482
+ &[navi-placeholder] {
36483
+ color: var(--picker-placeholder-color);
36484
+ }
36485
+ }
36486
+ .navi_picker_right_slot {
36487
+ display: inline-flex;
36488
+ height: 1em;
36489
+ height: 1lh;
36490
+ flex-shrink: 0;
36491
+ align-items: center;
36492
+ align-self: flex-start;
36493
+ justify-content: center;
36494
+ color: var(--x-picker-icon-color);
36495
+ transform: translateX(25%);
36496
+ }
36497
+ .navi_picker_input {
36498
+ position: absolute;
36499
+ inset: 0;
36500
+ box-sizing: border-box;
36501
+ width: 100%;
36502
+ height: 100%;
36503
+ margin: 0;
36504
+ padding: 0;
36505
+ background: none;
36506
+ border: none;
36507
+ opacity: 0;
36508
+ appearance: none;
36509
+ pointer-events: none;
36489
36510
  }
36490
- }
36491
- .navi_picker_right_slot {
36492
- display: inline-flex;
36493
- height: 1em;
36494
- height: 1lh;
36495
- flex-shrink: 0;
36496
- align-items: center;
36497
- align-self: flex-start;
36498
- justify-content: center;
36499
- color: var(--x-picker-icon-color);
36500
- transform: translateX(25%);
36501
- }
36502
- .navi_picker_input {
36503
- position: absolute;
36504
- inset: 0;
36505
- box-sizing: border-box;
36506
- width: 100%;
36507
- height: 100%;
36508
- margin: 0;
36509
- padding: 0;
36510
- background: none;
36511
- border: none;
36512
- opacity: 0;
36513
- appearance: none;
36514
- pointer-events: none;
36515
- }
36516
36511
 
36517
- &[data-line-clamp] {
36518
- overflow-wrap: anywhere;
36519
- .navi_picker_value {
36520
- display: -webkit-box;
36521
- white-space: normal;
36522
- -webkit-box-orient: vertical;
36523
- -webkit-line-clamp: var(--picker-max-rows);
36512
+ &[data-line-clamp] {
36513
+ overflow-wrap: anywhere;
36514
+ .navi_picker_value {
36515
+ display: -webkit-box;
36516
+ white-space: normal;
36517
+ -webkit-box-orient: vertical;
36518
+ -webkit-line-clamp: var(--picker-max-rows);
36519
+ }
36524
36520
  }
36525
- }
36526
36521
 
36527
- /* Hover */
36528
- &[data-hover] {
36529
- --x-picker-background-color: var(--picker-background-color-hover);
36530
- --x-picker-border-color: var(--picker-border-color-hover);
36531
- }
36532
- /* Readonly */
36533
- &[data-readonly] {
36534
- --x-picker-border-color: var(--picker-border-color-readonly);
36535
- --x-picker-background-color: var(--picker-background-color-readonly);
36536
- --x-picker-color: var(--picker-color-readonly);
36537
- --x-picker-icon-color: var(--picker-icon-color-readonly);
36538
- --x-picker-cursor: default;
36539
- }
36540
- /* Focus */
36541
- &[data-focus-visible] {
36542
- --x-picker-border-color: transparent;
36543
- outline-style: solid;
36544
- }
36545
- /* Disabled */
36546
- &[data-disabled] {
36547
- --x-picker-border-color: var(--picker-border-color-disabled);
36548
- --x-picker-background-color: var(--picker-background-color-disabled);
36549
- --x-picker-color: var(--picker-color-disabled);
36550
- --x-picker-icon-color: var(--picker-icon-color-disabled);
36551
- --x-picker-cursor: default;
36552
- }
36553
- /* Callout (info, warning, error) */
36554
- &[data-callout] {
36555
- --x-picker-border-color: var(--callout-color);
36522
+ /* Hover */
36523
+ &[data-hover] {
36524
+ --x-picker-background-color: var(--picker-background-color-hover);
36525
+ --x-picker-border-color: var(--picker-border-color-hover);
36526
+ }
36527
+ /* Readonly */
36528
+ &[data-readonly] {
36529
+ --x-picker-border-color: var(--picker-border-color-readonly);
36530
+ --x-picker-background-color: var(--picker-background-color-readonly);
36531
+ --x-picker-color: var(--picker-color-readonly);
36532
+ --x-picker-icon-color: var(--picker-icon-color-readonly);
36533
+ --x-picker-cursor: default;
36534
+ }
36535
+ /* Focus */
36536
+ &[data-focus-visible] {
36537
+ --x-picker-border-color: transparent;
36538
+ outline-style: solid;
36539
+ }
36540
+ /* Disabled */
36541
+ &[data-disabled] {
36542
+ --x-picker-border-color: var(--picker-border-color-disabled);
36543
+ --x-picker-background-color: var(--picker-background-color-disabled);
36544
+ --x-picker-color: var(--picker-color-disabled);
36545
+ --x-picker-icon-color: var(--picker-icon-color-disabled);
36546
+ --x-picker-cursor: default;
36547
+ }
36548
+ /* Callout (info, warning, error) */
36549
+ &[data-callout] {
36550
+ --x-picker-border-color: var(--callout-color);
36551
+ }
36556
36552
  }
36557
36553
  }
36558
36554
  `;