@dbcdk/react-components 0.0.65 → 0.0.66

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/components/forms/input/Input.module.css +6 -5
  2. package/dist/components/search-box/SearchBox.d.ts +1 -0
  3. package/dist/components/search-box/SearchBox.js +5 -2
  4. package/dist/styles/themes/dbc/dark.css +5 -5
  5. package/dist/styles/themes/dbc/light.css +5 -5
  6. package/package.json +1 -1
package/dist/components/forms/input/Input.module.css CHANGED
@@ -163,9 +163,9 @@
163
163
 
164
164
  .standalone {
165
165
  background-color: var(--color-bg-surface);
166
- border-color: var(--color-border-default);
166
+ border-color: var(--color-border-subtle);
167
167
  border-radius: var(--border-radius-rounded);
168
- box-shadow: var(--shadow-xs), var(--shadow-md);
168
+ box-shadow: var(--shadow-xs), var(--shadow-sm);
169
169
  }
170
170
 
171
171
  .standalone .input {
@@ -401,14 +401,15 @@
401
401
  .withButton:has(.standalone) .trailingButton {
402
402
  border-top-right-radius: var(--border-radius-rounded);
403
403
  border-bottom-right-radius: var(--border-radius-rounded);
404
- border-left-color: var(--color-border-default);
404
+ border-left-color: var(--color-border-subtle);
405
+ border-color: var(--color-border-subtle);
405
406
  background-color: var(--color-bg-surface);
406
- box-shadow: var(--shadow-xs), var(--shadow-md);
407
+ box-shadow: var(--shadow-xs), var(--shadow-sm);
407
408
  }
408
409
 
409
410
  .withButton:has(.standalone) .trailingButton:hover {
410
411
  border-color: var(--color-border-strong);
411
- box-shadow: var(--shadow-sm), var(--shadow-md);
412
+ box-shadow: var(--shadow-sm), var(--shadow-sm);
412
413
  }
413
414
 
414
415
  /* Date/time picker indicator (WebKit) */
package/dist/components/search-box/SearchBox.d.ts CHANGED
@@ -3,6 +3,7 @@ import { InputVariant } from '../../components/forms/input/Input';
3
3
  import { Size } from '../../types/sizes.types';
4
4
  type SearchBoxProps<T extends Record<string, unknown>> = {
5
5
  inputWidth?: string | number;
6
+ maxWidth?: string | number;
6
7
  inputSize?: Exclude<Size, 'xl'>;
7
8
  variant?: InputVariant;
8
9
  result?: T[];
package/dist/components/search-box/SearchBox.js CHANGED
@@ -7,7 +7,7 @@ import { Menu } from '../../components/menu/Menu';
7
7
  import { Popover } from '../../components/popover/Popover';
8
8
  import { SkeletonLoaderItem } from '../../components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
9
9
  import styles from './SearchBox.module.css';
10
- export const SearchBox = forwardRef(function SearchBoxInner({ inputWidth, inputSize, variant, result, debounce = true, debounceMs = 800, onSearch, onSelect, displayPopover, resultKeys, resultTemplate, initialTemplate, popoverMinWidth = '500px', noResultText = 'Ingen resultater', loading, enableHotkey = true, onButtonClick, buttonLabel, buttonIcon, fullWidth = false, value, onChange, ...rest }, ref) {
10
+ export const SearchBox = forwardRef(function SearchBoxInner({ inputWidth, maxWidth, inputSize, variant, result, debounce = true, debounceMs = 800, onSearch, onSelect, displayPopover, resultKeys, resultTemplate, initialTemplate, popoverMinWidth = '500px', noResultText = 'Ingen resultater', loading, enableHotkey = true, onButtonClick, buttonLabel, buttonIcon, fullWidth = false, value, onChange, ...rest }, ref) {
11
11
  const isControlled = value !== undefined;
12
12
  // What the user sees immediately in the textbox
13
13
  const [draft, setDraft] = useState(() => (isControlled ? String(value !== null && value !== void 0 ? value : '') : ''));
@@ -156,5 +156,8 @@ export const SearchBox = forwardRef(function SearchBoxInner({ inputWidth, inputS
156
156
  buttonIcon,
157
157
  fullWidth,
158
158
  ]);
159
- return _jsx("div", { style: fullWidth ? { width: '100%' } : undefined, children: inputField });
159
+ return (_jsx("div", { style: {
160
+ ...(fullWidth ? { width: '100%' } : undefined),
161
+ ...(maxWidth !== undefined ? { maxWidth } : undefined),
162
+ }, children: inputField }));
160
163
  });
package/dist/styles/themes/dbc/dark.css CHANGED
@@ -181,11 +181,11 @@ html[data-theme='dark'] {
181
181
  --opac-bg-dark-invert: rgba(0, 0, 0, 0.15);
182
182
 
183
183
  /* Shadows */
184
- --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
185
- --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
186
- --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.32);
187
- --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
188
- --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.45);
184
+ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.18);
185
+ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.24);
186
+ --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.32);
187
+ --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);
188
+ --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.48);
189
189
 
190
190
  /* Data viz */
191
191
  --viz-cat-1: #2563eb;
package/dist/styles/themes/dbc/light.css CHANGED
@@ -180,11 +180,11 @@ html[data-theme='light'] {
180
180
  --opac-bg-dark-invert: rgba(255, 255, 255, 0.1);
181
181
 
182
182
  /* Shadows */
183
- --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
184
- --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
185
- --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);
186
- --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
187
- --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
183
+ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
184
+ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
185
+ --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08);
186
+ --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
187
+ --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.12);
188
188
 
189
189
  /* Data viz */
190
190
  --viz-cat-1: #2563eb;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dbcdk/react-components",
3
- "version": "0.0.65",
3
+ "version": "0.0.66",
4
4
  "description": "Reusable React components for DBC projects",
5
5
  "license": "ISC",
6
6
  "author": "",