@eightshift/ui-components 1.0.2 → 1.0.4

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 (9) hide show
  1. package/dist/assets/fonts.css +1 -1
  2. package/dist/assets/wp-font-enhancements.css +1 -0
  3. package/dist/assets/wp-ui-enhancements.css +1 -0
  4. package/dist/components/repeater/repeater.js +27 -18
  5. package/dist/wp/wp-font-enhancements.js +1 -0
  6. package/dist/wp/wp-ui-enhancements.js +1 -0
  7. package/package.json +5 -2
  8. package/dist/assets/wp.css +0 -1
  9. package/dist/wp.js +0 -1
package/dist/assets/fonts.css CHANGED
@@ -1 +1 @@
1
- @font-face{font-family:Geist;src:url()}@font-face{font-family:Geist;src:url(../GeistVF.woff2)}@font-face{font-family:Geist Mono;src:url(../GeistMonoVF.woff2)}
1
+ @font-face{font-family:Geist;src:url(../GeistVF.woff2)}@font-face{font-family:Geist Mono;src:url(../GeistMonoVF.woff2)}
package/dist/assets/wp-font-enhancements.css ADDED
@@ -0,0 +1 @@
1
+ .edit-post-header,.components-popover,.edit-post-sidebar,.wp-block-post-title,.components-select-control__input,.components-base-control__field,.components-base-control__label,.components-combobox-control__suggestions-container,.components-input-control__label,.components-input-control__input,.components-checkbox-control__label,.components-menu-group__label,.components-menu-item__button,.components-notice .components-notice__content,.components-tooltip,.components-modal__header,.preferences-modal__section-title,.preferences-modal__section-description,.block-editor-inserter__tabs,.editor-list-view-sidebar,.edit-post-layout__footer,.components-snackbar,.components-text-control__input{font-family:Geist,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}body.wp-admin{font-family:Geist,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"!important}
package/dist/assets/wp-ui-enhancements.css ADDED
@@ -0,0 +1 @@
1
+ .edit-post-header__toolbar .components-button,.edit-post-header__settings .components-button,.edit-post-sidebar .components-button:not(.components-panel__body-toggle,.editor-post-last-revision__title),.components-snackbar,.components-toggle-group-control,.editor-post-publish-panel .components-button{border-radius:.375rem!important}.components-input-control__container,.components-combobox-control__suggestions-container,.components-checkbox-control__input,.components-tooltip,button.components-toggle-group-control-option-base,.editor-post-visibility__password-input{border-radius:.25rem!important}.components-button-group .components-button:first-child{border-top-left-radius:.375rem!important;border-bottom-left-radius:.375rem!important}.components-button-group .components-button:last-child{border-top-right-radius:.375rem!important;border-bottom-right-radius:.375rem!important}.components-popover__content{border-radius:.5rem!important}.block-editor-inserter__search{border-top-left-radius:.5rem!important;border-top-right-radius:.5rem!important}.components-base-control__label,.components-input-control__label,.components-custom-select-control__label{font-size:13px!important;font-weight:400!important;text-transform:none!important;letter-spacing:0em!important}.edit-post-sidebar{width:20rem!important}.block-list-appender.wp-block{position:static!important;padding:.25rem!important}.components-dropdown.block-editor-inserter{margin-left:auto!important;margin-right:auto!important;width:-moz-fit-content!important;width:fit-content!important}.block-editor-block-list__block-crash-warning{border-radius:.5rem!important;border-color:#b91c1c26!important;--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1) !important;--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important;--tw-shadow-color: rgb(185 28 28 / .1) !important;--tw-shadow: var(--tw-shadow-colored) !important}.block-editor-block-list__block-crash-warning .block-editor-warning__message{--tw-text-opacity: 1 !important;color:rgb(69 10 10 / var(--tw-text-opacity))!important}.block-editor-block-contextual-toolbar,.block-editor-block-parent-selector__button{border-radius:.5rem!important;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.block-editor-block-types-list .block-editor-block-types-list__item{border-radius:.5rem!important}.block-editor-block-types-list .block-editor-block-types-list__item:after{content:var(--tw-content)!important;border-radius:.5rem!important}.block-editor-block-types-list .block-editor-block-types-list__item svg{--tw-scale-x: 1.25;--tw-scale-y: 1.25;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.block-editor-list-view-tree .block-editor-block-icon{border-radius:.25rem!important}.block-editor-list-view-tree .block-editor-list-view-leaf>*:first-child{border-top-left-radius:.5rem!important;border-bottom-left-radius:.5rem!important}.block-editor-list-view-tree .block-editor-list-view-leaf>*:last-child{border-top-right-radius:.5rem!important;border-bottom-right-radius:.5rem!important}.block-editor-block-inspector .block-editor-block-card .block-editor-block-icon{border-radius:.25rem!important}.block-list-appender.wp-block>.block-editor-default-block-appender{width:-moz-fit-content;width:fit-content}.block-list-appender.wp-block>.block-editor-default-block-appender .block-editor-inserter__toggle{width:2.25rem!important;height:2.25rem!important}.block-list-appender.wp-block>.block-editor-default-block-appender .block-editor-inserter__toggle{border-radius:.375rem!important}
package/dist/components/repeater/repeater.js CHANGED
@@ -8,7 +8,7 @@ import { useId, useState } from "react";
8
8
  import { BaseControl } from "../base-control/base-control.js";
9
9
  import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
10
10
  import { ToggleButton } from "../toggle-button/toggle-button.js";
11
- import { fixIds, arrayMoveMultiple } from "../../utilities/array-helpers.js";
11
+ import { arrayMoveMultiple } from "../../utilities/array-helpers.js";
12
12
  import { c as clsx } from "../../lite-pbIeT7tm.js";
13
13
  import { $ as $e72dd72e1c76a225$export$2f645645f7bca764 } from "../../useListState-BRsq7O1C.js";
14
14
  /**
@@ -67,7 +67,8 @@ const Repeater = (props) => {
67
67
  const itemIdBase = useId("repeater-item-");
68
68
  const {
69
69
  children,
70
- items,
70
+ onChange: rawOnChange,
71
+ items: rawItems,
71
72
  "aria-label": ariaLabel,
72
73
  icon,
73
74
  label,
@@ -77,7 +78,6 @@ const Repeater = (props) => {
77
78
  hideEmptyState,
78
79
  addDefaultItem = {},
79
80
  addDisabled,
80
- onChange,
81
81
  onAfterItemAdd,
82
82
  onAfterItemRemove,
83
83
  minItems,
@@ -90,7 +90,15 @@ const Repeater = (props) => {
90
90
  const [selectable, setSelectable] = useState(false);
91
91
  const [canDelete, setCanDelete] = useState(false);
92
92
  const [canReorder, setCanReorder] = useState(true);
93
- fixIds(items, onChange, "key");
93
+ const onChange = (items2) => {
94
+ const currentItems = [...items2];
95
+ currentItems.forEach((item) => delete item.id);
96
+ rawOnChange(currentItems);
97
+ };
98
+ const items = rawItems.map((item, i) => ({
99
+ id: item.id ?? `${itemIdBase}-${i}`,
100
+ ...item
101
+ }));
94
102
  const rawList = $e72dd72e1c76a225$export$2f645645f7bca764({
95
103
  items,
96
104
  selectionMode: selectable ? "multiple" : "none"
@@ -98,27 +106,27 @@ const Repeater = (props) => {
98
106
  const list = {
99
107
  items,
100
108
  selectedKeys: rawList.selectionManager.selectedKeys,
101
- setSelectedKeys: (keys) => rawList.selectionManager.setSelectedKeys(keys),
102
- getKey: ({ key }) => items.find((item) => item.key === key),
103
- getItem: (key) => items.find((item) => item.key === key),
104
- update: (key, newValue) => {
105
- const index = [...items].findIndex((item) => item.key === key);
109
+ setSelectedKeys: (ids) => rawList.selectionManager.setSelectedKeys(ids),
110
+ getKey: ({ id }) => items.find((item) => item.id === id),
111
+ getItem: (id) => items.find((item) => item.id === id),
112
+ update: (id, newValue) => {
113
+ const index = [...items].findIndex((item) => item.id === id);
106
114
  items[index] = { ...items[index], ...newValue };
107
115
  onChange(items);
108
116
  },
109
117
  move: (sourceKey, targetKeys, direction = "before") => {
110
- const sourceIndex = items.findIndex((item) => item.key === sourceKey);
111
- const targetIndices = [...targetKeys].map((key) => items.findIndex((item) => item.key === key));
118
+ const sourceIndex = items.findIndex((item) => item.id === sourceKey);
119
+ const targetIndices = [...targetKeys].map((id) => items.findIndex((item) => item.id === id));
112
120
  onChange(arrayMoveMultiple(items, targetIndices, sourceIndex, direction));
113
121
  },
114
122
  insert: (targetKey, ...newItems) => {
115
- const targetIndex = items.findIndex((item) => item.key === targetKey);
123
+ const targetIndex = items.findIndex((item) => item.id === targetKey);
116
124
  const newItemsWithKeys = newItems.map((item) => ({ ...item, id: `${itemIdBase}${items.length + 1}` }));
117
125
  onChange([...items.slice(0, targetIndex), ...newItemsWithKeys, ...items.slice(targetIndex)]);
118
126
  },
119
127
  removeSelectedItems: () => {
120
- const keys = rawList.selectionManager.selectedKeys;
121
- const newItems = items.filter((item) => !keys.has(item.key));
128
+ const ids = rawList.selectionManager.selectedKeys;
129
+ const newItems = items.filter((item) => !ids.has(item.id));
122
130
  onChange(newItems);
123
131
  },
124
132
  append: (item) => {
@@ -127,8 +135,9 @@ const Repeater = (props) => {
127
135
  };
128
136
  let { dragAndDropHooks } = $d8f176866e6dc039$export$2cfc5be7a55829f6({
129
137
  isDisabled: selectable || !canReorder,
130
- getItems: (keys) => [...keys].map((key) => ({ "text/plain": list.getItem(key).id })),
138
+ getItems: (ids) => [...ids].map((id) => ({ "text/plain": list.getItem(id).id })),
131
139
  onReorder(e) {
140
+ console.log(e);
132
141
  if (e.target.dropPosition === "before") {
133
142
  list.move(e.target.key, e.keys);
134
143
  } else if (e.target.dropPosition === "after") {
@@ -170,7 +179,7 @@ const Repeater = (props) => {
170
179
  {
171
180
  onPress: () => {
172
181
  var _a;
173
- const removedItems = [...((_a = list == null ? void 0 : list.selectedKeys.keys()) == null ? void 0 : _a.map((key) => list.getItem(key))) ?? []];
182
+ const removedItems = [...((_a = list == null ? void 0 : list.selectedKeys.keys()) == null ? void 0 : _a.map((id) => list.getItem(id))) ?? []];
174
183
  list.removeSelectedItems();
175
184
  setSelectable(false);
176
185
  setCanDelete(false);
@@ -246,10 +255,10 @@ const Repeater = (props) => {
246
255
  items: list.items.map((item, index) => ({
247
256
  ...item,
248
257
  updateData: (newValue) => {
249
- list.update(item.key, { ...list.getItem(item.key), ...newValue });
258
+ list.update(item.id, { ...list.getItem(item.id), ...newValue });
250
259
  },
251
260
  itemIndex: index,
252
- deleteItem: () => list.remove(item.key),
261
+ deleteItem: () => list.remove(item.id),
253
262
  canReorder,
254
263
  setCanReorder
255
264
  })),
package/dist/wp/wp-font-enhancements.js ADDED
@@ -0,0 +1 @@
1
+ import '../assets/wp-font-enhancements.css';
package/dist/wp/wp-ui-enhancements.js ADDED
@@ -0,0 +1 @@
1
+ import '../assets/wp-ui-enhancements.css';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eightshift/ui-components",
3
- "version": "1.0.2",
3
+ "version": "1.0.4",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",
@@ -23,9 +23,12 @@
23
23
  "./utilities": "./dist/utilities/index.js",
24
24
  "./dist/assets/style.css": "./dist/assets/style.css",
25
25
  "./dist/assets/fonts.css": "./dist/assets/fonts.css",
26
- "./dist/assets/wp.css": "./dist/assets/wp.css",
26
+ "./dist/assets/wp-font-enhancements.css": "./dist/assets/wp-font-enhancements.css",
27
+ "./dist/assets/wp-ui-enhancements.css": "./dist/assets/wp-ui-enhancements.css",
27
28
  "./styles": "./dist/assets/style.css",
28
29
  "./fonts": "./dist/assets/fonts.css",
30
+ "./wp-font-enhancements": "./dist/assets/wp-font-enhancements.css",
31
+ "./wp-ui-enhancements": "./dist/assets/wp-ui-enhancements.css",
29
32
  "./wp-overrides": "./dist/assets/wp.css"
30
33
  },
31
34
  "scripts": {
package/dist/assets/wp.css DELETED
@@ -1 +0,0 @@
1
- .edit-post-header,.components-popover,.edit-post-sidebar,.wp-block-post-title,.components-select-control__input,.components-base-control__field,.components-base-control__label,.components-combobox-control__suggestions-container,.components-input-control__label,.components-input-control__input,.components-checkbox-control__label,.components-menu-group__label,.components-menu-item__button,.components-notice .components-notice__content,.components-tooltip,.components-modal__header,.preferences-modal__section-title,.preferences-modal__section-description,.block-editor-inserter__tabs,.editor-list-view-sidebar,.edit-post-layout__footer,.components-snackbar,.components-text-control__input{font-family:Geist,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}body.wp-admin{font-family:Geist,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"!important}.edit-post-header__toolbar .components-button,.edit-post-header__settings .components-button,.edit-post-sidebar .components-button:not(.components-panel__body-toggle,.editor-post-last-revision__title),.components-snackbar,.components-toggle-group-control,.editor-post-publish-panel .components-button{border-radius:.375rem!important}.components-input-control__container,.components-combobox-control__suggestions-container,.components-checkbox-control__input,.components-tooltip,button.components-toggle-group-control-option-base,.editor-post-visibility__password-input{border-radius:.25rem!important}.components-button-group .components-button:first-child{border-top-left-radius:.375rem!important;border-bottom-left-radius:.375rem!important}.components-button-group .components-button:last-child{border-top-right-radius:.375rem!important;border-bottom-right-radius:.375rem!important}.components-popover__content{border-radius:.5rem!important}.block-editor-inserter__search{border-top-left-radius:.5rem!important;border-top-right-radius:.5rem!important}.components-base-control__label,.components-input-control__label,.components-custom-select-control__label{font-size:13px!important;font-weight:400!important;text-transform:none!important;letter-spacing:0em!important}.edit-post-sidebar{width:20rem!important}.block-list-appender.wp-block{position:static!important;padding:.25rem!important}.components-dropdown.block-editor-inserter{margin-left:auto!important;margin-right:auto!important;width:-moz-fit-content!important;width:fit-content!important}.block-editor-block-list__block-crash-warning{border-radius:.5rem!important;border-color:#b91c1c26!important;--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1) !important;--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important;--tw-shadow-color: rgb(185 28 28 / .1) !important;--tw-shadow: var(--tw-shadow-colored) !important}.block-editor-block-list__block-crash-warning .block-editor-warning__message{--tw-text-opacity: 1 !important;color:rgb(69 10 10 / var(--tw-text-opacity))!important}.block-editor-block-contextual-toolbar,.block-editor-block-parent-selector__button{border-radius:.5rem!important;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.block-editor-block-types-list .block-editor-block-types-list__item{border-radius:.5rem!important}.block-editor-block-types-list .block-editor-block-types-list__item:after{content:var(--tw-content)!important;border-radius:.5rem!important}.block-editor-block-types-list .block-editor-block-types-list__item svg{--tw-scale-x: 1.25;--tw-scale-y: 1.25;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.block-editor-list-view-tree .block-editor-block-icon{border-radius:.25rem!important}.block-editor-list-view-tree .block-editor-list-view-leaf>*:first-child{border-top-left-radius:.5rem!important;border-bottom-left-radius:.5rem!important}.block-editor-list-view-tree .block-editor-list-view-leaf>*:last-child{border-top-right-radius:.5rem!important;border-bottom-right-radius:.5rem!important}.block-editor-block-inspector .block-editor-block-card .block-editor-block-icon{border-radius:.25rem!important}.block-list-appender.wp-block>.block-editor-default-block-appender{width:-moz-fit-content;width:fit-content}.block-list-appender.wp-block>.block-editor-default-block-appender .block-editor-inserter__toggle{width:2.25rem!important;height:2.25rem!important}.block-list-appender.wp-block>.block-editor-default-block-appender .block-editor-inserter__toggle{border-radius:.375rem!important}
package/dist/wp.js DELETED
@@ -1 +0,0 @@
1
- import './assets/wp.css';