@westpac/ui 1.3.0 → 1.3.2

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 (24) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/component-type.json +1 -1
  3. package/dist/components/autocomplete/components/autocomplete-popover/autocomplete-popover.component.js +1 -1
  4. package/dist/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.component.js +1 -1
  5. package/dist/components/date-picker/date-picker.component.js +1 -1
  6. package/dist/components/dropdown/dropdown.component.js +1 -1
  7. package/dist/components/modal/components/modal-backdrop/modal-backdrop.component.js +1 -1
  8. package/dist/components/multi-select/components/multi-select-popover/multi-select-popover.component.js +1 -1
  9. package/dist/components/pagination/index.d.ts +1 -0
  10. package/dist/components/pagination/index.js +1 -0
  11. package/dist/components/pagination/pagination.hooks.js +1 -0
  12. package/dist/components/popover/components/panel/panel.styles.js +1 -1
  13. package/dist/css/westpac-ui.css +0 -3
  14. package/dist/css/westpac-ui.min.css +0 -3
  15. package/package.json +3 -3
  16. package/src/components/autocomplete/components/autocomplete-popover/autocomplete-popover.component.tsx +1 -1
  17. package/src/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.component.tsx +1 -1
  18. package/src/components/date-picker/date-picker.component.tsx +1 -1
  19. package/src/components/dropdown/dropdown.component.tsx +1 -1
  20. package/src/components/modal/components/modal-backdrop/modal-backdrop.component.tsx +1 -1
  21. package/src/components/multi-select/components/multi-select-popover/multi-select-popover.component.tsx +1 -1
  22. package/src/components/pagination/index.ts +1 -0
  23. package/src/components/pagination/pagination.hooks.ts +2 -0
  24. package/src/components/popover/components/panel/panel.styles.ts +1 -1
package/dist/components/autocomplete/components/autocomplete-popover/autocomplete-popover.component.js CHANGED
@@ -12,7 +12,7 @@ export function AutocompletePopover(props) {
12
12
  }, state);
13
13
  const brandContainer = useMemo(()=>{
14
14
  if (typeof window !== 'undefined') {
15
- return document.querySelector('[data-theme]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || document.body;
15
+ return document.querySelector('[data-brand]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || document.body;
16
16
  }
17
17
  }, []);
18
18
  const width = (_props_triggerRef_current = props.triggerRef.current) === null || _props_triggerRef_current === void 0 ? void 0 : _props_triggerRef_current.getBoundingClientRect().width;
package/dist/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.component.js CHANGED
@@ -20,7 +20,7 @@ export function BottomSheetModal({ zIndex = 10, state, height, width, children,
20
20
  const [isMobile, setIsMobile] = useState(checkIfItIsMobile(MEDIUM_BREAKPOINT_AS_NUMBER));
21
21
  const brandContainer = useMemo(()=>{
22
22
  if (isBrowser) {
23
- return document.querySelector('[data-theme]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || document.body;
23
+ return document.querySelector('[data-brand]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || document.body;
24
24
  }
25
25
  }, []);
26
26
  useEffect(()=>{
package/dist/components/date-picker/date-picker.component.js CHANGED
@@ -86,7 +86,7 @@ export function DatePicker({ size = 'medium', className, bottomSheetView = {
86
86
  const buttonRef = useRef(null);
87
87
  const { buttonProps: newButtonProps } = useButton(buttonProps, buttonRef);
88
88
  const brandContainer = useMemo(()=>{
89
- return document.querySelector('[data-theme]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || undefined;
89
+ return document.querySelector('[data-brand]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || undefined;
90
90
  }, []);
91
91
  return React.createElement(React.Fragment, null, props.label && React.createElement("div", labelProps, props.label), React.createElement("div", {
92
92
  ...props,
package/dist/components/dropdown/dropdown.component.js CHANGED
@@ -49,7 +49,7 @@ export function Dropdown({ className, portalClassName, dropdownSize = 'medium',
49
49
  ]);
50
50
  const brandContainer = useMemo(()=>{
51
51
  if (typeof window !== 'undefined') {
52
- return document.querySelector('[data-theme]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || document.body;
52
+ return document.querySelector('[data-brand]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || document.body;
53
53
  }
54
54
  }, []);
55
55
  return React.createElement(React.Fragment, null, React.createElement(Button, {
package/dist/components/modal/components/modal-backdrop/modal-backdrop.component.js CHANGED
@@ -12,7 +12,7 @@ export function ModalBackdrop({ zIndex = 100, portalContainer, size, compact, ..
12
12
  const { modalProps, underlayProps } = useModalOverlay(props, state, ref);
13
13
  const brandContainer = useMemo(()=>{
14
14
  if (typeof window !== 'undefined') {
15
- return document.querySelector('[data-theme]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || document.body;
15
+ return document.querySelector('[data-brand]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || document.body;
16
16
  }
17
17
  }, []);
18
18
  if (!state.isOpen) {
package/dist/components/multi-select/components/multi-select-popover/multi-select-popover.component.js CHANGED
@@ -26,7 +26,7 @@ export function MultiSelectPopover({ children, className, ...props }) {
26
26
  }, overlayState);
27
27
  const brandContainer = useMemo(()=>{
28
28
  if (typeof window !== 'undefined') {
29
- return document.querySelector('[data-theme]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || document.body;
29
+ return document.querySelector('[data-brand]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || document.body;
30
30
  }
31
31
  }, []);
32
32
  const styles = popoverStyles();
package/dist/components/pagination/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export { Pagination } from './pagination.component.js';
2
+ export { usePagination } from './pagination.hooks.js';
2
3
  export { type PaginationProps } from './pagination.types.js';
package/dist/components/pagination/index.js CHANGED
@@ -1 +1,2 @@
1
1
  export { Pagination } from './pagination.component.js';
2
+ export { usePagination } from './pagination.hooks.js';
package/dist/components/pagination/pagination.hooks.js CHANGED
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  import { useCallback, useState } from 'react';
2
3
  export const usePagination = ({ defaultCurrent = 1, totalPages, infinite = false })=>{
3
4
  const [currentPage, setCurrentPage] = useState(defaultCurrent);
package/dist/components/popover/components/panel/panel.styles.js CHANGED
@@ -8,7 +8,7 @@ export const styles = tv({
8
8
  after:top-0 after:left-[1.5px] after:size-0 after:border-x-[6.5px] after:border-t-[11px] after:border-x-[transparent] after:border-t-background-white
9
9
  `,
10
10
  closeBtn: 'absolute top-1 right-1 h-3 p-0',
11
- content: 'w-[18.75rem] rounded-xl bg-background-white py-4 pr-5 pl-3',
11
+ content: 'w-[18.75rem] rounded-xl bg-background-white p-4',
12
12
  heading: 'mb-2 typography-body-9 font-medium text-text-body focus-visible:focus-outline',
13
13
  body: 'typography-body-10 text-text-body focus-visible:focus-outline'
14
14
  },
package/dist/css/westpac-ui.css CHANGED
@@ -2436,9 +2436,6 @@
2436
2436
  .py-3 {
2437
2437
  padding-block: calc(0.375rem * 3);
2438
2438
  }
2439
- .py-4 {
2440
- padding-block: calc(0.375rem * 4);
2441
- }
2442
2439
  .py-\[0\.5rem\] {
2443
2440
  padding-block: 0.5rem;
2444
2441
  }
package/dist/css/westpac-ui.min.css CHANGED
@@ -2436,9 +2436,6 @@
2436
2436
  .py-3 {
2437
2437
  padding-block: calc(0.375rem * 3);
2438
2438
  }
2439
- .py-4 {
2440
- padding-block: calc(0.375rem * 4);
2441
- }
2442
2439
  .py-\[0\.5rem\] {
2443
2440
  padding-block: 0.5rem;
2444
2441
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@westpac/ui",
3
- "version": "1.3.0",
3
+ "version": "1.3.2",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "type": "module",
@@ -238,7 +238,7 @@
238
238
  "glob": "~10.5.0",
239
239
  "jsdom": "^22.1.0",
240
240
  "plop": "~4.0.5",
241
- "postcss": "~8.5.6",
241
+ "postcss": "~8.5.10",
242
242
  "postcss-cli": "~10.1.0",
243
243
  "prettier": "^3.2.5",
244
244
  "prop-types": "^15.8.1",
@@ -254,8 +254,8 @@
254
254
  "vite": "^7.1.12",
255
255
  "vitest": "^3.2.4",
256
256
  "@westpac/eslint-config": "~1.1.0",
257
- "@westpac/style-config": "~1.0.2",
258
257
  "@westpac/test-config": "~0.0.0",
258
+ "@westpac/style-config": "~1.0.2",
259
259
  "@westpac/ts-config": "~0.0.0"
260
260
  },
261
261
  "dependencies": {
package/src/components/autocomplete/components/autocomplete-popover/autocomplete-popover.component.tsx CHANGED
@@ -23,7 +23,7 @@ export function AutocompletePopover(props: AutocompletePopoverProps) {
23
23
  const brandContainer = useMemo(() => {
24
24
  if (typeof window !== 'undefined') {
25
25
  return (
26
- document.querySelector('[data-theme]') ||
26
+ document.querySelector('[data-brand]') ||
27
27
  document.querySelector('[class^="theme-"], [class*=" theme-"]') ||
28
28
  document.body
29
29
  );
package/src/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.component.tsx CHANGED
@@ -39,7 +39,7 @@ export function BottomSheetModal({
39
39
  const brandContainer = useMemo(() => {
40
40
  if (isBrowser) {
41
41
  return (
42
- document.querySelector('[data-theme]') ||
42
+ document.querySelector('[data-brand]') ||
43
43
  document.querySelector('[class^="theme-"], [class*=" theme-"]') ||
44
44
  document.body
45
45
  );
package/src/components/date-picker/date-picker.component.tsx CHANGED
@@ -86,7 +86,7 @@ export function DatePicker({
86
86
 
87
87
  const brandContainer = useMemo(() => {
88
88
  return (
89
- document.querySelector('[data-theme]') ||
89
+ document.querySelector('[data-brand]') ||
90
90
  document.querySelector('[class^="theme-"], [class*=" theme-"]') ||
91
91
  undefined
92
92
  );
package/src/components/dropdown/dropdown.component.tsx CHANGED
@@ -72,7 +72,7 @@ export function Dropdown({
72
72
  const brandContainer = useMemo(() => {
73
73
  if (typeof window !== 'undefined') {
74
74
  return (
75
- document.querySelector('[data-theme]') ||
75
+ document.querySelector('[data-brand]') ||
76
76
  document.querySelector('[class^="theme-"], [class*=" theme-"]') ||
77
77
  document.body
78
78
  );
package/src/components/modal/components/modal-backdrop/modal-backdrop.component.tsx CHANGED
@@ -23,7 +23,7 @@ export function ModalBackdrop({ zIndex = 100, portalContainer, size, compact, ..
23
23
  const brandContainer = useMemo(() => {
24
24
  if (typeof window !== 'undefined') {
25
25
  return (
26
- document.querySelector('[data-theme]') ||
26
+ document.querySelector('[data-brand]') ||
27
27
  document.querySelector('[class^="theme-"], [class*=" theme-"]') ||
28
28
  document.body
29
29
  );
package/src/components/multi-select/components/multi-select-popover/multi-select-popover.component.tsx CHANGED
@@ -42,7 +42,7 @@ export function MultiSelectPopover({ children, className, ...props }: MultiSelec
42
42
  const brandContainer = useMemo(() => {
43
43
  if (typeof window !== 'undefined') {
44
44
  return (
45
- document.querySelector('[data-theme]') ||
45
+ document.querySelector('[data-brand]') ||
46
46
  document.querySelector('[class^="theme-"], [class*=" theme-"]') ||
47
47
  document.body
48
48
  );
package/src/components/pagination/index.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export { Pagination } from './pagination.component.js';
2
+ export { usePagination } from './pagination.hooks.js';
2
3
  export { type PaginationProps } from './pagination.types.js';
package/src/components/pagination/pagination.hooks.ts CHANGED
@@ -1,3 +1,5 @@
1
+ 'use client';
2
+
1
3
  import { useCallback, useState } from 'react';
2
4
 
3
5
  import { type PaginationHookProps } from './pagination.types.js';
package/src/components/popover/components/panel/panel.styles.ts CHANGED
@@ -10,7 +10,7 @@ export const styles = tv({
10
10
  after:top-0 after:left-[1.5px] after:size-0 after:border-x-[6.5px] after:border-t-[11px] after:border-x-[transparent] after:border-t-background-white
11
11
  `,
12
12
  closeBtn: 'absolute top-1 right-1 h-3 p-0',
13
- content: 'w-[18.75rem] rounded-xl bg-background-white py-4 pr-5 pl-3',
13
+ content: 'w-[18.75rem] rounded-xl bg-background-white p-4',
14
14
  heading: 'mb-2 typography-body-9 font-medium text-text-body focus-visible:focus-outline',
15
15
  body: 'typography-body-10 text-text-body focus-visible:focus-outline',
16
16
  },