@keeper-security/keeper-js-ui 0.25.2 → 0.27.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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,32 @@
1
1
  # Changelog
2
2
 
3
+ ## [0.27.0](https://github.com/Keeper-Security/keeper-js-ui/compare/v0.26.0...v0.27.0) (2026-06-15)
4
+
5
+
6
+ ### Features
7
+
8
+ * **SelectContent:** add container prop ([#606](https://github.com/Keeper-Security/keeper-js-ui/issues/606)) ([9885d3c](https://github.com/Keeper-Security/keeper-js-ui/commit/9885d3c402ff8c42515cc494602473e3f2bf6256))
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * **Input:** use placeholder CSS variable for placeholder color ([#604](https://github.com/Keeper-Security/keeper-js-ui/issues/604)) ([a9ff0b2](https://github.com/Keeper-Security/keeper-js-ui/commit/a9ff0b264512e963428786ac3a17ee7822e0ae2a))
14
+
15
+ ## [0.26.0](https://github.com/Keeper-Security/keeper-js-ui/compare/v0.25.2...v0.26.0) (2026-06-09)
16
+
17
+
18
+ ### Features
19
+
20
+ * **Box:** accept any element type via `as` ([#588](https://github.com/Keeper-Security/keeper-js-ui/issues/588)) ([72d2881](https://github.com/Keeper-Security/keeper-js-ui/commit/72d2881e44fba7aa517b15154fbe316834ebf928))
21
+ * **Icon:** add AppWindow2XIcon to library ([#587](https://github.com/Keeper-Security/keeper-js-ui/issues/587)) ([7316bc4](https://github.com/Keeper-Security/keeper-js-ui/commit/7316bc4503b1be3a2d94543baea87c50ce25ad47))
22
+ * **Typography:** deprecate "default" size, add "md" alias ([#573](https://github.com/Keeper-Security/keeper-js-ui/issues/573)) ([c760368](https://github.com/Keeper-Security/keeper-js-ui/commit/c760368d7d887bd1ac083d1fb7e87bdbf13a0b7a))
23
+
24
+
25
+ ### Bug Fixes
26
+
27
+ * **Button:** apply consistent 8px padding across all sizes ([#590](https://github.com/Keeper-Security/keeper-js-ui/issues/590)) ([c948488](https://github.com/Keeper-Security/keeper-js-ui/commit/c94848827ce24a0b8cd478bc6039de23cf77989f)), closes [#589](https://github.com/Keeper-Security/keeper-js-ui/issues/589)
28
+ * **deps:** move react/react-dom from dependencies to devDependencies ([f5c047b](https://github.com/Keeper-Security/keeper-js-ui/commit/f5c047b8683a18ee0411daded706b55e70d0dc11)), closes [#594](https://github.com/Keeper-Security/keeper-js-ui/issues/594)
29
+
3
30
  ## [0.25.2](https://github.com/Keeper-Security/keeper-js-ui/compare/v0.25.1...v0.25.2) (2026-05-18)
4
31
 
5
32
 
package/README.md CHANGED
@@ -6,12 +6,10 @@ _React components built for accessibility, consistency, and speed._
6
6
 
7
7
  - Terminal of your choice.
8
8
  - [git](https://github.com/git-guides/install-git) - Type `git -v` into your terminal to verify.
9
- - [Node.js v24](https://nodejs.org/en/download/package-manager) - Type `node -v` into your terminal to verify.
10
-
11
- ## Recommendations
12
-
13
- - [nvm](https://github.com/nvm-sh/nvm) - Manage multiple versions of node/npm. Type `nvm -v` into your terminal to verify.
14
- - [VS Code](https://code.visualstudio.com/) - Popular code editor with a healthy ecosystem of [extensions](https://marketplace.visualstudio.com/VSCode)/plugins.
9
+ - [Node.js v24](https://nodejs.org/en/download/package-manager) - Type `node -v` into your terminal to verify. **Recommendation**: use [nvm](https://github.com/nvm-sh/nvm) to install and manage different versions of Node.
10
+ - [pnpm v11.4.0](https://pnpm.io/installation) - Type `pnpm -v` to verify. **Recommendation**: use [Corepack](https://pnpm.io/installation#using-corepack) that comes bundled with Node since `v16.13`:
11
+ 1. `corepack enable pnpm`
12
+ 2. `corepack prepare --activate`
15
13
 
16
14
  ## Getting Started
17
15
 
@@ -20,13 +18,13 @@ Git clone or [download](https://github.com/Keeper-Security/keeper-js-ui/archive/
20
18
  Open a terminal from the root of the project and run:
21
19
 
22
20
  ```sh
23
- npm ci
21
+ pnpm ci
24
22
  ```
25
23
 
26
24
  Views are rendered via [Storybook](https://storybook.js.org/). To see components in action and start making edits, simply run:
27
25
 
28
26
  ```sh
29
- npm run storybook
27
+ pnpm storybook
30
28
  ```
31
29
 
32
30
  `ctrl + c` to stop the server.
@@ -45,7 +43,7 @@ The [src/](./src/) folder holds all component-related code.
45
43
  - [src/hooks](./src/hooks/): React-specific [hooks](https://react.dev/reference/react/hooks).
46
44
  - [src/lib/](./src/lib/): Internal utility/helper functions.
47
45
 
48
- With [Storybook](https://storybook.js.org/) running (`npm run storybook`), most edits are shown immediately upon saving without the need for browser refreshes or server restarts. Exceptions would be changes to infrastructure code like edits to Storybook itself.
46
+ With [Storybook](https://storybook.js.org/) running (`pnpm storybook`), most edits are shown immediately upon saving without the need for browser refreshes or server restarts. Exceptions would be changes to infrastructure code like edits to Storybook itself.
49
47
 
50
48
  ### Creating a Story
51
49
 
@@ -233,13 +231,13 @@ and allow enough time for migration before removal.
233
231
 
234
232
  ## Testing
235
233
 
236
- The [Vitest addon](https://storybook.js.org/docs/writing-tests/integrations/vitest-addon) will run smoke tests and unit tests with the command: `npm test`.
234
+ The [Vitest addon](https://storybook.js.org/docs/writing-tests/integrations/vitest-addon) will run smoke tests and unit tests with the command: `pnpm test`.
237
235
 
238
236
  ### Smoke Tests
239
237
 
240
238
  Also known as confidence testing or sanity testing, smoke testing is the practice of testing the most important functionality of a system or feature. In this case, we use them to also check if any code changes have broken components in obvious ways. This automated process would be the equivalent of manually clicking on each story and verifying that it loaded without errors.
241
239
 
242
- There is no additional code you need to write after creating a new story. Stories will get picked up automatically and tested whenever `npm test` is ran.
240
+ There is no additional code you need to write after creating a new story. Stories will get picked up automatically and tested whenever `pnpm test` is ran.
243
241
 
244
242
  When you push a change up to Github, an [action will run](https://github.com/Keeper-Security/keeper-js-ui/actions/workflows/storybook-tests.yml) these tests and give you feedback to the outcome.
245
243
 
@@ -369,7 +367,7 @@ These standards are enforced with the help of [commitlint](https://commitlint.js
369
367
  If you're not comfortable with [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) and you're ready to commit your **staged changes**, you can run:
370
368
 
371
369
  ```sh
372
- npm run commit
370
+ pnpm commit
373
371
  ```
374
372
 
375
373
  [czhgit](https://github.com/Zhengqbbb/cz-git) will prompt a series of questions and format your answers per the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/#specification):
@@ -428,16 +426,16 @@ Occassionally, a PR might be created when a security patch is available from one
428
426
  > It's always a good idea to `git pull` and `git checkout` that branch locally to run some smoke tests before merging.
429
427
 
430
428
  ```
431
- npm ci && npm run build && npm start
429
+ pnpm ci && pnpm build && pnpm start
432
430
  ```
433
431
 
434
- If you want to take an additional step to smoke test, you can run `npm test` in a new terminal while `npm start` is still running.
432
+ If you want to take an additional step to smoke test, you can run `pnpm test` in a new terminal while `pnpm start` is still running.
435
433
 
436
434
  ### Release PRs
437
435
 
438
436
  Whenever a PR is merged into the `main` branch, a [Release Github Action](https://github.com/Keeper-Security/keeper-js-ui/actions/workflows/release-please.yml) is automatically triggered to parse through the git history for certain keywords.
439
437
 
440
- Based on the existence of these keywords, a new PR may be created automatically with updates to `package.json`, `package-lock.json`, and `CHANGELOG.md`.
438
+ Based on the existence of these keywords, a new PR may be created automatically with updates to `package.json`, `pnpm-lock.yaml`, and `CHANGELOG.md`.
441
439
 
442
440
  Once that PR is merged into `main`, a release tag is created. See [Publishing an NPM Package](#publishing-an-npm-package) for more info.
443
441
 
@@ -505,7 +503,6 @@ This provides 100% customizable opportunities and 100% ownership. It also relies
505
503
 
506
504
  - [.czrc](./.czrc) => [cz-git](https://github.com/Zhengqbbb/cz-git#readme)
507
505
  - [.husky/\*](./.husky/) => [Husky](https://typicode.github.io/husky/how-to.html)
508
- - [.nvmrc](./.nvmrc) => [nvm](https://github.com/nvm-sh/nvm#readme)
509
506
  - [prettier.config.js](./prettier.config.js) => [Prettier](https://prettier.io/docs/en/configuration.html)
510
507
  - [.storybook/\*](./.storybook/) => [Storybook](https://storybook.js.org/docs/get-started/setup)
511
508
  - [commitlint.config.mjs](./commitlint.config.mjs) => [commitlint](https://commitlint.js.org/reference/configuration.html)
@@ -520,7 +517,7 @@ This provides 100% customizable opportunities and 100% ownership. It also relies
520
517
  To create a production-ready build, you can run:
521
518
 
522
519
  ```sh
523
- npm run build
520
+ pnpm build
524
521
  ```
525
522
 
526
523
  This process inspects the [src/index.ts](./src/index.ts) file and pulls in only the necessary code. Packages listed under [package.json's](./package.json) `peerDependencies` will be ignored and left to the external implementations to install separately. This avoids redundancy and keeps file sizes down.
@@ -536,13 +533,13 @@ A `dist` folder will be created at the root of the project. This folder is ignor
536
533
 
537
534
  Before publishing, you want to make sure that external projects have access to expected components and intellisense/autocomplete still works.
538
535
 
539
- [npm link](https://docs.npmjs.com/cli/v9/commands/npm-link) can be flakey, so the alternative would be run [npm pack](https://docs.npmjs.com/cli/v9/commands/npm-pack) to create a local \*.tgz file in the library and install that file into the external project importing the library.
536
+ The recommended approach is to run [pnpm pack](https://pnpm.io/cli/pack) to create a local \*.tgz file in the library and install that file into the external project importing the library.
540
537
 
541
538
  0. (Optional): Update the library's `package.json` version number, **_but don't commit it_**. This step is automated with the correct next version number.
542
539
  1. From the library, run:
543
540
 
544
541
  ```sh
545
- npm run build && npm pack
542
+ pnpm build && pnpm pack
546
543
  ```
547
544
 
548
545
  2. Copy the name and location of the new `*.tgz` file that was created at the root of the library.
@@ -557,10 +554,10 @@ npm run build && npm pack
557
554
  5. From the external project, run:
558
555
 
559
556
  ```sh
560
- npm install
557
+ pnpm install
561
558
  ```
562
559
 
563
- 6. After testing for component behavior and availability, as well as intellisense/autocomplete and TypeScript prop validation, undo your package reference changes to `package.json` & `package-lock.json`. **_Do not commit them into your external project._**
560
+ 6. After testing for component behavior and availability, as well as intellisense/autocomplete and TypeScript prop validation, undo your package reference changes to `package.json` & `pnpm-lock.yaml`. **_Do not commit them into your external project._**
564
561
 
565
562
  ## Publishing an NPM Package
566
563